The industry is gaining considerable momentum towards implementing the < picture > element and the srcset attribute. Both of these could finally offer a standard solution to the gnarly problem of providing a mature and consistent approach to implementing images effectively, especially within Responsive Websites, and potentially also bringing some Web Performance benefits.
Ahead of full take-up, and considering future-legacy-browers, there is an updated version of Scott Jehl’s PictureFill: https://github.com/scottjehl/picturefill.
As such, you can seriously considering implementing a better images approach *today*.
First steps to try:
- grab a copy of picturefill.js
- Use the < picture > element as such:
Demo : How do you like them apples?
<picture > <!--[if IE 9]><video style="display: none;"><![endif]--> <source srcset="/image1_big.jpg" media="(min-width: 1000px)"> <source srcset="/image1_medium.jpg" media="(min-width: 800px)"> <source srcset="/image_small.jpg"> <!--[if IE 9]></video><![endif]--> <img srcset="/image_fallback.jpg" alt="context"> </ picture >
I am using a server-side Dynamic Imaging system to make the image manipulations on the fly (using query string parameters to specify the width, quality, and sharpening to be applied at-request time):
srcset="https://images.amplience.com/i/benco/Apple_Row2.jpg?w=1400&qlt=80&unsharp=0,1,1,7" media="(min-width: 1000px)"
srcset="https://images.amplience.com/i/benco/Apple_Row2.jpg?w=800&qlt=80&unsharp=0,1,1,7" media="(min-width: 800px)"