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
