Skip to main content
UploadLanguage (EN)Support
BusinessMobileSocial MediaMarketingTechnologyArt & PhotosCareerDesignEducationPresentations & Public SpeakingGovernment & NonprofitHealthcareInternetLawLeadership & ManagementAutomotiveEngineeringSoftwareRecruiting & HRRetailSalesServicesScienceSmall Business & EntrepreneurshipFoodEnvironmentEconomy & FinanceData & AnalyticsInvestor RelationsSportsSpiritualNews & PoliticsTravelSelf ImprovementReal EstateEntertainment & HumorHealth & MedicineDevices & HardwareLifestyle
Jason Grigsby, profile picture
Uploaded byJason Grigsby
968 views

Responsive images are here. Now what?

The document discusses responsive images and issues around their implementation. It begins by outlining the new <picture> element and srcset/sizes attributes that allow images to adapt based on screen size and resolution. It then discusses challenges like managing many images, the need for image breakpoints to determine appropriate file sizes, and the tension between responsive images and the browser's lookahead parser. Overall, the document examines both the promise and difficulties of responsive images on the modern web.

Technology◦
Download to read offline
Responsive Images Are Here. NowWhat? Jason Grigsby • @grigs • cloudfour.com Photo 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" />
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
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 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.
216Web Safe Colors http://moodlightinghire.com/wp-content/uploads/2013/06/RGB_color_chart_by_ervis.jpg
1996 258pages 1997 447pages 1996 235pages 1997 238pages 1997 235pages
PNG compression 1,498 bytes 1,980 bytes 12,850 bytes
https://www.flickr.com/photos/jannem/3312115991
UseCases 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 requested HTML parsing starts Image requested Image requested Image requested
CSS evaluation beginning
CSS evaluation beginning Images are downloaded before size is known The 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 FasterWeb 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" sizesisrequired wheneversrcsetuses widthdescriptors
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?>
Art Direction http://www.gratisography.com/
<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="homepage-person@desktop.png, homepage-person@desktop-2x.png 2x" media="(min-width: 990px)"> <source srcset="homepage-person@tablet.png, homepage-person@tablet-2x.png 2x" media="(min-width: 750px)"> <img srcset="homepage-person@mobile.png, homepage-person@mobile-2x.png 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 well http://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/
http://www.gratisography.com/
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, supportdeclaring image widths background-image: image-set( "foo.png" 1x, "foo-2x.png" 2x);
Art Direction http://www.gratisography.com/
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