Monaen's WikiFull Responsiveness 2017-04-16

Tips

  1. alt attributes should be descriptive for important images, like this body surfer. Because body surfing is important, I guess.
  2. alt attributes should be empty for images that are just decorations, like this boiler image. Do you get the joke? It’s a boiler to represent boiler plate code, which is sometimes empty of content.
  3. alt attributes should be set on every image, just like this pig is set on being so darn cute.

Resources

Responding To Screen Capability & View

Srcset

Examples:

Syntax

  • There are two flavors of srcset, one using x to differentiate between device pixel ratios (DPR), and the other using w to describe the image’s width.
Reacting to Device Pixel Ratio
1
<img src="image_2x.jpg" srcset="image_2x.jpg 2x, image_1x.jpg 1x" alt="a cool image">

Set srcset equal to a comma separated string of filename multiplier pairs, where each multiplier must be an integer followed by an x.

For example, 1x represents 1x displays and 2x represents displays with twice the pixel density, like Apple’s Retina displays.

The browser will download the image that best corresponds to its DPR .

Also, note that there’s a src attribute as a fallback.

Reacting to Image Width
1
<img src="image_200.jpg" srcset="image_200.jpg 200w, image_100.jpg 100w" alt="a cool image">

Set srcset equal to a comma separated string of filename widthDescriptor pairs, where each widthDescriptor is measured in pixels and must be an integer followed by a w. Here, the widthDescriptor gives the natural width of each image file, which enables the browser to choose the most appropriate image to request, depending on viewport size and DPR. (Without the widthDescriptor, the browser cannot know the width of an image without downloading it!)

Also, note that there’s a src attribute as a fallback.

srcset with sizes Syntax

Here’s an example:

1
2
3
4
<img  src="images/great_pic_800.jpg"
      sizes="(max-width: 400px) 100vw, (min-width: 401px) 50vw"
      srcset="images/great_pic_400.jpg 400w, images/great_pic_800.jpg 800w"
      alt="great picture">

sizes consists of comma separated mediaQuery width pairs. sizes tells the browser early in the load process that the image will be displayed at some width when the mediaQuery is hit.

In fact, if sizes is missing, the browser defaults sizes to 100vw, meaning that it expects the image will display at the full viewport width.

sizes gives the browser one more piece of information to ensure that it downloads the right image file based on the eventual display width of the image. Just to be clear, it does not actually resize the image - that’s what CSS does.

Sizes

Examples:

  1. In JavaScript you can get the source of an img element with currentSrc.
  2. The sizes attribute gives the browser information about the display size of an image element – it does not actually cause the image to be resized. That’s done in CSS!

The Picture Element

Example:

Accessibility

The Full Monty

Examples:

Others

Lots of other <picture> use cases, examples and code snippets are available here.

Find out more about responsive images from the Responsive Images Community Group.

▲