I’ve read a couple of interesting articles about the future of images on the web.

The Picture Element from HTML5 Rocks 
Responsive Images in Practice on ALA

There are two image problems that need solving in our multi-dimensional device landscape: bandwidth and art direction.

Firstly – the bandwidth problem is easy to understand: an smartphone user roaming on a throttled 3G line doesn’t want to swallow high-res retina images intended for a 27″ retina screen.

Secondly – art-direction. This problem relates to how an automatically resized image is not always going to be the best fit for the device/layout that it’s being served to. A hero image on that smartphone may look better if it’s a detail crop of the full image served to a large desktop monitor.

There’s been JavaScript hacks for a while (image replacement before/after the fact) to solve the first problem but now with the the <picture> element we have a maturing HTML only solution that solves both the above issues.

However, there is more work to implement this new element; extra mark-up to include and design-informed crops to be made. Hence resistance from developers who had come to the conclusion that responsive images are there to make their lives easier – one image to rule them all if you like.

Perhaps this new normal is currently only suited to properly curated hero images with the help of a decent CMS. But be warned – the humble <img> tag is metamorphosing.

 

Last updated on 30th August 2018