A Techy, Stretchy Image Scrimmage

IMAGE SCRIMMAGE

A TECHY, STRETCHY

ERIC PORTIS • SMASHINGCONF FREIBURG • 2015

WHO?QUESTION #1

SHIP HAPPENS

★URBANA!

RESPONSIVE IMAGES COMMUNITY GROUP

http://ricg.io

WHAT!?QUESTION #2

<img>

src="insufficent"><img

WHY?QUESTION #3

BITMAPS ARE

FLUID

FIXED

THE WEB IS

vs.

BITMAP IMAGES ARE THE BIGGEST PERFORMANCE BOTTLENECK ON THE RESPONSIVE WEB

63%of the web is

IMAGEShttp://httparchive.org/interesting.php#bytesperpage

736 kb 2015

2011 228 kb

http://httparchive.org/trends.php#bytesImg&reqImg

30” Cinema Display 2560 x 1600

iPhone 6 Plus 2280 x 1242 (logical)

30” Cinema Display 2560 x 1600

iPhone 6 Plus 2280 x 1242 (logical)

30” Cinema Display 2560 x 1600

Retina iMac 5120 x 2880

1024 x 768 32%

1280 x 800 23%

1280 x 1024 11%

1440 x 900 10%

2009

OTHER 4%

OTHER 24%

1366 x 768 13%

1920 x 1080 9%

360 x 640 8%

768 x 1024 7%

2015http://statcounter.com

1024 x 768 32%

1280 x 800 23%

1280 x 1024 11%

1440 x 900 10%

http://statcounter.com2009

OTHER 4%

OTHER 24%

1366 x 768 13%

1920 x 1080 9%

360 x 640 8%

768 x 1024 7%

2015

VIEWPORT WIDTH WASTED IMAGE BYTES360px 72%

760px 53%

1260px 42%

http://timkadlec.com/2013/06/why-we-need-responsive-images/

TIM KADLEC: Mobile Image Processing

VIDEO: https://www.youtube.com/watch?v=jP68rCjSSjM SLIDES: https://speakerdeck.com/tkadlec/mobile-image-processing-at-velocity-sc-2015

ADAPTABILITY PRESENTS NEW OPPORTUNITIES FOR VISUAL DESIGN

The day after the release of the original iPhone

~10 years later

nytimes.com on a small screen

Cropping

Some sort of… mammal? Look at that adorable Portuguese Water dog!

Otherwise altering

Otherwise altering

HOW?QUESTION #4

LIVE CODING!x descriptors

2x = (min-device-pixel-ratio: 2) ?

NO!

IF the user’s device has a device-pixel-ratio >= 2 THEN load this resource.

NO EXCEPTIONS!

MEDIA QUERIES:

Hey, browser! Here are some fun facts about the available resources.

SRCSET DESCRIPTORS:

YOU DECIDE!

x 2x

<img>large.jpg

2x = this resource has an “image density” of 2!

resource width in pixels — <img>’s width on the layout in CSS px

= image density e.g., 2x

..

medium.jpg is 640 pixels wide — its <img> has a width of 640 px on the layout

= medium.jpg has an image density of 1x

..

large.jpg is 1280 pixels wide — its <img> has a width of 640 px on the layout

= large.jpg has an image density of 2x

..

resource width — <img>’s width on the layout

= image density

..

x descriptors only work for fixed-width images!

LIVE CODING!w and sizes

LIVE CODING!picture and media

TAYLOR HUNT: When Responsive Images Get Ugly

http://codepen.io/Tigt/blog/when-responsive-images-get-ugly

LIVE CODING!picture and type

“Groovy”

WHEN?QUESTION #5

NOW!

X W + SIZES PICTURE

CHROME 34+ 38+ 38+

OPERA 21+ 25+ 25+

FIREFOX 38+ 38+ 38+

IE Nope.

EDGE 12+ 12+ SOON!

SAFARI 7.1+ 9+ ? *

* But probably soonish

X W + SIZES PICTURE

ANDROID STOCK Nope.

CHROME FOR ANDROID 44+ 44+ 44+

OPERA MINI Impossible?

IE MOBILE Nada.

EDGE MOBILE Probably!

iOS SAFARI 7.1+ 9+ ? *

* But probably soonish

ENHANCE <img src=“mobile-first.jpg” srcset=“progressive.jpg 640w, enhancement.jpg 1280w, works.jpg 1920w” alt=“Really.” />

https://scottjehl.github.io/picturefill/

POLYFILL WHEN YOU NEED TO

Picturefill!

image-set(): lets you use srcset syntax in CSS

Client Hints: let you do srcset-y things on the server

Container Queries: The RICG’s next trick?

WICG: Everyday developers shaping the web

EXTRA CREDIT

THANKS!ericportis.com

@etportis P.S. I write a fortnightly respimg newsletter!

Sign up here: ricg.io