Statista recently published a report showing that mobile devices, excluding tablets, accounted for nearly 57% of web page views worldwide. Images are the number one obstacle to serving truly responsive and performant web pages and applications. Images are among the most crucial pieces of content on the web but unfortunately can come with big performance hits accounting for more than 60% of page size in bytes. Displaying large, bloated images on screen sizes significantly smaller than their desktop counterparts results in wasted bandwidth and significant performance penalties. Instead, we should implement solutions where users efficiently receive the best quality images based on their device.
Before discussing how to make images responsive, we need to define what a responsive image is. A responsive image is an image that adjusts to changes in screen resolution. In the early days of the web, desktops and laptops were the only devices, and browser engineers did not need to write specifications accounting for high DPI devices — branded “Retina” by Apple — and small-screen mobile phones. Delivering crisp images contributes towards a great user experience. Images free of artifacts are crucial for retail sites where users expect to see high-resolution, close-up pictures before purchasing products.
There are two primary use cases for responsive images: 1) providing the same image in multiple resolutions, so high-DPI devices receive the optimal image for a given resolution, and 2) serving different images to devices based on art direction choices.
The <img> element and src attribute is all that is required to serve a single image to a browser, for example:
<img src="/images/married-couple.jpg" alt="married couple standing in front of gazebo">The problem with using only the <img> element is that every device will receive the same image, regardless of resolution or screen size. While we could use CSS to make the image responsive, this would lead to devices receiving unnecessary data slowing performance, and increasing page size. The HTML specifications introduced new elements and attributes tailored to meet the multi-device demands of a responsive web. The srcset and sizes attributes extend the element by providing the browser a list of available images sources that are only delivered if the device meets certain conditions.
Serve different resolution images to high-DPI devices
This method is suited for images with a fixed size in terms of CSS pixels but adapting to high-density screens. These images occupy the same amount of screen space on the page regardless of screen size. The srcset attribute allows you to serve different resolution, visually identical images to browsers depending on the device’s characteristics, such as pixel density. Pixel density is well-supported by most browsers and should be the only device condition used for maximum compatibility.
The easiest solution is to use two versions of every image; one for 1x density screens such as HD/1080p desktop monitors or low-end laptops, and one for 2x high-dpi screens used by all mobile phones and high-end laptops.
The HTML specifications body implemented the srcset attribute providing developers with a way of serving different resolution images to specific browsers or devices, for example:
<img srcset="/images/married-couple-standard.jpg 1x,
/images/married-couple-highres.jpg 2x"
src="/images/married-couple-standard.jpg"
alt="married couple holding hands">srcset defines the image sets the browser will choose between and x-descriptors stating the pixel density that file is intended for. The srcset attribute in this example is composed of two parts separated by a space:
- the source image file
- the image’s display pixel density
Source (src) is the default image served and should always be the smallest file size.
The srcset specification allows us to deliver 3x, even 4x resolution images; however, the jump from 2x to 3x is visually insignificant to most users, but 3x files are two times larger than 2x files. Use srcset for pixel-based formats such as JPEG, PNG, and WebP. For vector-based images, stick with SVG images.
Providing alternate images for art direction
In responsive web design, designers and content editors like to have the artistic freedom to change an image to target a particular viewport size. Often, images, especially banner header images, take up excessive screen height on mobile devices. Narrow-width mobile browsers will shrink down images to fit the browser’s viewport, often causing salient features of the picture to lose detail. An improvement would be to display variant versions of the images when viewed on different devices. For example, a cropped image focusing on a couple’s face, instead of an extended body shot where the couple is tiny and hard to see, could be displayed on a mobile phone.
The <picture> element provides a solution for delivering multiple versions of an image based on different characteristics, such as device size or orientation. Unlike the srcset attribute, the <picture> element provides rules that the browser must respect. By using media queries, developers can control what conditions must be present before delivering those images to the user.
<picture>
<source media="(min-width: 770px)" srcset="couple-zoomed-out.jpg">
<source media="(min-width: 480px)" srcset="couple-zoomed-in.jpg">
<img src="couple-headshot.jpg" alt="a close-up headshot of the couple">
</picture>The media attribute contains source media queries the browser tests against and will display the referenced image, evaluating the conditions in the listed order. As with the DPI example, you must provide the <picture> tag and src attribute before the closing element; otherwise, no images will appear in legacy browsers.
Note: srcset and <picture> are all supported in modern desktop and mobile browsers (including Microsoft’s Edge browser, although not Internet Explorer.) Older browsers will serve the image referenced in the src attribute.
Use CSS for background images
The CSS background property, combined with media queries, is ideally suited to serve different images, depending on browser conditions such as screen resolution or viewport size. Media queries are typically used in responsive design to create different layouts based on the viewport’s size. But these conditional statements also provide designers the ability to control art direction and load images conditionally. In the following example, when the device pixel ratio is 144 dpi, 2x for Safari and Android browsers, load the referenced high-resolution image.
.hero {
background-image: url(gardens.jpg);
}
@media
(min-resolution: 144dpi),
(-webkit-min-device-pixel-ratio: 2) {
.hero {
background-image: url(gardens.highres.jpg);
}
}We can also use min-width to display alternative background images for art direction by specifying minimum or maximum viewport sizes. In the following example, we will only load a background image on laptops or large screen sizes:
@media (min-width: 770px) {
body {
background-image: url(bg.png);
}
}The browser will not download the image for devices where the viewport is below 770px, saving valuable bandwidth for these typically network-restricted devices.
In conclusion, the expanded image attributes allow developers to match images sources to particular devices, avoiding unnecessary delays in page load times and wasting user bandwidth. By providing a default image, this responsive image solution degrades gracefully on legacy browsers and allows developers to include content that is accessible to assistive technologies. Combining these image attributes with opting for SVG and CSS media queries, we have the built-in tools necessary to deliver high-performance websites without sacrificing user experience or editorial decisions.