Responsive images for web

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.

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.

Best image sizes for web

Adjusting image size is usually the best measure to optimize performance and cost of any website. You got significant improvement in web KPIs and savings in the CDN bill, just revising and adjusting your image breakpoints.

To optimize the speed of our web, we should be responsive delivering graphic content. We'd ideally deliver an image with a resolution that fits the image display size. Here, we mean the size in real pixels not the virtual size. But to be fast, we also should take advantage of our CDN cache, using a limited amount of well chosen breakpoints. In this regard, on-the-fly image processing is not a good choice in most cases. It incurs in some image processing latency and the uneven allocation of CDN cache doesn't ensure a consistent experience across our users.

The fact is we should analyze the layout of our front-ends and the characteristics of the devices of our users. This enables to draw a proposal of breakpoints. However, with a typical ecommerce layout in mind, we can cover the most frequent uses of images in the web.

Mobile first images

We should start recognizing that mobile is the chief. Not only because of the higher traffic volume generated by mobile devices, but also because of two important reasons. First, the exposition of mobile users to adverse network conditions, which increases the impact of web optimization on their UX. Second, for mobile users the statistics of displaying widths can be fairly estimated, based on device characteristics.

Most smartphones present one of few display resolutions. Navigation in mobile webs is much less flexible compared to dektop. In mobile we don't open browser windows with an arbitrary size. Moreover, mobile layouts are much more repetitive in how they use images, usually full or half width. This makes the displaying size of images much more predictable in mobile compared to desktop.

Mobile display resolutions

If we look at iPhone display sizes, the vast majority feature a resolution of 750x1334, and the X models feature a 1125x2436 display resolution. In a typical layout, images will have full screen or half screen width. So we'll mostly find displaying resolutions of 375, 750, 563, and 1125 pixels width.

For Android, we have a similar situation. Most models have either a HD (720x1280) or a full HD display (1080x1920). That is, most images will be displayed with a width of 360, 720, 540, or 1080 pixels. There are even some models with 2K resolution displays (1440x2960). These models will add some cases that feature a width of 1440 px.

A selection of breakpoints

After considering only mobile devices, we already have 9 likely-to-occur image displaying widths!. As we add more widths to represent the most usual desktop displays, the list will grow even longer. This may challenge our first commitment to keep it simple.

But, do we need all these image sizes as breakpoints?. Not really. Even for a slow 3G network of 2.4Mbps speed, the impact of changing the width between some of the widths will be negligible. For instance, the time to transfer two files with a weight difference of less that 15 KB will differ in less than 50ms, even for such a slow network. That's certainly negligible.

That means we can simplify the list of mobile-related breakpoints joining iPhone and Android cases that are close. For instance, we can choose: 375, 750, 563, 1125, and 1440. Then we may end by adding some usual display sizes for desktop users: 1024, 1280, and 1920.

Of course, if we don't have much iPhone users we may rather stick to Android sizes. As well, we may add larger sizes for zoom images and maybe a smaller one for shopping cart thumbnails. All these tweaks will depend on our layout and our users' devices.

Creation of image derivatives

Different types of workflows to create image derivatives require different types of tools. The good news is that there are many tools out there to deploy an image processing pipeline for the creation of image derivatives. Powerful open source solutions like ImageMagick allow to develop an inhouse pipeline. However, a proper use of these tools comes with some limitations and many hidden costs. Their integration in our workflows still requires knowledge and development and maintenance effort and time.

Fortunately, there are cloud tools that can handle all the image transformations and optimizations required by a general web business. Abraia provides cost-effective solution to easily configure and automate your derivatives generation. It supports different use cases, from cloud to local hot folders for image optimization. We only have to leave our pictures in these online or local hot folders, to have all our image derivatives created.

online batch processing for the creation of web images breakpoints

It also supports very flexible API-based integrations for image optimization available in python, node.js, or php. And even a command-line integration for batch image optimization.

Variants generation and resizing

Resizing images allows to adjust the image size to different viewports and layouts through different devices. But it may be problematic in some cases, presenting artifacts that not best represent the original.

The problem arises because web images are digital representations formed by discrete units of information or pixels. Resizing an image means changing the number of pixels in the image and this needs to be mathematically performed using an interpolation algorithm to recalculate (resample) all the pixel values at the image.

