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
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.
-
… and the text in the image is also present as real text nearby.
Use an empty
-
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.
- Use the
-
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.
- … and it’s a simple graphic or photograph.Use a brief description of the image in a way that conveys that meaning in the
-
No:
- Continue.
Is the image purely decorative or not intended for the user?
-
Yes:
- Use an empty
alt
attribute. See Decorative Images.
- Use an empty
-
No:
- End of tree.
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)
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
fin!
#cos17 Images – Accessibility & Multi-Screen Design
By Eric Eggert
#cos17 Images – Accessibility & Multi-Screen Design
- 2,210