IMAGES RESPONSIVEPAST, PRESENT, & FUTURE

ERIC PORTIS • CLOUDINARY WEBINAR • 2016-11-16

WHO?QUESTION #1

SHIP HAPPENS

★URBANA!

RESPONSIVE IMAGES COMMUNITY GROUP

http://ricg.io

WHAT!?QUESTION #2

<img>

src="insufficent"><img

SURVEY!Who’s used these new features?

WHY?QUESTION #3

BITMAPS ARE

FLUID

FIXED

THE WEB IS

vs.

BITMAP IMAGES ARE THE BIGGEST PERFORMANCE BOTTLENECK ON THE RESPONSIVE WEB

65%of the web is

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

1614 kb 2016

2011 577 kb

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

30” Cinema Display 2560 x 1600

iPhone 7 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 32%

360 x 640 16%

1366 x 678 14%

1920 x 1080 7%

375 x 667 4%

2016

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 in pixels — <img>’s width on the layout in CSS px

= image density e.g., 2x

.

.

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

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

SAFARI 7.1+ 9+ 9.1+

X W + SIZES PICTURE

ANDROID STOCK 53+ 53+ 53+

CHROME FOR ANDROID 44+ 44+ 44+

OPERA MINI Impossible?

IE MOBILE Nada.

EDGE MOBILE 12+ 13+ 13+

iOS SAFARI 8+ 9.2+ 9.3+

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!

srcset + sizes http://cloudinary.com/blog/responsive_images_with_srcset_sizes_and_cloudinary

Art Direction http://cloudinary.com/blog/automatically_art_directed_responsive_images

Breakpoints Generation http://www.responsivebreakpoints.com

Client Hints http://cloudinary.com/blog/automatic_responsive_images_with_client_hints

RESPONSIVE IMAGES WITH CLOUDINARY

Image Management — Buy vs. Build? Webinar Dec 7th, 2016 http://info.cloudinary.com/webinars.html

ImageCon First Ever Image and Video Management Conference March 1st, 2017 in San Francisco https://events.bizzabo.com/imagecon2017

UPCOMING EVENTS

Q & A