The Big Picture: Responsive Images in Action #scd14
•
0 gefällt mir•935 views
Although responsive designs are already state-of-the-art in web development the whole trend still is in its infancy. When it comes to images, a lot of responsive websites just load the same big image on every viewport. Because of this, people judge responsive design as being detrimental to performance. New markup elements like <picture> are in development right now but what are the alternatives, what is the best to use right now, and how do they work? I will lead you through the different techniques and polyfills and show you their pros and cons. After this talk you should be able to choose the best fitting responsive image solution for your project.
Empfohlen
Empfohlen
Weitere ähnliche Inhalte
Was ist angesagt?
Was ist angesagt? (20)
Andere mochten auch
Andere mochten auch (20)
Ähnlich wie The Big Picture: Responsive Images in Action #scd14
Ähnlich wie The Big Picture: Responsive Images in Action #scd14 (20)
Kürzlich hochgeladen
Kürzlich hochgeladen (20)
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/' }]