The Big Picture: Responsive Images in Action #scd14
0 likes936 views
The presentation by Matthias Lau discusses the importance of responsive images in web design, focusing on techniques for optimizing images for various viewport sizes. It covers methods like using CSS backgrounds, the <picture> element, and different JavaScript libraries to enhance user experience while ensuring fast loading times without relying on caching or CDNs. The document also includes practical examples, code snippets, and resources for implementing responsive images effectively.
![<object
data="data:image/svg+xml,%3Csvg
%20viewBox='0%200%20300%20329'%20preserveAspectRatio='xMidYMid
%20meet'%20xmlns='http://www.w3.org/2000/svg'%3E%3Ctitle%3EIguazu%20Waterfalls%3C/
title%3E%3Cstyle%3Esvg%7Bbackground-‐size:100%25%20auto;background-‐repeat:no-‐repeat;
%7D@media%20screen%20and%20(max-‐width:300px)%7Bsvg%7Bbackground-‐image:url(http://
localhost:8010/responsive_images/img/small.jpg);%7D%7D@media%20screen%20and%20(min-‐
width:301px)%7Bsvg%7Bbackground-‐image:url(http://localhost:8010/responsive_images/
img/medium.jpg);%7D%7D@media%20screen%20and%20(min-‐width:601px)%7Bsvg%7Bbackground-‐
image:url(http://localhost:8010/responsive_images/img/big.jpg);%7D%7D@media%20screen
%20and%20(min-‐width:901px)%7Bsvg%7Bbackground-‐image:url(http://localhost:8010/
responsive_images/img/huge.jpg);%7D%7D%3C/style%3E%3C/svg%3E"
type="image/svg+xml">
<!-‐-‐
IE8
fallback
-‐-‐>
<!-‐-‐[if
lte
IE
8]>
<img
src="../img/medium.jpg"
alt="Iguazu
Waterfalls">
<![endif]-‐-‐>
</object>
!
ANYMORE
SIMPLE
NOT](https://image.slidesharecdn.com/thebigpicture-scd14-140518063339-phpapp01/85/The-Big-Picture-Responsive-Images-in-Action-scd14-19-320.jpg)
![<svg
xmlns='http://www.w3.org/2000/svg'>
<title>Iguazu
Waterfalls</title>
<style>
@media
screen
and
(min-‐width:21em){
svg{
background-‐image:url(http://
matthiaslau.github.io/responsive-‐images/img/medium.jpg);
}
}
@media
screen
and
(min-‐width:40em){
[…]
}
</style>
</svg>](https://image.slidesharecdn.com/thebigpicture-scd14-140518063339-phpapp01/85/The-Big-Picture-Responsive-Images-in-Action-scd14-29-320.jpg)
![<!-‐-‐
use
the
object
tag
for
maximal
browser
support
without
security
drawbacks
-‐-‐>
<!-‐-‐
put
the
SVG
data
inline
to
prevent
a
second
HTTP
request
-‐-‐>
<object
data="data:image/svg+xml,%3Csvg%20viewBox=[…]"
type="image/svg+xml">
<!-‐-‐
IE8
fallback
-‐-‐>
<!-‐-‐[if
lte
IE
8]>
<img
src="medium.jpg"
alt="Iguazu
Waterfalls">
<![endif]-‐-‐>
</object>](https://image.slidesharecdn.com/thebigpicture-scd14-140518063339-phpapp01/85/The-Big-Picture-Responsive-Images-in-Action-scd14-30-320.jpg)
![http://src.sencha.io/320/200/http://[...]/huge-‐hd.jpg
RESIZING
SERVICES
http://www.sencha.com/learn/how-to-use-src-sencha-io/](https://image.slidesharecdn.com/thebigpicture-scd14-140518063339-phpapp01/85/The-Big-Picture-Responsive-Images-in-Action-scd14-37-320.jpg)
![<script
src='http://src.sencha.io/screen.js'></script>
!
<img
src='http://src.sencha.io/wiw/http://[...]/huge-‐
hd.jpg'
alt='Iguazu
Waterfalls'
/>
RESIZING
SERVICES](https://image.slidesharecdn.com/thebigpicture-scd14-140518063339-phpapp01/85/The-Big-Picture-Responsive-Images-in-Action-scd14-38-320.jpg)
![https://github.com/andismith/grunt-responsive-images
options:
{
sizes:
[
{
name:
"s",
width:
320,
quality:
0.6
},
{
name:
"s",
suffix:
"x2",
width:
640,
quality:
0.6
},
[…]
]
},
files:
[{
expand:
true,
cwd:
'img/',
src:
['*.{jpg,gif,png}'],
dest:
'img/generated/'
}]](https://image.slidesharecdn.com/thebigpicture-scd14-140518063339-phpapp01/85/The-Big-Picture-Responsive-Images-in-Action-scd14-74-320.jpg)
The Big Picture: Responsive Images in Action #scd14
- 1. THE BIG PICTURE . responsive images in action PRESENTED BY MATTHIAS LAU
- 2. { name: "Matthias Lau", link: "http://laumatthias.de", twitter: "@matthiaslau", hometown: { name: "Hamburg, Germany" }, bio: "E-Commerce Freak and Web-Allrounder, love coding, awesome internet concepts, Chrome, Web Frameworks, Evernote, the Apple Multi-Touch Trackpad, Bouldering, Wikipedia and Espresso.", }
- 6. ! FOR SMALL VIEWPORTS LARGE IMAGES STILL...
- 10. IMAGES OPTIMIZED
- 11. IMAGES OPTIMIZED
- 12. ! DIRECTION ART
- 15. ! IMAGES FAST
- 16. ! JAVASCRIPT IT SHOULD ALSO WORK WITHOUT
- 17. CACHING / CDN
- 19. <object data="data:image/svg+xml,%3Csvg %20viewBox='0%200%20300%20329'%20preserveAspectRatio='xMidYMid %20meet'%20xmlns='http://www.w3.org/2000/svg'%3E%3Ctitle%3EIguazu%20Waterfalls%3C/ title%3E%3Cstyle%3Esvg%7Bbackground-‐size:100%25%20auto;background-‐repeat:no-‐repeat; %7D@media%20screen%20and%20(max-‐width:300px)%7Bsvg%7Bbackground-‐image:url(http:// localhost:8010/responsive_images/img/small.jpg);%7D%7D@media%20screen%20and%20(min-‐ width:301px)%7Bsvg%7Bbackground-‐image:url(http://localhost:8010/responsive_images/ img/medium.jpg);%7D%7D@media%20screen%20and%20(min-‐width:601px)%7Bsvg%7Bbackground-‐ image:url(http://localhost:8010/responsive_images/img/big.jpg);%7D%7D@media%20screen %20and%20(min-‐width:901px)%7Bsvg%7Bbackground-‐image:url(http://localhost:8010/ responsive_images/img/huge.jpg);%7D%7D%3C/style%3E%3C/svg%3E" type="image/svg+xml"> <!-‐-‐ IE8 fallback -‐-‐> <!-‐-‐[if lte IE 8]> <img src="../img/medium.jpg" alt="Iguazu Waterfalls"> <![endif]-‐-‐> </object> ! ANYMORE SIMPLE NOT
- 21. SVG´s USE
- 22. BACKGROUNDS CSS
- 23. BACKGROUNDSCSS #iguazu { background-‐image: url(small.jpg); } @media screen and (min-‐width: 40em) { #iguazu { background-‐image: url(medium.jpg); } }
- 24. SIMPLE CODE FAST NOJS CACHING / CDN ART DIRECTION
- 25. IT IS A CSS IMAGE
- 26. <div id="iguazu" role="img" aria-‐label="Iguazu"></div> ACCESSIBILITY
- 27. CARS CLOWN
- 28. <img src="iguazu.svg" alt="Iguazu Waterfalls">
- 29. <svg xmlns='http://www.w3.org/2000/svg'> <title>Iguazu Waterfalls</title> <style> @media screen and (min-‐width:21em){ svg{ background-‐image:url(http:// matthiaslau.github.io/responsive-‐images/img/medium.jpg); } } @media screen and (min-‐width:40em){ […] } </style> </svg>
- 30. <!-‐-‐ use the object tag for maximal browser support without security drawbacks -‐-‐> <!-‐-‐ put the SVG data inline to prevent a second HTTP request -‐-‐> <object data="data:image/svg+xml,%3Csvg%20viewBox=[…]" type="image/svg+xml"> <!-‐-‐ IE8 fallback -‐-‐> <!-‐-‐[if lte IE 8]> <img src="medium.jpg" alt="Iguazu Waterfalls"> <![endif]-‐-‐> </object>
- 31. SIMPLE CODE FAST NOJS CACHING / CDN ART DIRECTION
- 34. .htaccess image request Scaling Logic best fitting image Cookie
- 35. SIMPLE CODE FAST NOJS CACHING / CDN ART DIRECTION
- 38. <script src='http://src.sencha.io/screen.js'></script> ! <img src='http://src.sencha.io/wiw/http://[...]/huge-‐ hd.jpg' alt='Iguazu Waterfalls' /> RESIZING SERVICES
- 39. SIMPLE CODE FAST NOJS CACHING / CDN ART DIRECTION
- 41. <img alt="Iguazu" src="medium.jpg" srcset="medium.jpg 1x, medium-‐2x.jpg 2x">
- 42. <picture> <source media="(min-‐width: 40em)" src="medium.jpg"> <!-‐-‐ fallback img -‐-‐> <img src="medium.jpg" alt="Iguazu"> </picture>
- 43. <picture> <source media="(min-‐width: 50em)" srcset="large.jpg 1x, large-‐2x.jpg 2x"> <source media="(min-‐width: 40em)" srcset="medium.jpg 1x, medium-‐2x.jpg 2x"> <source srcset="small.jpg, small-‐2x.jpg 2x"> <img src="small.jpg" alt="Iguazu"> </picture>
- 44. THE FANCY STUFF LET´S DO ALL
- 45. VIEWPORT SIZE IS NOT BLOCK SIZE excursion:
- 47. <picture> <source sizes="(max-‐width: 30em) 100vw, (max-‐width: 50em) 50vw, calc(33vw -‐ 100px)" srcset="xsmall.jpg 100w, small.jpg 200w, medium.jpg 400w, large.jpg 800w, huge.jpg 1600w, monster.jpg 3200w"> <img src="medium.jpg" alt="Iguazu"> </picture>
- 48. <3
- 49. SIMPLE CODE FAST NOJS CACHING / CDN ART DIRECTION
- 54. SIMPLE CODE FAST NOJS CACHING / CDN ART DIRECTION
- 55. MORE THERE IS EVEN HiSRC Foresight.js Riloadr rwdImages Retina.js Responsive Enhance Doubletake Content Aware Resizing https://docs.google.com/spreadsheet/ccc?key=0Al0lI17fOl9DdDgxTFVoRzFpV3VCdHk2NTBmdVI2OXc#gid=0 Mobify..js
- 57. „Don't click this if on a 3G network, it probably take forever, just check it out when you get home.“
- 59. WHERE POSSIBLE CSS IMAGES OTHER PICTUREFILL + SVG´s
- 73. grunt original
- 74. https://github.com/andismith/grunt-responsive-images options: { sizes: [ { name: "s", width: 320, quality: 0.6 }, { name: "s", suffix: "x2", width: 640, quality: 0.6 }, […] ] }, files: [{ expand: true, cwd: 'img/', src: ['*.{jpg,gif,png}'], dest: 'img/generated/' }]