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.",
}
!
A LOT!OPTIMIZED
THEY
!
FOR SMALL VIEWPORTSLARGE IMAGES
STILL...
RESPONSIVE DESIGNRESPONSIBLE
!
WANT!WE
WHAT
IMAGESOPTIMIZED
IMAGESOPTIMIZED
IMAGESOPTIMIZED
!
DIRECTIONART
!
IMAGESFAST
!
JAVASCRIPT
IT SHOULD
ALSO WORK WITHOUT
CACHING / CDN
<img src="/img/funny-‐cat.jpg">
!
CODESIMPLE
<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>
!
ANYMORESIMPLE
NOT
TECHNIQUESRESPONSIVE IMAGE
http://matthiaslau.github.io/responsive-images/
SVG´sUSE
BACKGROUNDSCSS
BACKGROUNDSCSS
#iguazu { background-‐image: url(small.jpg); } @media screen and (min-‐width: 40em) { #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 (min-‐width:21em){ svg{ background-‐image:url(http://matthiaslau.github.io/responsive-‐images/img/medium.jpg); } } @media screen and (min-‐width:40em){ […] } </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+
<img alt="Iguazu" src="medium.jpg" srcset="medium.jpg 1x, medium-‐2x.jpg 2x">
<picture> <source media="(min-‐width: 40em)" src="medium.jpg"> <!-‐-‐ fallback img -‐-‐> <img src="medium.jpg" alt="Iguazu"> </picture>
<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>
THE FANCY STUFFLET´S DO ALL
VIEWPORT SIZEIS NOT BLOCK SIZE
excursion:
<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>
<3
SIMPLE CODE
FAST
NOJS
CACHING / CDN
ART DIRECTION
NO BROWSER SUPPORT YET
PICTUREFILL
https://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
„Don't click this if on a 3G network, it probably take
forever, just check it out when you get home.“
SOMETHINGUSE
please
WHERE POSSIBLE CSS IMAGES
OTHER PICTUREFILL
+ SVG´s
CONTEXT-BASEDIMAGES
forecast:
IMAGESE-COMMERCE
QUESTIONS?
http://twitter.com/matthiaslau
http://laumatthias.de/
https://www.xing.com/profile/Matthias_Lau
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/' }]
Recommended
