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.
8. ”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.”
“
9. ”Long story short, I don't think anyone should use images on the web.”
https://www.flickr.com/photos/zeldman/7727532846
10. ”Long story short,
I don't think
anyone should
use images on
the web.”
https://www.flickr.com/photos/zeldman/7727532846
33. <img>
Icon made by Daniel Bruce from www.flaticon.com is licensed under CC BY 3.0
<picture> <source>
srcset media
sizes type
34. <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/
59. 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
60. 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/
61. ~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
64. 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"
75. 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
76. another use for <picture>
https://www.flickr.com/photos/delete08/4869608487
77. 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>
78. 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/
88. 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);
92. 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 */
}
103. 400 x 602
Actual size in page
Is the only intrinsic information we have about image size.
104. 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
“
115. 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
118. Questions to ask about images
Where 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?
130. 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.
131. This worked for one project.
Your project will likely be different.
132. But surveying your images will help you figure it out.
https://www.flickr.com/photos/nate2009/13971372001
133. Image Description Format Size Markup Notes
Property logos
PNG8
(future SVG)
Regular,
Retina
<img>
Little variance between the wide and
small screen image sizes.
Partner logos
PNG8
(future SVG)
Regular,
Retina
<img>
Little variance between the wide and
small screen image sizes.
Iconography SVG — <img> —
Brand logos
PNG8
(future SVG)
regular,
Retina
<img>
Assumes little variance between the
wide and small screen image sizes.
Property photography
JPG
(conditionalWebP)
Dynamically resized and
compressed
srcset 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
147. http://www.gratisography.com/
Special thanks to Simon
Pieters, Mat Marquis,
Eric Portis,YoavWeiss,
and the rest of the RICG.
Shout out to all of the
amazing photographers
who share their work
under creative
commons.You rule!