the big picture: responsive images in action #devcon13
DESCRIPTION
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 are under discussion 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.TRANSCRIPT
THE BIG PICTURE .
responsive images in action
PRESENTED BY MATTHIAS LAU
{ 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.", work: { employer: { name: "Jimdo"
}, },
}
!
A LOT!OPTIMIZED
THEY
!
FOR SMALL VIEWPORTSLARGE IMAGES
STILL...
!
WANT!WE
WHAT
IMAGESOPTIMIZED
IMAGESOPTIMIZED
IMAGESOPTIMIZED
!
DIRECTIONART
!
IMAGESFAST
!
JAVASCRIPT
IT SHOULD
ALSO WORK WITHOUT
CACHING / CDN
<img src="/img/funny-‐cat.jpg">
!
CODESIMPLE
TECHNIQUESRESPONSIVE IMAGE
http://matthiaslau.github.io/responsive-images/
SVG´sUSE
BACKGROUNDSCSS
BACKGROUNDSCSS
#iguazu { background-‐image: url(small.jpg); } @media screen and (min-‐width: 601px) { #iguazu { background-‐image: url(medium.jpg); } }
SIMPLE CODE
FAST
NOJS
CACHING / CDN
ART DIRECTION
IT IS A CSS IMAGE
<div id="iguazu" role="img" aria-‐label="Iguazu"></div>
ACCESSIBILITY
CARSCLOWN
<img src="iguazu.svg" alt="Iguazu Waterfalls">
<svg xmlns='http://www.w3.org/2000/svg'> <title>Iguazu Waterfalls</title> <style> @media screen and (max-‐width:300px){ svg{ background-‐image:url(http://localhost:8010/responsive_images/img/small.jpg); } } @media screen and (min-‐width:301px){ […] } </style> </svg>
<!-‐-‐ 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>
SIMPLE CODE
FAST
NOJS
CACHING / CDN
ART DIRECTION
JS
Cookie
viewport width
.htaccess
image request Scaling Logic
best fitting image
Cookie
SIMPLE CODE
FAST
NOJS
CACHING / CDN
ART DIRECTION
RESIZINGSERVICES
http://src.sencha.io/320/200/http://[...]/huge-‐hd.jpg
RESIZING
SERVICES
http://www.sencha.com/learn/how-to-use-src-sencha-io/
<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
SIMPLE CODE
FAST
NOJS
CACHING / CDN
ART DIRECTION
ELEMENTPICTURE
SRCSET+
<picture> <source media="(min-‐width: 601px)" src="medium.jpg"> <source src="small.jpg"> <!-‐-‐ fallback img -‐-‐> <img src="medium.jpg" alt="Iguazu"> <!-‐-‐ alternate text -‐-‐> <p>Iguazu</p> </picture>
<img alt="Iguazu" src="small.jpg" srcset="medium.jpg 1x, medium-‐2x.jpg 2x">
<picture> <source media="(min-‐width: 601px)" srcset="medium.jpg 1x, medium-‐2x.jpg 2x"> <source src="small.jpg"> <!-‐-‐ fallback img -‐-‐> <img src="medium.jpg" alt="Iguazu"> <!-‐-‐ alternate text -‐-‐> <p>Iguazu</p> </picture>
<3
SIMPLE CODE
FAST
NOJS
CACHING / CDN
ART DIRECTION
NO BROWSER SUPPORT YET
PICTUREFILL
https://github.com/Wilto/picturefill-proposalhttps://github.com/scottjehl/picturefill
SIMPLE CODE
FAST
NOJS
CACHING / CDN
ART DIRECTION
MORETHERE IS EVEN
HiSRC
Foresight.js
Riloadr rwdImages
Retina.jsResponsive Enhance
DoubletakeContent Aware Resizing
https://docs.google.com/spreadsheet/ccc?key=0Al0lI17fOl9DdDgxTFVoRzFpV3VCdHk2NTBmdVI2OXc#gid=0
Mobify..js
WHAT?a summary
NOW
WHERE POSSIBLE CSS IMAGES
OTHER PICTUREFILL
+ SVG´s
SOMETHINGUSE
please
PROCESSTHE
with grunt
grunt
original
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/' }]
„Don't click this if on a 3G network, it probably take
forever, just check it out when you get home.“
CONTEXT-BASEDIMAGES
forecast:
QUESTIONS?
http://twitter.com/matthiaslau
http://laumatthias.de/
https://www.xing.com/profile/Matthias_Lau