How to handle inline images has been a big challenge in responsive web design and we wanted to integrate a solution into our upcoming redesign. Thankfully, there are now solutions available that a majority of browsers support. The image
sizes attribute along with the
<picture> element give developers the ability to deliver the right picture for the visitor’s screen size and resolution. There is even a fallback image for unsupported browsers which makes these approaches perfectly acceptable to begin implementing today. Let us explore how to implement responsive images with
sizes, and the
Srcset and Sizes Attribute
Most of the time, a website will only need to deliver a single image at different resolutions. This is a perfect use case for the image
srcset attribute which can be used alone or in conjunction with the
sizes attribute. The
srcset attribute declares the available source images along with the image’s specific width or resolution. The
sizes attribute declares the width of the rendered image on the page at specific breakpoints. A breakpoint is a media query condition under which the content of the site will change to provide the viewer with the best possible layout. Then the browser can use the
sizes attributes to determine the best source image to download. Let’s look at how to use this.
In our example, begin with the
<img> element. This will contain a source image in the
src attribute that is used as a fallback image for older browsers that don’t support the
srcset attribute. It is good practice to also include alternate text with the
alt attribute for accessibility which describes the content of the image for the disabled. Here is the code.
<img src="balloon-small.jpg" alt="A red balloon">
Next, add the
srcset attribute to let compatible browsers know that there are alternative source images available. Each source image is followed by either the desired pixel density or the image’s width. Then each source image and corresponding pixel density or width value is separated with a comma.
For pixel density, we use the 1x, 2x, 3x nomenclature after the source image for declaring the screen resolution condition at which each image should be downloaded by the browser. The code works like
srcset="[image] [pixel density], [image] [pixel density], etc." and should look similar to the code below.
<img srcset="balloon-small.jpg 1x, balloon-medium.jpg 2x, balloon-large.jpg 3x" src="balloon-small.jpg" alt="A red balloon">
For image width, declare each source image’s width with a w for the pixel width instead of pixel density. Next, add the
sizes attribute after
srcset to tell the browser what the rendered size of the image should be on the page at a specific screen sizes. The
sizes attribute accepts px (pixel), em (relative element), vw (viewport width), % (percent), and calc (calculation) values for the image width. Each media query breakpoint and associated image width are separated by a comma with the default image width last. The
sizes attribute works like
sizes="([media query]) [width], ([media query]) [width], etc., [default width]" and should look similar to the example below.
<img srcset="balloon-small.jpg 200w, balloon-medium 400w, balloon-large.jpg 800w" sizes="(min-width: 60em) 33vw, (min-width: 30em) 50vw, 100w" src="balloon-small.jpg" alt="A red balloon">
<picture> element is used in cases where art direction is important for the image. That is to say, rather than changing only the resolution of an image, the proportions, content, or format of the image will also change based upon the screen size. This is useful in situations where cropping an image on smaller screens to direct focus towards the image’s subject is important. Another example would be to display the best image format that is compatible with the browser (i.e. SVG, PNG, or JPG).
<picture> element, each condition is grouped into a unique
<source> element. Each
<source> contains a media attribute for declaring the media query breakpoint,
srcset for the set of source images available under that condition, and
sizes for declaring the rendered width of the image on the page. Lastly, it is followed by a fallback image for unsupported browsers.
For changing the proportions of an image on smaller screens followed by increasing resolution on high density screens, here is sample code.
<picture> <source media="(min-width: 30em)" srcset="balloon-small.jpg 200w, balloon-medium.jpg 400w, balloon-large.jpg 800w" sizes="50w"> <source srcset="balloon-cropped.jpg 1x, balloon-cropped-large.jpg 2x"> <img src="balloon-small.jpg" alt="A red balloon"> </picture>
Here is sample code for displaying the best image format supported by the browser.
<picture> source type="image/svg" src="logo.svg"> source type="image/png" src="logo.png"> img src="logo.jpg" alt="Company logo"> </picture>
Responsive images are more important than ever due to the enormous variety of device screen sizes and internet connection speeds users have today. By implementing responsive images it is possible to improve page speed and reduce bandwidth for a more enjoyable online viewing experience.