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