responsive images
TRANSCRIPT
Responsive ImagesSeptember 1, 2015
Paul Stonier | www.paulstonier.com | 607-358-5199
–Yoav Weiss
“Efficiently load properly dimensioned images that fit the page’s design”
–Yoav Weiss
“Efficiently load properly dimensioned images that fit the page’s design”
–Yoav Weiss
“Efficiently load properly dimensioned images that fit the page’s design”
Mobile
• Bandwidth is expensive.
• Download speeds are slow.
Images account for 56% of the average page’s total size.
http://www.webperformancetoday.com/2014/12/02/page-bloat-update-average-top-1000-web-page-1795-kb-size/
Resolution-based selection
Developers generally want to provide the same image in multiple resolutions, so that high-res devices can get the optimum image for a given resolution, while low-resolution devices can avoid wasting time
and bandwidth downloading overly-large files.
https://usecases.responsiveimages.org/
Responsive images can result in ~72% less image weight.
http://timkadlec.com/2013/06/why-we-need-responsive-images/
Properly Dimensioned
How do we fix it?
<img src="small.jpg" srcset="large.jpg 1024w, medium.jpg 640w, small.jpg 320w" sizes="(min-width: 1000px) 50vw, 100vw" alt=“kittens in a pumpkin">
If the screen size is 500px, small.jpg will load because it’s the largest size that fits within the viewport.
If the screen size is 700px, medium.jpg will load because it’s the largest size that fits within the viewport.
How do we fix it?
<img src="small.jpg" srcset="large.jpg 1024w, medium.jpg 640w, small.jpg 320w" sizes="(min-width: 1000px) 50vw, 100vw" alt=“kittens in a pumpkin">
If the screen size is 1000px, small.jpg will load because it’s the largest size that fits within 50% of the viewport.
If the screen size is 2048px, large.jpg will load because it’s the largest size that fits within 50% of the viewport.
How do we fix it?
<img src="small.jpg" srcset="large.jpg 1024w, medium.jpg 640w, small.jpg 320w" sizes="(min-width: 1000px) 50vw, 100vw" alt=“kittens in a pumpkin">
If the screen size is 1440px and 2X DPI, large.jpg will load because…
2x DPI results in (srcset width)/2. 1024w/2 = 512w
512w is the largest that will fit in the 50% of the viewport (720px)
The x descriptor
<img src=“kittens-small.jpg” srcset=“kittens-hires.jpg 2x, kittens-medium.jpg 1.5x” sizes="100vw" alt=“kittens in a pumpkin">
Why this works
http://ericportis.com/posts/2014/srcset-sizes/
<picture>
• Art Direction
• Mime Type
Art Direction
http://blog.cloudfour.com/a-framework-for-discussing-responsive-images-solutions/#artdirection
<picture>
<picture> <source media="(min-width: 40em)" srcset="big.jpg 1x, big-hd.jpg 2x"> <source srcset="small.jpg 1x, small-hd.jpg 2x"> <img src="fallback.jpg" alt=""></picture>
<picture>
<picture> <source media="(min-width: 36em)" srcset="large.jpg 1024w,
medium.jpg 640w, small.jpg 320w"
sizes="33.3vw" /> <img src="fallback.jpg" alt="">
</picture>
<picture>
<picture> <source type="image/svg" src="logo.svg" /> <source type="image/png" src="logo.png" /> <img src="logo.gif" alt="RadWolf, Inc." /></picture>
WordPresshttps://make.wordpress.org/core/tag/respimg/
Drupal https://www.youtube.com/watch?v=TxNW0YNylLI
Grunt
https://github.com/nwtn/grunt-respimg
LazySizeshttps://github.com/aFarkas/lazysizes
https://responsiveimages.org/
THE RICG ON GITHUBhttp://gh.responsiveimages.org
IRC LOGShttp://ircbot.responsiveimages.org
DISCUSSION LIST ARCHIVEShttp://list.responsiveimages.org
