Responsive Images in the wild

class: center, middle

# **Responsive Images:** Lessons Learned

.small[[CASCADE BOS meet up @Bocoup](http://www.meetup.com/cascadebos/events/225309830/) | September 22, 2015]

by Daigo Fujiwara | [daigofuji.github.io/responsive-images](http://daigofuji.github.io/responsive-images/#1)

---
class: center, middle

## Daigo Fujiwara
Front-end Web Developer, Harvard Business Review

Follow along: [daigofuji.github.io/responsive-images](http://daigofuji.github.io/responsive-images/#1)
---
class: center, middle, inverse

# Responsive Web Design

Redesign of hbr.org in November 2014

---
class: center, middle, big-img, gray

![img](img/am-i-responsive.png)

---
class: center, middle

## Not a new idea

---
class: center, middle, big-img, white

[![img](img/rwd.png)](http://alistapart.com/article/responsive-web-design)

---
class: center, middle

Media Query
```css
@media (min-width:500px) { ... }
```
Flexible Images
```css
img { max-width: 100%; }
```
and Fluid Grids

---
class: center, middle

# **PREMIUM**

---
class: center, middle

(What we thought)
#Premium = **High Resolution**

---
class: center, middle, big-img, gray 
![Example of article page](img/magazine.jpg)

---
class: center, middle, big-img, white 
![Example of article page](img/article1.jpg)

---
class: center, middle, big-img, gray 
![Example of article page](img/article-responsive.jpg)

---
class: center, middle, big-img, gray 
![Example of article page](img/article-source.jpg)

---
class: center, middle, big-img, white

![img](img/bite-chew.gif)

.small["bite off more than one can chew"]

---
class: center, middle

#Premium = **RIGHT Resolution**

---
class: center, middle, inverse

# Tools and references

---
class: center, middle, white

![img](img/webpagetest.png)

[WebpageTest.org](http://www.webpagetest.org/)

---
class: center, middle, white

![img](img/googleinsights.png)

[Google Page Insights](https://developers.google.com/speed/pagespeed/insights/)

---
class: center, middle, white

![img](img/article-tmi.png)

[**Too Much Images**](https://github.com/addyosmani/tmi) (tmi for short) by [Addy Osmani](https://addyosmani.com/)

---
class: center, middle, white

![img](img/httparchive.png)

[**HTTP Archive's Stats**](http://httparchive.org/interesting.php)

---
class: center, middle, white 
![img](img/browserdiet.png)

[**BrowserDiet.com**](http://browserdiet.com/en/) Community-driven performance guide

---
class: center, middle, inverse

# Responsive Images

---
class: center, middle, white

[![img](img/ricg.png)](http://responsiveimages.org/)

RICG (Responsive Issues Community Group) and Mat "Wilto" Marquis to the rescue.

![img](img/wiltowithit.gif)

---
class: middle

### Examples
- media query
- `srcset` attribute
- `srcset` and `sizes` attributes
- `picture` tag

---
class: center, middle, inverse

# Media Query

```css
@media (min-width:500px) { ... }
```
---
class: center, middle, white

![img](img/media-caniuse.png)

---
class: middle

### Demo

- [examples/mediaquery.html](http://daigofuji.github.io/responsive-images/examples/mediaquery.html)
- [bit.ly/1Kxiflb](http://bit.ly/1Kxiflb)
- [Test using ish](http://bradfrost.com/demo/ish/?url=http%3A%2F%2Fdaigofuji.github.io%2Fresponsive-images%2Fexamples%2Fmediaquery.html)
- [view source on github](https://github.com/daigofuji/responsive-images/blob/gh-pages/examples/mediaquery.html)

---
class: center, middle, inverse

# srcset

```html
<img srcset="" src="" alt="">
```

---
class: center, middle, white

![img](img/srcset-caniuse.png)

---
class: center, middle
```html
<img srcset="" src="" alt="">
```

### Web Hypertext Application Technology Working Group’s (WHATWG) [Living Standard](https://html.spec.whatwg.org/multipage/embedded-content.html)

---
class: middle

```html
<img srcset="" src="" alt="">
```
An `img` element represents an image.

The image referenced by the `src` and `srcset` attributes is the content to be embedded.

The `srcset` attribute details the image candidates, from which the User Agent can select the most suitable image.

---
class: middle

Example **Retina Display image swap**

```html
<img 
 srcset="http://placehold.it/100x100/ff0000 1x, 
 http://placehold.it/200x200/0000ff 2x"
 src="http://placehold.it/100x100" 
 width="100" height="100" alt="alt text">
```

- If your browser does not support srcset, you will see gray (default) 100x100
- If srcset is supported but is not retina, red 100x100
- If srcset is supported and is retina, blue 200x200

---
class: middle

### Demo 
- [examples/srcset.html](http://daigofuji.github.io/responsive-images/examples/srcset.html)
- [bit.ly/1FrQYU9](http://bit.ly/1FrQYU9)
- [view source on github](https://github.com/daigofuji/responsive-images/blob/gh-pages/examples/srcset.html)

What to expect:
- If your browser does not support srcset, you will see gray (default) 100x100
- If srcset is supported but is not retina, red 100x100
- If srcset is supported and is retina, blue 200x200

---
class: center, middle

`2x` in srcset is a **descriptor**. Each image candidate string inside `srcset` must have at least one of the descriptors.

You can also use w-descriptor like `200w` ("this image is 200 pixel wide")

You can omit 1x in the example, too. Like:

```html
<img 
 srcset="http://placehold.it/200x200/0000ff 2x"
 src="http://placehold.it/100x100" 
 width="100" height="100" alt="alt text">
```

---
class: center, middle, inverse

# srcset and sizes

```html
<img srcset="" sizes="" src="" alt="">
```

---
class: middle

The `sizes` attribute can be used to specify additional context about the intended embed/render size of the image relative to the viewport width.

> WHATWG's [Living Standard](https://html.spec.whatwg.org/multipage/embedded-content.html)

---
class: center, middle, gray

Great read: [Srcset and sizes](https://ericportis.com/posts/2014/srcset-sizes/) by Eric Portis

![img](img/ericportis.png)

---
class: center, middle, gray

![img](img/srcset-sizes.png)

.small[from [Srcset and sizes](https://ericportis.com/posts/2014/srcset-sizes/) by Eric Portis]

---
class: center, middle

### Example **HBR Article Page**

Image is 100% of the viewport width (100vw) up to 1024px (Media query breakpoint).

Then it is 83% of the viewport width (10 out of 12 column)

```
<img srcset="" sizes="(min-width: 1024px) 84vw, 100vw" src="" alt="">

```
---

Demo
- [examples/srcset-sizes.html](http://daigofuji.github.io/responsive-images/examples/srcset-sizes.html)
- [bit.ly/1PoYgbJ](http://bit.ly/1PoYgbJ)
- [Test using ish](http://bradfrost.com/demo/ish/?url=http%3A%2F%2Fdaigofuji.github.io%2Fresponsive-images%2Fexamples%2Fsrcset-sizes.html)
- [view source on github](https://github.com/daigofuji/responsive-images/blob/gh-pages/examples/srcset-sizes.html)

---
class: center, middle, inverse

# Picture tag

---
class:  middle

```html
<picture>
 <source media="" srcset="">
 <source srcset="">
 <img src="">
</picture>

```
---
class: middle

If the parent is a `picture` element, then any previous sibling source element’s `srcset` attributes may also determine the embedded content.

> WHATWG's [Living Standard](https://html.spec.whatwg.org/multipage/embedded-content.html)

---
class: center, middle, white

![img](img/picture-caniuse.png)

---
class: center, middle

### Use `picture` _only_ if you're doing art direction — otherwise, `srcset/sizes` are the way to go.
> -- Wilto

---
class: center, middle

## Fallback

Browsers that do not support/understand `srcset` will just continue to use the `src` element, and those browsers that do support `srcset` can use its value instead.

---
class: center, middle, white

[**Picturefill** Polyfill](https://scottjehl.github.io/picturefill/) by Scott Jehl

![img](img/picturefill.png)

---
class: center, middle

Last but not least...
## What about images?

---
class: center, middle, inverse

# Tools for **automation**

---
class: center, middle, white

[RICG Responsive images plugin](https://wordpress.org/plugins/ricg-responsive-images/) for WordPress by Tim Evko et al

![img](img/plugin.png)

---
class: center, middle, white

Sizes of images created using Responsive Images plugin

.small[(Advanced Compression Option turned off)]

![img](img/plugin-cuts.png)

---
class: center, middle, white

[Grunt Responsive Images](http://www.andismith.com/grunt-responsive-images/) by Andi Smith

![img](img/grunt-resp-img.png)

---
class: center, middle, white

Sizes of images created using Grunt Responsive Images

![img](img/grunt-cuts.png)

This [how to by Addy Osmani](http://addyosmani.com/blog/generate-multi-resolution-images-for-srcset-with-grunt/) was helpful

---
class: middle, center

**Thank you!**

![img](img/bite-chew.gif)

daigo@daigofujiwara.com [ @daigofuji](https://github.com/daigofuji) [ @daigofuji](https://twitter.com/DaigoFuji)

![img](img/hbr_logo.svg)