Accessibility &
Multi-Screen Design

 

Images

Disclaimer

This course is not a W3C course.
Views expressed are my own.


Dies ist kein W3C-Kurs.
Alle Ansichten sind meine Eigenen.

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.

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.

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.

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.

Is the image purely decorative or not intended for the user?

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

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

iPhone 6:  750×1334px @ ~326ppi

iPhone 6 Plus:  

1080×1920px @ ~401ppi

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)

Browser Support

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 2017

✅ Wide Browser Support

➡️ Inconsistent Implementation

➡️ Unfulfilled Opportunities

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

#cos17 Images – Accessibility & Multi-Screen Design

By Eric Eggert

#cos17 Images – Accessibility & Multi-Screen Design

  • 2,210