Images in Responsive Web Development

http://greatfridays.com/blog/images-in-responsive-web-development/

Retina displays:
1. CSS3
2. @font-face icons
3. Pixel density CSS Media Queries
4. SVG images

Image optimizations:
1. Encoding
2. Image compression
3. CSS Sprite sheet

Image replacement:
1. Server side detection frameworks
2. CDN Proxy
3. HTML5 picture element
4. JavaScript detection

Recommendations by Adam Foster

For now, project requirements decide which image replacement technique we use. But regardless of the approach our Engineering team try to adhere to the following, for images in responsive web:

• Use CSS3 in place of images whenever possible
• Rasterized background images should be optimized for Retina displays, using a media query or/and @2x images
• SVG is the prefered format for vector based images
• Use CSS Sprite sheets to reduce HTTP requests for images
• Compress images as much as possible while preserving quality. Take time to experiment with compression techniques such as the ‘more detail with less kilobyte’ image compression approach
• The image replacement approach needs to allow for art direction
• Images should be optimized for a range of device resolutions
• Users shouldn’t download multiple versions of the same image

And finally, a few things we are looking forward to making part of our responsive web development workflow in the near future:

• @font-face custom font for an icon library
• SVG fragment identifiers
• The proposed HTML5 picture element