Responsive Images

Information, resources and sample implementations of responsive images in HTML and CSS in conjunction with Cloudinary for art direction.

Table of contents

• Responsive images in HTML
  • Device-pixel-ratio-based selection
    • Example 1
  • Viewport-based selection
    • Example 1
    • Example 2
  • Art direction-based selection
    • Example 1
  • Device-pixel-ratio and art-direction-based selection
• Responsive images in CSS
  • Media query-based selection
    • Example 1
  • Image-set-based selection
• Documentation
  • Introduction
  • Prerequisites
  • Web Standards
  • Browser Support
  • Cloudinary
  • General
  • Terminologies
• Mirrors
• Warranty and Liability
• Licenses
• Contribute

Responsive images in HTML

Responsive images in HTML are a method for providing the user agent with multiple image sources for an image slot. The user agent selects an image, depending on display density, size of the image element in the page, or any number of other factors. The following selection methods are available:

Device-pixel-ratio-based selection

Resolution switching for displaying an image with a fixed size while supporting different screen resolutions.

The img element’s sizes and srcset attributes are used in conjunction with the x descriptor.

Use this selection method if the rendered size of the image is fixed (e.g. by height and width attributes on the img element. The images in srcset only vary in their intrinsic width to support different resolutions (image content is identical). This allows for sharp images on high resolution screens.

Example 1

<img 
  alt="bullseye" height="200" width="200"
  src="
    https://res.cloudinary.com/responsive-images/image/upload/c_scale,f_auto,w_200/circle_0_saqntd.jpg"
  srcset="
    https://res.cloudinary.com/responsive-images/image/upload/c_scale,f_auto,w_300/circle_0_saqntd.jpg 1.5x, 
    https://res.cloudinary.com/responsive-images/image/upload/c_scale,f_auto,w_400/circle_0_saqntd.jpg 2x">

See this example: Rendered (github.io), Source (github.com), Source (gitlab.com)

Fallback: User agents which do not support sizes and srcset attributes will ignore them and load the image referenced in the src attribute.

Viewport-based selection

Resolution switching for displaying different sizes of an image.

The img element’s sizes and srcset attributes are used in conjunction with the w descriptor.

The images only vary in their size (image content is identical).

Example 1

<img 
  alt="bullseye"
  sizes="100vw" 
  srcset="
    https://res.cloudinary.com/responsive-images/image/upload/c_scale,f_auto,w_200/circle_0_saqntd.jpg 200w, 
    https://res.cloudinary.com/responsive-images/image/upload/c_scale,f_auto,w_400/circle_0_saqntd.jpg 400w, 
    https://res.cloudinary.com/responsive-images/image/upload/c_scale,f_auto,w_800/circle_0_saqntd.jpg 800w"
  src="
    https://res.cloudinary.com/responsive-images/image/upload/c_scale,f_auto,w_200/circle_0_saqntd.jpg">

See this example: Rendered (github.io), Source (github.com), Source (gitlab.com)

Example 2

<img 
  alt="bullseye"
  sizes="(max-width: 25rem) 100vw, (max-width: 50rem) 50vw, 33vw"
  srcset="
    https://res.cloudinary.com/responsive-images/image/upload/c_scale,f_auto,w_200/circle_0_saqntd.jpg 200w, 
    https://res.cloudinary.com/responsive-images/image/upload/c_scale,f_auto,w_400/circle_0_saqntd.jpg 400w, 
    https://res.cloudinary.com/responsive-images/image/upload/c_scale,f_auto,w_800/circle_0_saqntd.jpg 800w"
  src="
    https://res.cloudinary.com/responsive-images/image/upload/c_scale,f_auto,w_200/circle_0_saqntd.jpg">

See this example: Rendered (github.io), Source (github.com), Source (gitlab.com)

Fallback: User agents which do not support sizes and srcset attributes will ignore them and load the image referenced in the src attribute.

Art direction-based selection

Resolution switching for displaying different image sizes and contents.

The picture elements source element’s media and srcset attributes reference different image sources for the user agent to choose from.

The images may not only vary in their size but also image content may not be identical.

Example 1

<picture>
  <source 
    media="(max-width: 25rem)" 
    srcset="https://res.cloudinary.com/responsive-images/image/upload/c_scale,f_auto,w_100/circle_0_oqxmu3.png">
  <source
    media="(max-width: 50rem)"
    srcset="https://res.cloudinary.com/responsive-images/image/upload/c_scale,f_auto,w_200/circle_0_saqntd.jpg">
  <source
    media="(min-width: 50rem)"
    srcset="https://res.cloudinary.com/responsive-images/image/upload/c_scale,f_auto,w_300/circle_0_saqntd.jpg">
  <img src="https://res.cloudinary.com/responsive-images/image/upload/c_scale,f_auto,w_300/circle_0_saqntd.jpg" alt="bullseye">
</picture>

The rendered size (height and width) of the image varies depending on which of the 3 resources is chosen. Use CSS to inform the user agent which about image dimensions, allows for faster rendering by eliminating the need for unnecessary repaints.

img { 
  width: 300px; 
  height: 300px; 
}
@media (min-width: 50rem) {
  img { 
    height: 300px; 
    width: 300px; 
  } 
}
@media (max-width: 50rem) {
  img { 
    height: 200px; 
    width: 200px; 
  } 
}
@media (max-width: 25rem) { 
  img { 
    background-color: red;
    height: 100px;
    width: 100px; 
  } 
}

See this example: Rendered (github.io), Source (github.com), Source (gitlab.com)

Fallback: User agents which do not support picture and source elements will ignore them and load the image referenced in the img elements src attribute.

Device-pixel-ratio and art-direction-based selection

Resolution switching for displaying different image sizes and contents.

Combination of two selection methods. It uses the source and img element’s srcset attribute with the x descriptor. The images in srcset vary in their intrinsic width to support different resolutions (image content is identical). This allows for sharp images on high resolution screens.

<picture>
  <source 
    media="
      (max-width: 50rem)" 
    srcset="
      https://res.cloudinary.com/responsive-images/image/upload/c_scale,f_auto,w_200/circle_0_saqntd.jpeg,
      https://res.cloudinary.com/responsive-images/image/upload/c_scale,f_auto,w_300/circle_0_saqntd.jpg 1.5x, 
      https://res.cloudinary.com/responsive-images/image/upload/c_scale,f_auto,w_400/circle_0_saqntd.jpg 2x">
  <img 
    src="
      https://res.cloudinary.com/responsive-images/image/upload/c_scale,f_auto,w_200/circle_0_saqntd.jpg" 
    srcset="
      https://res.cloudinary.com/responsive-images/image/upload/c_scale,f_auto,w_300/circle_0_saqntd.jpg 1.5x, 
      https://res.cloudinary.com/responsive-images/image/upload/c_scale,f_auto,w_400/circle_0_saqntd.jpg 2x"
    alt="bullseye">
 </picture>

See this example: Rendered (github.io), Source (github.com), Source (gitlab.com)

Fallback: User agents which do not support picture, source, and srcset elements will ignore them and load the image referenced in the img elements src attribute.

Responsive images in CSS

Responsive images in CSS are a method for providing the the user agent with multiple image sources for an image slot. In some cases, the user agent selects an image, depending on display density, size of the image element in the page, or any number of other factors. The following selection methods are available:

Media query-based selection

Resolution switching for displaying different image sizes and contents.

Responsive images with the help of media queries (@media). The user agent picks the image that matches the media query. The user agent cannot chose from a set of sources to support different screen resolutions.

The images may not only vary in their size but also image content may not be identical.

Example 1

/* Narrow screen*/
@media only screen and (max-width: 25rem) {
  .background {
    background-image: url("https://res.cloudinary.com/responsive-images/image/upload/c_scale,f_auto,w_100/circle_0_saqntd.jpg");
    height: 100px;
    width: 100px;
  }
}
/* Medium screen*/
@media only screen and (min-width: 25rem) and (max-width: 50rem) {
  .background {
    background-image: url("https://res.cloudinary.com/responsive-images/image/upload/c_scale,f_auto,w_200/circle_0_saqntd.jpg");
    height: 200px;
    width: 200px;
  }
}
/* Wide screen*/
@media only screen and (min-width: 50rem) {
  .background {
    background-image: url(
      "https://res.cloudinary.com/responsive-images/image/upload/c_scale,f_auto,w_250/circle_0_saqntd.jpg");
    height: 250px;
    width: 250px;
  }
}

See this example: Rendered (github.io), Source (github.com), Source (gitlab.com)

User agents which do not support @media will ignore the rules.

Image-set-based selection

Resolution switching for displaying an image with a fixed size while supporting different screen resolutions.

Responsive images with the help of the CSS function notation (image-set()). The user agent picks the image that matches the media query and screen resolution.

The image-set() is a working draft of CSS Images Module Level 4.

User agents which do not support image-set() will ignore the rules.

Documentation

Introduction

Introductions to responsive images on the Web:

• https://html.spec.whatwg.org/multipage/images.html#images
• https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images

Prerequisites

The following concepts should be understood:

• https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
• https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units

Web Standards

Web Standards that relate to responsive images on the Web:

• https://html.spec.whatwg.org/multipage/grouping-content.html#the-figure-element
• https://html.spec.whatwg.org/multipage/grouping-content.html#the-figcaption-element
• https://html.spec.whatwg.org/multipage/embedded-content.html#the-picture-element
• https://html.spec.whatwg.org/multipage/embedded-content.html#the-img-element

Browser Support

• https://caniuse.com/picture
• https://caniuse.com/srcset
• https://caniuse.com/css-mediaqueries
• https://caniuse.com/css-image-set

Cloudinary

Links to the Cloudinary documentation, which describe techniques used in this repository:

• https://cloudinary.com/documentation/responsive_images
• https://cloudinary.com/documentation/image_transformations
• https://cloudinary.com/documentation/image_transformation_reference#crop_parameter

General

Links to useful resources:

• https://caniuse.com/
• https://en.wikipedia.org/wiki/Pixel_density

Terminologies

• Art direction
  Images in the srcset show different images suitable for different space allocations.
• CSS pixel
  A measurement unit. CSS pixels are hardware pixels divided by pixel density.
• Device pixel ratio (DPR)
  Ratio between hardware pixels and logical pixels.
• Hardware pixel
  An individual dot of light in the display.
• Intrinsic width
  The real size of an image.
• Physical pixel
  See Hardware pixel.
• Pixel density
  The number of pixels present per inch on a display. The density is measured in Pixels Per Inch (PPI).
• Resolution switching
  All images in the srcset show the same thing but contain different numbers of pixels.
• Software pixel
  See CSS pixel.
• User agent
  Software that acts on behalf of a user, e.g. Web browser.

Mirrors

You can find this repository at:

• GitLab
  https://gitlab.com/jonasjacek/responsive-images
• GitHub
  https://github.com/jonasjacek/responsive-images

Warranty and Liability

Responsive Images is a small, private project. The author makes absolutely no claims and representations to warranties regarding the accuracy or completeness of the information provided. However, you can use the information in this repository AT YOUR OWN RISK.

Licenses

Responsive Images by Jonas Jacek is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License. Permissions beyond the scope of this license may be available upon request.

Atomic size parts of contents were taken from the Mozilla Developer Network (MDN), which is written by Mozilla Contributors. These contents are also licensed under a Creative Commons Attribution-NonCommercial-ShareAlike (CC-BY-SA).

The bullseye icon was created by Martin Kozák, who released the work into the public domain.

Contribute

Found a mistake? Open an issue or send a merge request. Want to help in another way? Contact me.