As a result, the resampling process can introduce some kind of artifact depending on the content of the image. In fact, jagged edges are problematic upscaling (enlarge) images, while aliasing artifacts (moiré) are problematic at downsizing (reduce).

Aliasing and blurring

Aliasing is a signal processing effect of resampling that introduces distortion and artifacts. Interpolation algorithms introduce anti-aliasing filtering to avoid moiré artifacts and aliasing distortion in general. This results in a resized image that can become significantly less sharp.

original country image blurring country image
Resizing introduces some blurring in images

Moiré is a type of aliasing artifact that may occur when downsizing images. This shows up in images with fine textures which are near the resolution limit. When these textures are downsized surpassing their resolution new patterns appear, like in the example below, where a new pattern appears that does not correlate with the texture on the wall.

wall resized with anti-aliasing filtering wall with moire patterns artifacts
Moiré artifacts caused by a wrong resizing choice

Interpolation algorithms which preserve the best sharpness are more susceptible to moiré, whereas those which avoid moiré typically produce a softer result. This is unfortunately an unavoidable trade-off in resizing.

One of the best ways to combat resize softening is to apply a follow-up unsharp mask after resizing an image — even if the original had already been sharpened.

This effects introduced by resizing operations makes important to understand how these algorithms perform resampling operations. How they handle throwing away pixels when the image is going to be smaller and how they handle adding pixels when the image is going to be larger.

Resampling methods

Resampling is a way to calculate output pixels taking into account surrounding input pixels. It helps to avoid local geometry distortions, giving well- predictable output quality for a wide range of scaling factors (the ratio of input image dimensions to output image dimensions).

Several interpolation algorithms are available for image resampling, being the most common the non-adaptive methods. Recall that all non-adaptive interpolation algorithms always face a trade-off between three artifacts: aliasing, blurring and edge halos.

Four are the most common algorithms available to resize images:

  • Nearest Neighbor is the most basic algorithm and it only considers the closest pixel to the interpolation point. This has the effect of simply making each pixel bigger when is used upscaling (it is used to preserve a pixelated aspect). It requires the least processing time of all the interpolation algorithms, however it produces heavy aliasing in downsizing.

  • Bilinear interpolation considers a weighted average of the closest 2x2 (4 pixels) surrounding pixel values to arrive at its final interpolated value. For instance, when the size is halved all know pixel distances are equal, the interpolated value is simply their sum divided by four. This results in much smoother looking images than other interpolation algorithms, and it is now rarely used because of its low quality results.

  • Bicubic goes one step beyond bilinear by considering the closest 4x4 neighborhood of known pixels (for a total of 16 pixels). Since these are at various distances from the unknown pixel, closer pixels are given a higher weighting in the calculation. Bicubic produces noticeably sharper images than the previous two methods, and it is the standard resampling algorithm used in Adobe Photoshop.

  • Lanczos is a higher order interpolation algorithm which takes more surrounding pixels into consideration. It retains the most image information after an interpolation, and it is therefore extremely useful when the image requires multiple transformations (rotations / distortions) in separated steps.

paris nearest neighbor paris louvre nearest neighbor Nearest neighbor introduces aliasing
paris bilinear paris louvre bilinear Bilinear interpolation introduces blurring
paris bicubic paris louvre bicubic Bicubic interpolation preserves the image
paris lanczos paris louvre lanczos Lanczos interpolation best preserves the image

The use of each of this options produces big difference with image quality. Lanczos shows the best quality results and is the recomended downsampling algorithm.

Abraia's resizing method

With image resizing, pixels are resampled, somewhat mixing the values of original pixels. In this process, a number of decisions should be taken, like the mixing filter or the treatment of color channels, among other factors. Depending on these decisions, different artifacts may appear from aliasing to blur or more subtle effects like turning off highlights.

We take care of all these decisions and best practices in imaging engineering to provide an optimized image resizing that preserves highlights throughout color channels.

trekking shoes resize comparison
Highlights are preserved with Abraia's resize method

Our image resizer provides best-in-class protection of highlights and detail without any noticeable penalty in terms of aliasing or blurring.

Rsponsive images on the web

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 of the HTML5 <img> tag is the best way for 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 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 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 can easily automate the variants generation from the original image, making sure they look good and have a small enough footprint to improve the website's performance.