The <picture> element

Image optimization, re-framed

In Best Practices for Optimizing Images, I covered the issues related to optimizing your web images and making your pages as lean as possible. Part of the problem lies within keeping your pages responsive, as well. Many web developers have taken the easy way out; they use the largest image they expect to need and then let the browser scale it down. This means that if you are designing a modern page that might be seen on a 4x monitor, you need a huge graphic to support the impressive pixel density.

If the page viewer isn’t on a super-new 4x high-definition device, why send down the 900-pound gorilla image?

While those huge images can’t be reduced in pixel size (and while compression only goes so far), there is a solution to downloading the huge images if they’re not needed.

Introducing the <picture> element

The <picture> element proposes to solve this problem by allowing you to specify different images based on the capabilities of the viewer. This ensures that you only send an image suitable to the viewer’s ability to show it, and nothing larger. While this has been done in CSS until now, the CSS solution is a bit more complex than the code needed for <picture>. For example: Danica Patrick after her big win in the GoDaddy car!

<source media=”(min-width: 1024px)” srcset=”HighestResDanica.jpg, HighestResDanica-2X.jpg 2X”>
<source media=”(min-width: 640px)” srcset=”ModerateResDanica.jpg, ModerateResDanica-2X.jpg 2X”>
<source srcset=”BottomResDanica.jpg”>
<img src=”DefaultDanica.jpg” alt=”Danica Patrick smiling for older browsers”>
<p>Danica Patrick after her big win in the GoDaddy car!</p>

As you can see,a different image will be used based on the minimum width available to the browser. Yes, this means you need to make your images in different sizes, and this will take more time, but you knew the job was dangerous when you took it, right? Instead of minima, we could also code for maxima:

<source media="print" srcset="danica_print.jpg">
<source media="(max-width: 480px)" srcset="danica_small.jpg">
<source media="(max-width: 640px)" srcset="danica_medium.jpg">
<source media="(max-width: 1024px)" srcset="danica_large.jpg">
<img src="landscape_large.jpg" alt="Danica eating ice cream after the big win!">

Note that you need not use the same image. You might find that on medium resolution, you want to crop the image a little tighter in order to show more detail. This is not only acceptable, but also probably smart. Note how the smaller image is also zoomed-in a bit and cropped.

Danica2 Danica1Pro tip: The <picture> element is new. Very new. Only the absolute latest browsers support it, and they’re doing so ahead of the official release of the new specification. The takeaway here is that while this will be the future, it’s still only moderately supported. As of this writing, tentative functionality is in Firefox 33+, Chrome 38+, and Opera 26+ — and in all of these except Chrome, disabled by default. But it’s on the horizon to be a standard feature (even Microsoft has acknowledged that they’re working on it), and being ready will pay huge dividends. Grow into it.

Image by: JoãoMoura via Compfight cc