Accessibility & Multi-Screen Design: Images

A presentation at #cos18 in June 2019 in by Eric Eggert

Slide 1

Slide 1

Accessibility & Multi-Screen Design Images Eric Eggert — Accessibility & Multi-Screen Design – #cos18

Slide 2

Slide 2

Disclaimer This course is not a W3C course. Views expressed are my own. Dies ist kein W3C-Kurs. Alle Ansichten sind meine Eigenen.

Slide 3

Slide 3

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

Slide 4

Slide 4

Definitions

Slide 5

Slide 5

Slide 6

Slide 6

Slide 7

Slide 7

5144×1698px ≧ 11 1024×768px monitors! 410kb

Slide 8

Slide 8

Samsung Galaxy J3 (2017) 720 x 1280 pixels (~294 ppi density) 9.5 phones needed to display the watch image at native resolution.

Slide 9

Slide 9

Two Main Use Cases for Responsive Images (More defined by RICG.)

Slide 10

Slide 10

  1. Switch Resolution & Density

Slide 11

Slide 11

Slide 12

Slide 12

  1. Art Direction

Slide 13

Slide 13

Slide 14

Slide 14

Slide 15

Slide 15

Slide 16

Slide 16

Source: Use Cases and Requirements for Standardizing Responsive Images

Slide 17

Slide 17

The img element

Slide 18

Slide 18

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

Slide 19

Slide 19

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.

Slide 20

Slide 20

WAI Images Tutorial

Slide 21

Slide 21

Does the image contain text? ๏ Yes: ๏ … and the text in the image is also present as real text nearby. Use an empty alt attribute. See Decorative Images. ๏ … and the text is only shown for visual effects. Use an empty alt attribute. See Decorative Images. ๏ … and the text in the image is not present otherwise. Use the alt attribute to include the text of the image. See Images of Text. ๏ No: Continue.

Slide 22

Slide 22

Is the image used in a link or a button, and would it be hard or impossible to understand what the link or the button does, if the image wasn’t there? ๏ Yes: ๏ Use the alt attribute to communicate the destination of the link or action taken. See Functional Images. ๏ No: Continue.

Slide 23

Slide 23

Does the image contribute meaning to the current page or context? ๏ Yes: ๏ … and it’s a simple graphic or photograph. Use a brief description of the image in a way that conveys that meaning in the alt attribute. See Informative Images. ๏ … and it’s a graph or complex piece of information. Include the information contained in the image elsewhere on the page. See Complex Images. ๏ … and it shows content that is redundant to real text nearby. Use an empty alt attribute. See Functional Images. ๏ No: Continue.

Slide 24

Slide 24

Is the image purely decorative or not intended for the user? ๏ Yes: ๏ Use an empty alt attribute. See Decorative Images. ๏ No: ๏ End of tree.

Slide 25

Slide 25

Everything starts with an img element in responsive images.

Slide 26

Slide 26

Slide 27

Slide 27

When is it just a simple img element? ๏ A fixed width, single density web page ๏ Small differences in file size ๏ Using vector-based images like SVG

Slide 28

Slide 28

High Density Images

Slide 29

Slide 29

ppi = pixel per inch

Slide 30

Slide 30

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

Slide 31

Slide 31

iPhone 4 & 4s: 640×960px @ ~330ppi (=2×)

Slide 32

Slide 32

iPhone 5 & 5s: 640×1136px @ ~330ppi (=2×)

Slide 33

Slide 33

๏ iPhone 6, 6s, 7, 8: 750×1334px @ ~326ppi (=2×) ๏ iPhone 6 Plus, 6s Plus, 7 Plus, 8 Plus: 1080×1920px @ ~401ppi (=3×)

Slide 34

Slide 34

srcset

Slide 35

Slide 35

If we take our watch image and base it on a 320px width for 1x resolution, we’d come up with this: <img srcset=”watch.jpg, watch-2x.jpg watch-3x.jpg watch-4x.jpg watch-5x.jpg watch-6x.jpg watch-7x.jpg watch-8x.jpg watch-9x.jpg watch-10x.jpg watch-11x.jpg watch-12x.jpg watch-13x.jpg watch-14x.jpg watch-15x.jpg watch-16x.jpg 2x, 3x, 4x, 5x, 6x, 7x, 8x, 9x, 10x, 11x, 12x, 13x, 14x, 15x, 16x”>

Slide 36

Slide 36

Best for fixed-width images but insufficient for flexible images* *You remember that flexible images are a core principle of RWD, right?

Slide 37

Slide 37

srcset width descriptors

Slide 38

Slide 38

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.

Slide 39

Slide 39

Of course it is not that easy!

Slide 40

Slide 40

Introducing: Prefetching ๏ Browsers fetch images before they know how the website actually looks to make the web faster. ๏ They fetch images before the CSS is loaded. ๏ So initially, every image is as wide as the viewport.

Slide 41

Slide 41

Slide 42

Slide 42

Slide 43

Slide 43

Slide 44

Slide 44

What to do?!

Slide 45

Slide 45

sizes FTW!

Slide 46

Slide 46

sizes is required (when using width descriptors)

Slide 47

Slide 47

Slide 48

Slide 48

We tell the browser how wide the image is in relationship to the viewport (or absolutely).

Slide 49

Slide 49

We also tell the browser when that relationship changes.

Slide 50

Slide 50

<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, 300px”>

Slide 51

Slide 51

Media Conditions Subset of media queries: (max-width: 480px) or (min-width: 480px)

Slide 52

Slide 52

Size ๏ 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)

Slide 53

Slide 53

Slide 54

Slide 54

Browser Support Source: Can I use… Support tables for HTML5, CSS3, etc

Slide 55

Slide 55

Polyfill: Picturefill Don’t use it unless you have to

Slide 56

Slide 56

<picture>

Slide 57

Slide 57

<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 Container Element ๏ Multiple Sources with media queries ๏ Srcset support ๏ Fallback <img> element (required)

Slide 58

Slide 58

media attribute = real media query media attribute is a directive, not a suggestion

Slide 59

Slide 59

Slide 60

Slide 60

<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.

Slide 61

Slide 61

type attribute This attribute lets you assign different image formats.

Slide 62

Slide 62

Image Formats ๏ “Traditional”: PNG, GIF, JPG ๏ “Advanced” ๏ SVG ๏ WebP ๏ JPEG2000 ๏ HEIC

Slide 63

Slide 63

<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 attribute needed.

Slide 64

Slide 64

Slide 65

Slide 65

Size JPEG 2000 JPEG-XR PNG WebP 320×240 2.0kB 22.6kB 55.2kB 112.1kB 600×450 13.5kB 48.5kB 14.3kB 26.6kB 1024×768 19.2kB 95.7kB 325.7kB 56.0kB

Slide 66

Slide 66

Source: Can I use… Support tables for HTML5, CSS3, etc

Slide 67

Slide 67

Polyfill: Picturefill Don’t use it unless you have to

Slide 68

Slide 68

Summary

Slide 69

Slide 69

For most responsive images: Don’t use picture.

Slide 70

Slide 70

Always use <img src=”…” alt=”…”> for basic support.

Slide 71

Slide 71

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

Slide 72

Slide 72

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

Slide 73

Slide 73

<picture> is for art direction or for using niche image formats

Slide 74

Slide 74

State 2019 ๏ ๏ ❌ ✅ Wide Browser Support Open Issues: image-set in CSS, responsive images in SVG, client hints

Slide 75

Slide 75

Source: Jason Grigsby – Responsive Images 101

Slide 76

Slide 76

Thanks!