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?

• Yes:
  • Use an empty alt attribute. See Decorative Images.
• No:
  • End of tree.

The img element is the basis of everything 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

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

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!