📖 Responsive Images

One of the easiest ways to make an image responsive is to set the width and max-width attributes to control the size of the image. The max-width should be set to the size of the image as close to the largest expected size it will need to be. This will be close to the actual width of the image for good image optimization. Then set the width property using a responsive unit to shrink the image as the viewport shrinks. I recommend using vw as the responsive unit. It represents a percentage of the viewport width. A setting of max-width: 200px; and width: 25vw; would limit the size of the image to 200px and shrink it as a percentage of the viewport width as the viewport size changes.

This method will make the images shrink and grow with the viewport, but will not guarantee they will look good or that we will optimize the size of the image for the device using it. What we really need is a way to deliver different images for different viewport sizes and different images for different display resolutions. This is where the srcset attribute comes in.

scrset

A more advanced way of managing responsive images is to use the srcset attribute. The srcset attribute provides images tailored to the user's viewing environment (screen dimensions, network speed, resolution, user preferences). Using responsive images is a good way to improve image clarity and page load times. Multiple copies of the images must be saved to the server with different size and/or resolutions for this to be effective.

  • allows you to specify different image options for different screen characteristics
  • include srcfor browsers that don't recognize the srcset attribute
  • separate each option with a comma and add either an x-descriptor or w-descriptor
  • sizes attribute tells the browser how large the image should be within the layout so the browser can determine the correct image to download based on veiwport size and display pixel density.
  • x-descriptors are based on screen resolution, not screen dimensions: 1x, 2x, 3x etc.
  • w-descriptors are based on the viewportwidth and specify the actual width of the image: 480w specifies an image that is 480 pixels wide
  • vw-descriptors should be used in conjunction with the sizes attribute which specifies the percentage of the screen width that the image will take up: sizes="100vw" means it uses the full-width, sizes="50vw" means it only uses 50% of the width of the screen.

Examples

x-descriptor
<img src="myImage.jpg" srcset="myImage2.jpg 2x, myImage3.jpg 3x">
w-descriptor
<img src="myImage.jpg" srcset="myImage-480.jpg 480w, myImage-720.jpg 720w, myImage-1080.jpg 1080w">

vw-descriptor
<img src="myImage.jpg" srcset="myImage-480.jpg 480w, myImage-720.jpg 720w, myImage-1080.jpg 1080w" sizes="50vw">

The < picture > Element

The picture element is used to offer different images for different screen sizes or devices. It allows the inclusion of multiple images and options for the browser to use. Developers can provide different sizes, resolutions or even different image types. Developers can include a media query to tell the browser when to switch to the different images. The browser will select the first image that it can display with the best fit for the application.

It's important to include an img element as the last child element of the picture tag so browsers that do not recognize the picture element will have an image element to display. The example below shows code that provides the browser multiple choices for browser window size, display pixel density and layout breakpoints.

Example

<picture>
  <source srcset="images/large.jpg 1920w, images/large-hi-dpi.jpg 3840w" media="(min-width: 1380px)">
  <source srcset="images/medium.jpg 1380w, images/medium-hi-dpi.jpg 2760w" media="(min-width: 990px)">
  <source srcset="images/small.jpg 990w, images/small-hi-dpi.jpg 1980w" media="(min-width: 640px)">
  <img srcset="images/smaller.jpg 640w, images/smaller-hi-dpi.jpg 1280w" alt="Sample images">
</picture>

As you can see, supporting a method like this would take a comprehensive preparation of available images with different sizes and resolutions.

For more information on responsive images, Css-Tricks has an in-depth discussion on how to incorporate responsive images.