Responsive Images in Practice (Part 3)

Original author: Eric Portis
  • Transfer
The last part of the story about responsive images, which we started here and continued here , talking about the use of srcset and sizes. Today we will talk about using a tag to wrap images.

Stage Two: picture and direction

srcset for the lazy, picture for the insane
Mat Marquez

So, for images that just need to be scaled, we list our sources and their width in pixels in srcset, let the browser choose which image width will be displayed using sizes, and let go of our crazy desire to control everything. But! Sometimes we want to adapt our images, going beyond scaling. In this case, we need to return a small part of the control over the selection of source codes. Enter picture.

Our detailed images have a large aspect ratio of 16: 9. On large screens, they look great, but on the phone they become tiny. The stitch and embroidery that need to be shown in the detailed images are too small to be considered.

It would be nice if we could “enlarge” the images on small screens, presenting them in a denser and higher form.


Such things — fitting image content to separate environments — are called “directing.” Every time we crop or otherwise change the image so that it matches the control point (instead of resizing everything), we are engaged in directing.

If we include enlarged cropped images in srcset, it is not known where they will fit and where not. With picture and source media, we can make our wishes come true: load wide rectangular frames only when the window is wider than 36 em. And in small windows always load square pictures.

Detail of the above quilt, highlighting the embroidery and exotic stitchwork.

The picture element contains any number of source elements and one img. The browser scans all the source images until it finds the media attribute that matches the current environment. It sends srcset of the appropriate source to img, which still remains the element that we "see" on the page.

Here is a simpler example:

A rad wolf.

In windows with landscape orientation in img landscape.jpg moves. In portrait orientation (or if the browser does not support picture) img does not change, and portrait.jpg is loaded.

This behavior may seem a little surprising if you are used to audio and video. Unlike these elements, picture is an invisible cover: a magical span that sets the image to srcset.
Another cropping method: img is not a step back. We are progressively improving img by wrapping it in a picture.
In practice, this means that any styles that we want to apply to our image on the screen need to be adjusted taking into account img, not picture. The picture {width: 100%} code does nothing. The code picture> img {width: 100%} does what we need.

Here is our patchwork quilt page with the template applied. We recall that the purpose of using picture was to provide users with small screens with more (and more useful) pixels, and look at how performance develops:


Not bad! We send a bit more bytes on 1x screens. But for some complex reasons related to the size of our original images, we have actually increased the range of screen sizes that feel a 2x performance increase. Saving at the first stage of page change stopped at 480 pixels for 2 screens, but after our second stage it expanded up to 700 pixels.

Now our page loads faster and looks better on small devices. But we are not done yet.

Third stage: make several formats using source type

Over the 25-year history of the Internet, it was dominated by two raster formats: JPEG and GIF. PNG took ten painful years to join this exclusive club. New formats, such as WebP and JPEG XR, are already on the verge of promising developers superior compression and offering useful features like alpha channels and lossless modes. But due to the lone attribute of src images, implementation is very slow - developers need almost universal format support before they can use it. But not today. picture allows you to easily use several formats, following the same source type model that is installed for audio and video:

RadWolf, Inc.

If the browser supports the type attribute of the source, it will send the srcset of that source to img.
This is a pretty simple example, but when we layered the source type switch over our existing quilt page to, say, add WebP support, things get too complicated (and repetitive):

Detail of the above quilt, highlighting the embroidery and exotic stitchwork.

It turns out too much code for one image. In addition, now we also have a large number of files: as many as 12! Three resolutions, two formats and two types of cropping for each image - this is really a lot. All that we have achieved in terms of performance and functionality is obtained due to a preliminary encounter with difficulties and the further possibility of maintenance.

Automation is your friend; if it’s intended that your page will contain massive blocks of code that link to a large number of different versions of the image, it’s best not to do it all manually.

The same thing with the understanding that there should be little good. I used all the tools from the specifications in our example. It will almost never be reasonable. A huge increase in efficiency can be achieved using any of the new functions separately, and you should carefully consider all the difficulties of their layering before you save and do everything that is necessary and unnecessary.

But still, let's see what WebP can do for our blankets.


An additional 25-30% savings beyond what we have already achieved - not only at the lower end, but across the entire range - this is definitely not a joke! My methodology here is by no means accurate; Your performance with WebP may vary. The bottom line is that new formats that provide significant benefits over the current position of JPEG / GIF / PNG already exist and continue to appear. The picture and source type attributes lower the barrier to access, forever clearing the way for innovation in image formats.

We use size today

Over the years, we knew what weighed down on our responsive pages: images. Huge images created specifically for the huge screens that we sent to everyone. We also knew how to solve this problem: send different sources to different clients. New markup allows us to do just that. srcset makes it possible to offer several versions of the image to the browser, which, using the sizes attribute, selects the most suitable source from the pack and loads it. The picture and source attributes allow us to step in and take on a little more control, ensuring that some sources are selected based on either media queries or file type support.

Together, these features allow us to create responsive, flexible, and responsive images. They allow us to send each of our users a source code created specifically for his device, providing a significant increase in productivity. Armed with excellent polyfillness and an understanding of the future, developers should start using this markup right now!

Also popular now: