The Big Picture: Responsive Images in Action #scd14
74
THE BIG PICTURE . responsive images in action PRESENTED BY MATTHIAS LAU
-
Upload
matthias-lau -
Category
Technology
-
view
302 -
download
1
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 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.
Transcript of The Big Picture: Responsive Images in Action #scd14
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/' }]
