Accessibility & Multi-Screen Design: Images

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

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

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

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

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

Switch Resolution & Density

Art Direction

Source: Use Cases and Requirements for Standardizing Responsive Images

The img element

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.

WAI Images Tutorial

Image Types → Informative Images → add to the content → Decorative Images → are purely visual → Functional Images → can be interacted with

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

Decorative Image <img src=”tropical.jpg” alt=”“> Source: https://www.w3.org/WAI/tutorials/images/decorative/#image-used-for-ambiance-eye-candy

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

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

Responsive Images Everything starts with an img element

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

High Density Images

ppi = pixel per inch

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

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

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

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

srcset

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

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

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.

What to do?!

sizes sizes: required when using width descriptors FTW!

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

We also tell the browser when that relationship changes.

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

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)

Browser Support (Polyfill: Picturefill — Don’t use it unless you have to) Source: Can I use… Support tables for HTML5, CSS3, etc

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

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

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

Summary

For most responsive images: Don’t use picture.

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

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

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

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

Thanks! Source: Jason Grigsby – Responsive Images 101