1 of 14

Responsive Images

Progressive Web Apps

2 of 14

Images are important

Progressive Web Apps

3 of 14

What are responsive images?

A method for providing the browser with multiple image sources depending on display density, size of the image element in the page, or any number of other factors. �-- Jason Grigsby

Progressive Web Apps

4 of 14

What can we do with responsive images?

Resolution
Display size
Format support
Art direction

Live Demo

Progressive Web Apps

5 of 14

General principles for performance

Avoid images wherever possible
Use vector formats where possible: SVG or icon fonts
Use the lowest possible resolution and quality
Use the right format for the image type: WebP, PNG, JPEG

Progressive Web Apps

Before we jump into specifics we’ll take a bird’s eye view of how to use responsive images.

The goal here is to increase performance.

Avoid using images wherever possible. Before using an image, ask yourself whether the image is really necessary or useful. Maybe the same effect could be achieved with simple text and CSS. We can now do gradients and rounded corners and blended backgrounds directly with CSS rather than using images to accomplish the same effect.
Depending on the purpose and the type of image it may be better to use vector graphic formats instead of raster images like PNG, WebP, JPG or GIF. Vector graphics are usually smaller and easier to compress. Again, depending on the purpose, you may want to use icon fonts instead of raster graphics; there are some arguments against icon fonts, but they are beyond the scope of this presentation.
It makes no sense to send a 1MB image to a mobile device… it’s important to use the lowest resolution and quality for each device you’re trying to target.
Different image formats are better for different things:

GIF images are better for animations and images with a limited color palette (256 colors). You can also make animated GIFs
JPG images are better for photographies. Does not support transparencies
PNG images take the best of JPG and GIF. It supports same colors as JPG and also support transparencies like GIF
WebP images are generally smaller than equivalent JPG or PNG images. It also supports animations and some people have considered a replacement for animated GIFs

Which format you use will depend on your needs. As we’ll discuss later we can have multiple formats in the same image delivered depending on browser support or the current size of the content.

6 of 14

Responsive image elements & attributes

<picture>
<source>
srcset
sizes

Progressive Web Apps

7 of 14

The <picture> element

</picture>

Progressive Web Apps

8 of 14

Art direction

</picture>

Live Demo

Progressive Web Apps

9 of 14

The srcset attribute

Progressive Web Apps

In the previous example we used the srcset attribute to describe the images to load when a media query was triggered in a source element.

In this example we use srcset in an img element to handle different pixel densities.

If the display is a standard resolution display then we’ll use the 1x image, if the monitor is a 2x high DPI screen we’ll use. If the browser can’t understand the srcset attribute then it will use the regular src attribute and load our 1x image.

Using the x descriptor, you’ll always get the same image on the devices with similar device-pixel ratio, regardless if it’s a 15 inch laptop or a cell phone which have the same device-pixel ratio.

Note that use of the alt attribute. We will not cover accessibility in this course — but the alt attribute is fundamental for those using screen readers, or for users with images turned off.

10 of 14

The width descriptor

<img src="small.jpg" alt="Wallaby"� srcset="small.jpg 500w, med.jpg 1000w,

large.jpg 1500w">

Progressive Web Apps

11 of 14

Responsive images: what size?

Progressive Web Apps

12 of 14

All together

</picture>

Progressive Web Apps

13 of 14

Resources

Progressive Web Apps

14 of 14

Lab Overview

Take a non-responsive site containing images and make it responsive
Use the srcset attribute and width descriptors
Use the sizes attribute
Use media queries to resize images based on window size
Use the picture and source elements for art direction

Progressive Web Apps