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.
<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
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 -.
srcsetattribute tells the browser witch images and sizes are available to use. The
sizesattribute 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
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">
w=600 specifies our width of design while the
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.
dprURL parameters, we can simplify the amount of effort it takes to generate the
srcsetattributes 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.
<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.