Responsive web design means that not only can our layouts change based on device characteristics, but content can change as well. For example, on high resolution (2x) displays, high resolution graphics ensure sharpness. An image that is 50% width may work just fine when the browser is 800px wide, but uses too much real estate on a narrow phone, and requires the same bandwidth overhead when scaled down to fit a smaller screen.
Part of course:
Responsive Images
- Art direction
- Responsive Images
- Images in markup
- Enhance imgs with srcset for high DPI devices
- Art direction in responsive images with picture
- Relative sized images
- Account for breakpoints in responsive images
- Make product images expandable
- Other image techniques
- Compressive images
- JavaScript image replacement
- Inlining images: raster and vector
- SVG
- Data URI
- Inlining in CSS
- Inlining pros & cons
- Images in CSS
- Use image-set to provide high res images
- Use SVG for icons
- Use icon fonts with caution
- Optimize images for performance
- Choose the right format
- Reduce the file size
- Use image sprites
- Consider lazy loading
- Avoid images completely
- Place text in markup instead of embedded in images
- Use CSS to replace images
Show admin stats