Responsive and Accessible Images

Eric Eggert · AccessU 2018 ·

Eric Eggert

Web Accessibility Specialist @

Knowbility (Assessments, Teaching)

50% W3C Fellow → WAI/EOWG

Overview

  • Definitions
  • The img element
    • alt attribute
    • srcset attribute for Display Density
    • srcset attribute for Width Descriptions
    • sizes attribute
  • The picture element
    • type attribute

Definitions

5144×1698px

>11 1024×768px monitors!

410kb

Blackberry Curve

320×240px @ 164ppi

>113 phones (!sic) needed to display the high res image at full size

Two Main Use Cases

For Responsive Images

(More defined by RICG.)

Resolution &

Density Switching

Art Direction

The img element

<img src="cat-image.jpg" 
     alt="Cute cat">

The alt attribute

The alternative text (alt) describes an image in a way that the purpose or content of the image is clear without seeing the image.

The img element is the base of everything in responsive images

When is it just a simple img?

  • A fixed width, single density web page
  • Small differences in file size
  • Using vector-based images like SVG

High Density Images

ppi = pixel per inch

iPhone 1–3GS:  320×480px @ ~165ppi

iPhone 4/4s:  640×960px @ ~330ppi

2×

iPhone 5/5s:  640×1136px @ ~326ppi

2×

iPhone 6:  750×1334px @ ~326ppi

iPhone 6 Plus:  

1080×1920px @ ~401ppi

3×

2×

srcset

<img srcset="watch.jpg, watch-2X.jpg 2x, 
             watch-3x.jpg 3x, […], watch-16x.jpg 16x">

If we take our watch image and base it on a 320px width for 1x resolution, we’d come up with this:

Best for fixed-width images but insufficient for flexible images*

*You remember that flexible images are a core principle of RWD, right?

srcset

width descriptors

Browser picks the best source?!

The browser determines the width of the image on the page, calculates what size of image is needed and downloads that.

Of course it is not that easy!

Introducing: Prefetching

Browsers fetch images before they know how the website actually looks to make the web faster. Browser use the viewport width.

What to do?!

sizes FTW!

sizes is required

(when using width descriptors)

We tell the browser how wide the image is in relationship to the viewport.

We also tell the browser when that relationship changes.

<img src="cat.jpg" alt="cat"
  srcset="cat-160.jpg 160w, cat-320.jpg 320w, cat-640.jpg 640w, cat-1280.jpg 1280w"
  sizes="(max-width: 480px) 100vw, (max-width: 900px) 33vw, 254px">

Media Conditions

Subset of media queries:

(max-width: 480px) or (min-width: 480px)

Length

Often expressed in viewport width (vw) unit

1vw is 1% of the width of the viewport

33vw = 33% of the viewport

Can also be px, em, %

calc() can be used (for example for calculating margins)

http://www.theguardian.com/international​

Browser Support

http://caniuse.com/srcset​

Polyfill

Picturefill

http://scottjehl.github.io/picturefill/

<picture>
<picture>
  <source media="(min-width: 900px)" 
          srcset="cat-vertical.jpg">
  <source media="(min-width: 750px)" 
          srcset="cat-horizontal.jpg">
  <img src="cat.jpg" alt="cat">
</picture>

Picture wrapper

Media Queries

Multiple Sources

img required

media attribute = media query

media attribute is a directive, not a suggestion

In the wild:

<picture>
  <source srcset="homepage-person@desktop.png, 
                  homepage-person@desktop-2x.png 2x"       
          media="(min-width: 990px)">
  <source srcset="homepage-person@tablet.png, 
                  homepage-person@tablet-2x.png 2x" 
          media="(min-width: 750px)">
  <img srcset="homepage-person@mobile.png, 
               homepage-person@mobile-2x.png 2x" 
       alt="Shopify Merchant, Corrine Anestopoulos">
</picture>

When the image was variable width instead of fixed width, width descriptors and sizes could have been used as well.

type

This attribute lets you assign different image formats.

Image Formats

  • “Traditional”
    • PNG
    • GIF
    • JPG
  • “Advanced”
    • SVG
    • WebP
    • JPEG2000
<picture>
  <source type="image/svg+xml" 
          srcset="logo.xml">
  <source type="image/webp" 
          srcset="logo.webp"> 
  <img src="logo.png" alt="ACME Corp">
</picture>

Unless art direction, no media

JPEG 2000 JPEG-XR PNG WEBP
320×240 2K 22.6K 55.2K 112.1K
600×450 13.5K 48.5K 14.3K 26.6K
1024×768 19.2K 95.7K 325.7K 56K

Picturefill

(again)

IE9
D’oh!!

Doesn’t understand source elements unless in a video element.

<picture>
	<!--[if IE 9]><video style="display: none;"><![endif]-->
	<source srcset="extralarge.jpg" media="(min-width: 1000px)">
	<source srcset="large.jpg" media="(min-width: 800px)">
	<!--[if IE 9]></video><![endif]-->
	<img srcset="medium.jpg" alt="A giant stone face at 
                                      The Bayon temple in Angkor Thom, Cambodia">
</picture>

Summary

For most responsive images:
Don’t use picture.

Use

<img src="…" alt="…">

for basic support.

Use srcset & sizes to provide resolution and width dependent images.

Remember that picture fixates the choice, the media queries are not negotiable.

picture is for the art direction use case or if you’re in the situation that a new image format isn’t supported.*

 

 

* And you still want to use it because it has other advantages

We need to get this right!

Don’t break the web!

State 2018

✅ Wide Browser Support

➡️ Inconsistent Implementation

➡️ Unfulfilled Opportunities

❌ Open Issues: image-set in CSS, responsive images in SVG, client hints 

 

Source: Jason Grigsby – Responsive Images 101

Thank You

Eric Eggert

Knowbility, yatil.net, @yatil

 

https://slides.com/yatil/2018-accessu-images

Made with Slides.com