The web is growing. Fast.

• Average web page is now 3MB (July 2017)
• Average web page in November 2011 was 1MB
• Almost 60% is attributed to image files

In a word of responsive design, we're serving files sizes way bigger than necessary:

• Pixelated for some or slow for all?
  • Designers choosing to serve highest resolution screen possible
• A lot of that data is simply wasted
  • Pages slow to load on mobile data connections
  • Data costs people money

Designers have been tackling the issue of responsive images ever since Ethan Marcotte introduced Responsive Design in 2010

• Images are stubborn: size, format, crop, single src
• What is the most efficient approach?

srcset and sizes attributes give developers greater flexibility in specifying image sources.

srcset and sizes attributes on an <img> element provide information that the browser can use to make an informed decision about what image is most appropriate for the user.

Basic implementation of srcset with options for display density (retina devices):

x descriptor in the srcset attribute is used to define the device-pixel ratio.

Using the x descriptor, the same image will be served on devices with a similar device-pixel ratio.

But what if we want a different size image on larger or smaller viewports?

Enter the w descriptor and sizes attribute.

Example implementation of w descriptor in srcset:

If you want a different size image on different screen sizes, this is where the sizes attribute comes in.

Example implementation of sizes attribute:

If viewport is less than 40em, the image is as wide as the viewport, otherwise image is half the viewport (50vw).

For most cases, using srcset and sizes on an <img> element is maybe all you really need.

But what if you want to change the art direction?

<picture> allows us to instruct the browser to use specific images via media queries

• useful for changing focal point of an image at different breakpoints

<picture> consists of:

• One or more <source> tags
  • each can possess upto four attributes
    • srcset (required), media, sizes, type (optional)
• Fallback <img> element

Example of <picture> implementation using srcset and media attributes with <img> fallback:

<picture> has good browser support, except for... you guessed it ;)

A responsive image polyfill for <picture>, srcset, sizes

https://github.com/scottjehl/picturefill

Great news is that Responsive Image module includes Picturefill out the box.

Setting up responsive images in Drupal 8:

1. Enable Responsive Image and Breakpoint modules

2. Set up breakpoints in your theme's breakpoints.yml

3. Create your image styles

4. Create your responsive image style

5. Change image formatter in your content type

Responsive Image

The Responsive Image module in Drupal 8 provides an image formatter and breakpoint mappings to output responsive images using the HTML5 picture tag.

Breakpoint

The Breakpoint module standardizes the use of breakpoints, and enables modules and themes to expose or use each others' breakpoints.

Example (bartik.breakpoints.yml)

Add in your multipliers e.g. 2x

Blazy module provides integration with bLazy, a lightweight pure JS script for lazy loading images

• faster page load times
• saves data usage if user doesn't browse whole page
• supports lazy loading core Image
• supports lazy loading core Responsive Image
• lightweight, less than 1.4KB

Setting up Blazy in Drupal 8:

1. Go to "/admin/config/media/blazy" to manage few global options, including enabling support for lazy loading core Responsive Image
    
2. Go to Manage display page, e.g.:
   /admin/structure/types/manage/page/display
   Find "Blazy" formatter under "Manage display"