responsive images are here. now what?
TRANSCRIPT
Responsive Images Are Here.
Now What?
Jason Grigsby • @grigs • cloudfour.comPhoto by http://www.gratisography.com/
Responsive images have landed
Also sprach Zarathustra
Shipped Development
https://www.flickr.com/photos/gwendalcentrifugue/7395256948
<picture> <!-- 16:9 crop --> <source type="image/webp" media="(min-width: 36em)" srcset="quilt_2/detail/large.webp 1920w, quilt_2/detail/medium.webp 960w, quilt_2/detail/small.webp 480w" /> <source media="(min-width: 36em)" srcset="quilt_2/detail/large.jpg 1920w, quilt_2/detail/medium.jpg 960w, quilt_2/detail/small.jpg 480w" /> <!-- square crop -->
type="image/webp" srcset="quilt_2/square/large.webp 822w, quilt_2/square/medium.webp 640w, quilt_2/square/small.webp 320w" /> <source srcset="quilt_2/square/large.jpg 822w, quilt_2/square/medium.jpg 640w, quilt_2/square/small.jpg 320w" /> <img src="quilt_2/detail/medium.jpg" alt="Detail of the above quilt, highlighting the embroidery and exotic stitchwork." /> </picture>
”This is way too complex and heavy markup language. Can you imagine yourselves doing that in 300 images in
a web site? This will be a nightmare to manage.”
”There are so many things wrong with these new responsive image systems.”
“
”
”Long story short, I don't think anyone should use images on the web.”
https://www.flickr.com/photos/zeldman/7727532846
”Long story short, I don't think anyone should use images on the web.”
https://www.flickr.com/photos/zeldman/7727532846
background-image: -webkit-linear-gradient( 45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent); background-image: -o-linear-gradient( 45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%,
rgba(255, 255, 255, .15) 75%, transparent 75%, transparent); background-image: linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
And that’s why no one uses gradients…
Images have always been difficult.
216 Web Safe Colors
http://moodlightinghire.com/wp-content/uploads/2013/06/RGB_color_chart_by_ervis.jpg
1996
258 pages
1997
447 pages
1996
235 pages
1997
238 pages
1997
235 pages
PNG compression
1,498 bytes 1,980 bytes 12,850 bytes
Use Cases
https://www.flickr.com/photos/cgb_bbear/3082932860
https://www.flickr.com/photos/whitehouse/8491445521
Resolution Switching Includes high-density (retina) images.
Art direction
http://www.flickr.com/photos/barackobamadotcom/5795228030/
http://www.flickr.com/photos/barackobamadotcom/5795228030/
Art direction
http://www.flickr.com/photos/barackobamadotcom/5795228030/
Art direction
http://www.flickr.com/photos/barackobamadotcom/5795228030/
Art direction
http://www.flickr.com/photos/barackobamadotcom/5795228030/
Art direction
Not simply cropping
Art direction: Images with text
Art direction: Images with text
Art direction: Images with text
https://www.flickr.com/photos/lonelycoo/4393663498
<img>is always required
<img>Icon made by Daniel Bruce from www.flaticon.com is licensed under CC BY 3.0
<picture> <source>
srcset media
sizes type
<picture> <source media="(min-width: 650px)" srcset="kitten-large.png"> <source media="(min-width: 465px)" srcset="kitten-medium.png"> <img src="kitten-small.png" alt="a cute kitten"> </picture>
All rules are applied to <img> element
Original Chrome Team Example: http://googlechrome.github.io/samples/picture-element/
<img>do you need anything else?
Fixed width, single density
<img> is all you need.
Small difference in file size or using SVG?
<img> is all you need.
High density displays?
srcset
display density
comma-separated list
<img src="cat.jpg" alt="cat" srcset="cat.jpg, cat-2X.jpg 2x">
Easy so far, right?
1849 × 749 – 256K
2x = 3698 × 1498 – 508K
We need more source files.
width of the image sources
Browser picks best source
<img src="cat.jpg" alt="cat" srcset="cat-160.jpg 160w, cat-320.jpg 320w, cat-640.jpg 640w, cat-1280.jpg 1280w">
Browser picks best source
HOW?https://www.flickr.com/photos/ores2k/394359583
Image requested
HTML requested
CSS and JS requestedHTML parsing starts
Image requested
Image requested
Image requested
CSS evaluation beginning
CSS evaluation beginning
Images are downloaded before size is knownThe only thing the lookahead pre-parser knows is the size of the viewport.
<img src="cat.jpg" alt="cat" srcset="cat-160.jpg 160w, cat-320.jpg 320w, cat-640.jpg 640w, cat-1280.jpg 1280w">
Images are nearly same size as viewport
1540px
254px
Viewport Tells Us
Little
Tug of war between responsive images and the lookahead pre-parser.
https://www.flickr.com/photos/davechiu/24165369 https://www.flickr.com/photos/ostrosky/4149725733
https://www.flickr.com/photos/davechiu/24165369 https://www.flickr.com/photos/ostrosky/4149725733
Lookahead pre-parser
Know everything in advance. Start downloading immediately.
Responsive images
Wait until last minute. Know size of image after CSS / JS.
The pre-parser is why we can’t solve responsive images with CSS, JS or a magical new image format.
https://www.flickr.com/photos/hamur0w0/6984884135
Lookahead Pre-parser Key to a Faster Web
20% 19%http://andydavies.me/blog/2013/10/22/how-the-browser-pre-loader-makes-pages-load-faster/
~43% of image fetches are initiated by the speculative HTML scanner, which account for ~50% of transferred bytes.
—Ilya Grigorik
“
”http://bigqueri.es/t/who-initiates-image-downloads/568
sizes
https://www.flickr.com/photos/ashleyrosex/2861690380
<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, 171px”>
sizes="(max-width: 480px) 100vw, (max-width: 900px) 33vw, 254px"
sizes is required
whenever srcset uses
width descriptors
media condition (subset of media queries)length
viewport width unit
if there is no media condition,
then it is the default length
length can be absolute, relative or even calc()
sizes="(max-width: 480px) 100vw,
(max-width: 900px) 33vw,
254px"
sizes=" (max-width: 480px) 100vw, (max-width: 900px) 33vw, 254px"
sizes=" (max-width: 480px) 100vw, (max-width: 900px) 33vw, 254px"
sizes=" (max-width: 480px) 100vw, (max-width: 900px) 33vw, 254px"
What about separation of content from style?
Sizes is a necessary compromise: responsive images and speculative downloading
srcset and sizes
let browsers be smarthttps://www.flickr.com/photos/alicejamieson/3164148439
<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>
media query
full srcset
multiple
<source>s
<img> required
Shopify using <picture> for art direction
Shopify using <picture> for art direction<picture> <source srcset="[email protected], [email protected] 2x" media="(min-width: 990px)"> <source srcset="[email protected], [email protected] 2x" media="(min-width: 750px)"> <img srcset="[email protected], [email protected] 2x" alt="Shopify Merchant, Corrine Anestopoulos"> </picture>
Simplified markup
another use for <picture>https://www.flickr.com/photos/delete08/4869608487
declare different types of images
unless art direction, you
don’t need media attribute
<picture>
<source type="image/svg+xml" srcset="logo.xml">
<source type="image/webp" srcset="logo.webp">
<img src="logo.png" alt="ACME Corp">
</picture>
New image formats present new possibilities
JPEG 2000 handles alpha channel images wellhttp://www.useragentman.com/blog/2015/01/14/using-webp-jpeg2000-jpegxr-apng-now-with-picturefill-and-modernizr/
JPEG 2000 19.2K
JPEG-XR 95.7K
PNG 325.7K
Web-P 56K
Alpha Channel Dice Image
http://www.useragentman.com/blog/2015/01/14/using-webp-jpeg2000-jpegxr-apng-now-with-picturefill-and-modernizr/
inline image tricks
https://www.flickr.com/photos/sk8mama/238533452
inline image tricks
https://www.flickr.com/photos/sk8mama/238533452
What about CSS?
https://www.flickr.com/photos/mauriz/4059476052
http://www.gratisography.com/ https://www.flickr.com/photos/shaheershahid/3635625771
http://www.gratisography.com/ https://www.flickr.com/photos/shaheershahid/3635625771
Art Direction
Resolution Switching
Resolution Switching
image-set()
works for any CSS that takes
images (e.g., border-image) display density =>
precursor to srcset, similar syntax
does not, yet, support declaring image widths
background-image: image-set( "foo.png" 1x,
"foo-2x.png" 2x);
media queries!
old style, webkit only
resolution media query, max-resolution also valid dots per inch (dpi),
dots per centimeter (dpcm) or dots per px unit (dppx)
Due to the 1:96 fixed ratio of CSS in to CSS px, 1dppx is equivalent to 96dpi
https://developer.mozilla.org/en-US/docs/Web/CSS/resolution
@media (-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {
/* High density stuff here */
}
image breakpoints
http://www.gratisography.com/
Art direction may dictate image breakpoints
https://www.flickr.com/photos/photosdavidgabrielfischer/15706338457
Image breakpoints for resolution switching.
For responsive design breakpoints, resize the browser until the page looks bad then…
BOOM!you need a breakpoint.
2000 x 3010 761K
200 x 301 15K
How many image breakpoints?
2000 x 3010 761K
200 x 301 15K Scaled down images don’t look bad.
2000 x 3010 250K
400 x 602 Actual size in page
800 x 1204 73K
2000 x 3010 250K
400 x 602 Actual size in page
800 x 1204 73K
600 x 903 42K
400 x 602 Actual size in page
800 x 1204 73K
600 x 903 42K
500 x 753 31K
450 x 678 27K
400 x 602 Actual size in page
400 x 602 Actual size in page
Is the only intrinsic information we have about image size.
In the responsive layouts I’ve worked on, content image sizes and their
breakpoints were chosen for completely different reasons than the
design (CSS) breakpoints: the former for sensible jumps in file size to
match screen dimension and/or density, and the latter for how content
modules are visibly designed at given viewport dimensions.
—Scott Jehl, Filament Group http://lists.w3.org/Archives/Public/public-whatwg-archive/2012May/0613.html
“
”
What is a sensible jump in file size?
Images compress differentlyBoth images are 960x660 pixels
151K, JPEG 13K PNG
Responsive Images Performance Budget
Source image: 500x333 58K
What is the cost of flexible images?
Source image: 500x333 58K
What is the cost of flexible images?
Size in page: 300x200 24K
Making this image flexible
costs 34K.
What if we set a performance budget of 20K per image for flexible images?
Width Height File Size
320 213 25K
453 302 44K
579 386 65K
687 458 85K
786 524 104K
885 590 124K
975 650 142K
990 660 151K
8 image breakpoints
https://www.flickr.com/photos/lyza/6733380533
Width Height File Size
320 213 9K
731 487 29K
990 660 40K
3 image breakpoints
https://www.flickr.com/photos/lyza/6210160407
7 image breakpoints
Width Height File Size
320 213 24K
471 314 43K
612 408 64K
728 485 84K
840 560 103K
944 629 122K
990 660 131K
https://www.flickr.com/photos/lyza/6167714218
Width Height File Size
990 660 13K
1 image breakpoint
Pick representative
images and test how
many breakpoints
you’ll need.
Image breakpoints are not a science yet.
https://www.flickr.com/photos/ecstaticist/5465673165
Humans shouldn’t be doing this work.
https://www.flickr.com/photos/jdhancock/7801182534/
https://www.flickr.com/photos/lendingmemo/11747440176
Questions to ask about imagesWhere are the source files and what is the process for publishing?
Is there a big difference between smallest and largest image size?
Resolution switching or art direction?
Can we use SVG?
Are there representative images we can use to find sensible jumps in file sizes for our image breakpoints?
Do we want to support multiple image formats?
Real life example: hero images
Hero images are usually large
promo images
Full requirements for a hero image:
Full requirements for a hero image:
A box for marketing.
In an ideal world, you build HTML5 hero images…
Instead, maybe all
hero images consist of HTML text
placed on an image.
And every image you
use has spots set aside just for your text.
But that may not be
practical for your site.
Maybe just give them a box?
Image breakpoints FTL
Image Breakpoints
Name Width Height Max Width Min Width
Large 1080 360 n/a 781
Medium 780 320 780 541
Small 540 270 540 n/a
Text readability dictated 3 image breakpoints
Need to support 16 pt in this font? Requires 4 breakpoints.
This worked for one project. Your project will likely be different.
But surveying your images will help you figure it out.
https://www.flickr.com/photos/nate2009/13971372001
Image Description Format Size Markup Notes
Property logosPNG8
(future SVG)Regular, Retina
<img>Little variance between the wide and
small screen image sizes.
Partner logosPNG8
(future SVG)Regular, Retina
<img>Little variance between the wide and
small screen image sizes.
Iconography SVG — <img> —
Brand logosPNG8
(future SVG)regular, Retina
<img>Assumes little variance between the wide and small screen image sizes.
Property photographyJPG
(conditional WebP)Dynamically resized and
compressedsrcset and sizes Templates specify breakpoints.
Promo images w/ text (art direction)
Whichever is appropriate As many sizes as needed. <picture>Content producer defines images
and breakpoints in CMS.
Example of images audit for a large site
Big Hope: Automation
https://www.flickr.com/photos/clement127/15631803492
http://scottjehl.github.io/picturefill/
Picturefill is the polyfill.
https://wordpress.org/plugins/ricg-responsive-images/
Wordpress Responsive
Images Plugin
https://www.flickr.com/photos/mariachily/5250487136
Responsive images can seem daunting…
https://www.flickr.com/photos/zeldman/14847023657
And you may feel like giving up…
Remember, you’re not alone…
https://www.flickr.com/photos/max-design/3751402935
We will build tools to make the climb easier…
We merely need to take the first steps.
https://www.flickr.com/photos/akras/1477140536
http://www.gratisography.com/
Special thanks to Simon Pieters, Mat Marquis, Eric Portis, Yoav Weiss, and the rest of the RICG.
Shout out to all of the amazing photographers who share their work under creative commons. You rule!