Responsive images

Responsive web design has become the norm for modern websites and web applications, providing a consistent experience across a variety of devices and displays. But, the wide range of devices makes difficult to adapt designs and contents for all those screen sizes and pixel densities, optimizing the display for each device.

More than 60% of a typical page's weight is made up of images, which means optimizing images is extremely important for improving a performance site. Every byte you do not have to transfer to serve your content means a leaner page and faster load times for your readers.

Responsive images allow the web browser to produce a rendering that closely matches the intent of the designer. This improves user experience but it also puts an additional burden on the development and operations teams, who now have to create and deploy numerous image asset variants as well as the default image.

The HTML5 <img> tag provides a number of features that enable the browser to select the most appropriate image if the server provides multiple variants. If the website deploys multiple different sizes of the same image, the web browser can choose the size best suited to its current environment.

The srcset attribute

The srcset attribute of the HTML5 <img> tag is the best way for delivering responsive images. We can use it to specify a number of image asset variants for different pixel densities and viewport sizes - the display space available to the web browser -.

The srcset attribute tells the browser witch images and sizes are available to use. The sizes attribute tells about image sizes for different breakpoints in the CSS.

For example, to define two variants - one for displays with standard pixel density (1x), and a second for displays with double pixel density (2x), such as the iPhone 6 and Retina Macs - we use the srcset attribute and the src attribute to define a default image for browsers that not support that attribute.

<img src="https://abraia.me/images/quarterback.jpg?w=600"
  srcset="https://abraia.me/images/quarterback.jpg?w=600&dpr=1 1x,
          https://abraia.me/images/quarterback.jpg?w=600&dpr=2 2x">

The argument w=600 specifies our width of design while the dpr argument defines the device pixel ratio. All those images do not exist (only the original image is stored) and they are generated and cached on the fly when they are requested.

Using the w and dpr URL parameters, we can simplify the amount of effort it takes to generate the srcset attributes on our images.

A more sophisticated example defines a number of image variants to display, according to the width of the viewport. The sizes attribute specifies that the browser must render the image at 600 pixels width if the viewport is wider than 36em and use the entire viewport otherwise. The browser determines how much space is available for the image, and selects the image asset variant that best fits the available space, typically “rounding up” to the next width (w suffix) and internally resizing the image to fill the space exactly.

Thus, using the sizes attribute, we are targeting two queries for behavior for the images. At a viewport of 36em or above, the images will display at 600 pixels. Below that size, the images will display at the full size of the viewport. At those sizes, the browser will determine which image to load in when the page is rendering for the given target size.

<img src="https://abraia.me/images/racecar.jpg?w=480"
   sizes="(min-width: 36em) 600px, 100vw"
  srcset="https://abraia.me/images/racecar.jpg?w=100 100w,
          https://abraia.me/images/racecar.jpg?w=240 240w,
          https://abraia.me/images/racecar.jpg?w=480 480w,
          https://abraia.me/images/racecar.jpg?w=640 640w">

This approach to delivering responsive images by specifying a range of image asset variants is easy to code and highly effective. However, it presents challenges in terms of creating and managing the image variants themselves. You have to do a great deal of pre‑production image resizing and deploy a much greater number of files on the server. It can be time‑consuming to fine‑tune the optimum number and size of each variant, which then leads to difficulty in testing that each image asset variant is accessible.

Action beach fun leisure

<img src="https://abraia.me/images/action-beach-fun-leisure.jpeg?w=320"
  srcset="https://abraia.me/images/action-beach-fun-leisure.jpeg?w=1920&h=600 1920w,
          https://abraia.me/images/action-beach-fun-leisure.jpeg?w=1024&ar=16:9 1024w,
          https://abraia.me/images/action-beach-fun-leisure.jpeg?w=640&ar=4:3 640w,
          https://abraia.me/images/action-beach-fun-leisure.jpeg?w=320&ar=1:1 320w">

With Abraia you only have to store the original image. Responsive images are instantly generated on-the-fly, making sure they look good and have a small enough footprint to improve the website's performance.