Images Accessibility & Multi-Screen Design Eric Eggert — Accessibility & Multi-Screen Design – #cos19
Slide 1
Slide 2
Overview → The img element → alt attribute → srcset attribute for Display Density → srcset attribute for Width Descriptions → sizes attribute → The picture element → type attribute
Slide 3
Slide 4
Slide 5
5144×1698px ≧ 11 1024×768px monitors! 410kb
Slide 6
Samsung Galaxy J3 (2017) 720 x 1280 pixels (~294 ppi density) 9.5 phones needed to display the watch image at native resolution.
Slide 7
Two Main Use Cases for Responsive Images (More defined by RICG.)
Slide 8
- Switch Resolution & Density
Slide 9
Slide 10
- Art Direction
Slide 11
Slide 12
Slide 13
Slide 14
Source: Use Cases and Requirements for Standardizing Responsive Images
Slide 15
The img element
Slide 16
<img src=”cat-image.jpg” alt=”Cute cat”>
Slide 17
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 18
WAI Images Tutorial
Slide 19
Image Types → Informative Images → add to the content → Decorative Images → are purely visual → Functional Images → can be interacted with
Slide 20
Informative Image <img src=”phone.png” alt=”Telephone:”> 0123 456 7890 <img src=”fax.png” alt=”Fax:”> 0123 456 7891 Source: https://www.w3.org/WAI/tutorials/images/informative/#images-used-to-label-other-information
Slide 21
Decorative Image <img src=”tropical.jpg” alt=”“> Source: https://www.w3.org/WAI/tutorials/images/decorative/#image-used-for-ambiance-eye-candy
Slide 22
Functional Image <a href=”https://www.w3.org/”> <img src=”w3c.png” alt=”W3C home”> </a> Source: https://www.w3.org/WAI/tutorials/images/functional/#image-used-alone-as-a-linked-logo
Slide 23
Functional Image (2) <a href=”https://www.w3.org/”> <img src=”w3c.png” alt=”“> W3C Home </a> Source: https://www.w3.org/WAI/tutorials/images/functional/#logo-image-within-link-text
Slide 24
Responsive Images Everything starts with an img element
Slide 25
Slide 26
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 27
High Density Images
Slide 28
ppi = pixel per inch
Slide 29
iPhone 1, 3G, 3GS: 320×480px @ ~165ppi
Slide 30
iPhone 4 & 4s: 640×960px @ ~330ppi (=2×)
Slide 31
iPhone 5 & 5s: 640×1136px @ ~330ppi (=2×)
Slide 32
→ iPhone 6, 6s, 7, 8: 750×1334px @ ~326ppi (=2×) → iPhone 6 Plus, 6s Plus, 7 Plus, 8 Plus: 1080×1920px @ ~401ppi (=3×)
Slide 33
srcset
Slide 34
If we take our watch image and base it on a 320px width for 1× resolution, we could 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 35
Best for fixed-width images * but insufficient for flexible images * You remember that flexible images are a core principle of RWD, right?
Slide 36
srcset width descriptors
Slide 37
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 image.
Slide 38
Of course it is not that easy: 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 39
Slide 40
Slide 41
What to do?!
Slide 42
sizes sizes: required when using width descriptors FTW!
Slide 43
We tell the browser how wide the image is in relationship to the viewport (or absolutely).
Slide 44
We also tell the browser when that relationship changes.
Slide 45
<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 46
Media Conditions Subset of media queries: (max-width: 480px) or (min-width: 480px)
Slide 47
Size → Often expressed in viewport width (vw) unit → 1vw is 1% of the width of the viewport (browser window width) → 33vw = 33% of the viewport → Can also be px, em, % → calc() can be used (for example for calculating margins)
Slide 48
Slide 49
Browser Support (Polyfill: Picturefill — Don’t use it unless you have to) Source: Can I use… Support tables for HTML5, CSS3, etc
Slide 50
<picture>
Slide 51
<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 52
attribute = real media query media media attribute is a directive, not a suggestion
Slide 53
Slide 54
<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 55
type attribute This attribute lets you assign different image formats. <picture> <source type=”image/svg+xml” srcset=”logo.svg”> <source type=”image/webp” srcset=”logo.webp”> <img src=”logo.png” alt=”ACME Corp”> </picture>
Slide 56
Summary
Slide 57
For most responsive images: Don’t use picture.
Slide 58
Always use <img src=”…” alt=”…”> for basic support.
Slide 59
Use & sizes to provide resolution and width dependent images. srcset
Slide 60
Remember that picture locks in the choice, the media queries are not negotiable.
Slide 61
<picture>
is for art direction or for using niche image formats
Slide 62
Thanks! Source: Jason Grigsby – Responsive Images 101
