iasi code camp 12 october 2013 responsive images in the wild-vlad zelinschi
DESCRIPTION
TRANSCRIPT
![Page 1: Iasi code camp 12 october 2013 responsive images in the wild-vlad zelinschi](https://reader035.vdocuments.site/reader035/viewer/2022062512/553aa594550346b9328b45ac/html5/thumbnails/1.jpg)
Responsive images in the wild
Vlad Zelinschi
@vladzelinschi
Front-end developer @
![Page 2: Iasi code camp 12 october 2013 responsive images in the wild-vlad zelinschi](https://reader035.vdocuments.site/reader035/viewer/2022062512/553aa594550346b9328b45ac/html5/thumbnails/2.jpg)
![Page 3: Iasi code camp 12 october 2013 responsive images in the wild-vlad zelinschi](https://reader035.vdocuments.site/reader035/viewer/2022062512/553aa594550346b9328b45ac/html5/thumbnails/3.jpg)
var codecamper = ‘you’;
if (codecamper && ‘responsive images’){
console.log(‘Happy!’);}else{
console.log(‘Oh no!’);}
![Page 4: Iasi code camp 12 october 2013 responsive images in the wild-vlad zelinschi](https://reader035.vdocuments.site/reader035/viewer/2022062512/553aa594550346b9328b45ac/html5/thumbnails/4.jpg)
var codecamper = ‘you’;
if (codecamper && ‘responsive images’){
console.log(‘Happy!’);}else{
console.log(‘Oh no!’);}
![Page 5: Iasi code camp 12 october 2013 responsive images in the wild-vlad zelinschi](https://reader035.vdocuments.site/reader035/viewer/2022062512/553aa594550346b9328b45ac/html5/thumbnails/5.jpg)
Responsiveimages
![Page 6: Iasi code camp 12 october 2013 responsive images in the wild-vlad zelinschi](https://reader035.vdocuments.site/reader035/viewer/2022062512/553aa594550346b9328b45ac/html5/thumbnails/6.jpg)
Responsiveimages
![Page 7: Iasi code camp 12 october 2013 responsive images in the wild-vlad zelinschi](https://reader035.vdocuments.site/reader035/viewer/2022062512/553aa594550346b9328b45ac/html5/thumbnails/7.jpg)
‘’Responsive’’ +/- ‘’design’’
• term(s) coined by Ethan Marcotte in 2010 in an article written for A list apart
• a new mindset
• invaded by a plethora of devices
• break from standard web development process
![Page 8: Iasi code camp 12 october 2013 responsive images in the wild-vlad zelinschi](https://reader035.vdocuments.site/reader035/viewer/2022062512/553aa594550346b9328b45ac/html5/thumbnails/8.jpg)
Responsive design challenges
• it’s a must in these days
• users want the same (if not better) experience
• compatibility & A LOT of devices
• bandwith, slow connectivity, latency, data traffic plan
![Page 9: Iasi code camp 12 october 2013 responsive images in the wild-vlad zelinschi](https://reader035.vdocuments.site/reader035/viewer/2022062512/553aa594550346b9328b45ac/html5/thumbnails/9.jpg)
responsive
Images
![Page 10: Iasi code camp 12 october 2013 responsive images in the wild-vlad zelinschi](https://reader035.vdocuments.site/reader035/viewer/2022062512/553aa594550346b9328b45ac/html5/thumbnails/10.jpg)
Images
• visual impact
• create & define user emotions
• art
• no img = designer will kill you
• a big/ important part of the web
![Page 11: Iasi code camp 12 october 2013 responsive images in the wild-vlad zelinschi](https://reader035.vdocuments.site/reader035/viewer/2022062512/553aa594550346b9328b45ac/html5/thumbnails/11.jpg)
http://httparchive.org/interesting.php - sept, 15, 2013
![Page 12: Iasi code camp 12 october 2013 responsive images in the wild-vlad zelinschi](https://reader035.vdocuments.site/reader035/viewer/2022062512/553aa594550346b9328b45ac/html5/thumbnails/12.jpg)
http://httparchive.org/interesting.php - sept, 15, 2013
![Page 13: Iasi code camp 12 october 2013 responsive images in the wild-vlad zelinschi](https://reader035.vdocuments.site/reader035/viewer/2022062512/553aa594550346b9328b45ac/html5/thumbnails/13.jpg)
Responsive design limitations
+HQ lovely images
=...
![Page 14: Iasi code camp 12 october 2013 responsive images in the wild-vlad zelinschi](https://reader035.vdocuments.site/reader035/viewer/2022062512/553aa594550346b9328b45ac/html5/thumbnails/14.jpg)
![Page 15: Iasi code camp 12 october 2013 responsive images in the wild-vlad zelinschi](https://reader035.vdocuments.site/reader035/viewer/2022062512/553aa594550346b9328b45ac/html5/thumbnails/15.jpg)
Performance is a must also because...
• starting from 2010 Google includes loading time in Page Rank
• for online businesses every wasted second is lost money
• your product is a reflection of who you are as a company/developer/etc.
![Page 16: Iasi code camp 12 october 2013 responsive images in the wild-vlad zelinschi](https://reader035.vdocuments.site/reader035/viewer/2022062512/553aa594550346b9328b45ac/html5/thumbnails/16.jpg)
47% of users expect a web page to load in two
seconds
40% of users will abandon a web page if it takes more than three seconds to load
![Page 17: Iasi code camp 12 october 2013 responsive images in the wild-vlad zelinschi](https://reader035.vdocuments.site/reader035/viewer/2022062512/553aa594550346b9328b45ac/html5/thumbnails/17.jpg)
TheDON’T DO THIS OR I WILL PERSONALLY TRACK YOU AND KILL YOU IN YOUR
SLEEPexample
![Page 18: Iasi code camp 12 october 2013 responsive images in the wild-vlad zelinschi](https://reader035.vdocuments.site/reader035/viewer/2022062512/553aa594550346b9328b45ac/html5/thumbnails/18.jpg)
![Page 19: Iasi code camp 12 october 2013 responsive images in the wild-vlad zelinschi](https://reader035.vdocuments.site/reader035/viewer/2022062512/553aa594550346b9328b45ac/html5/thumbnails/19.jpg)
Site::after
![Page 20: Iasi code camp 12 october 2013 responsive images in the wild-vlad zelinschi](https://reader035.vdocuments.site/reader035/viewer/2022062512/553aa594550346b9328b45ac/html5/thumbnails/20.jpg)
Site summary
• no distinction between mobile/desktop images
• 285 requests
• 13.6 MB transferred (no cache)
• onLoad event after 11s (on cable connection)
• 181 images requests = 7.2 MB
• it’s OPTIMIZED! (no kidding...)
![Page 21: Iasi code camp 12 october 2013 responsive images in the wild-vlad zelinschi](https://reader035.vdocuments.site/reader035/viewer/2022062512/553aa594550346b9328b45ac/html5/thumbnails/21.jpg)
![Page 22: Iasi code camp 12 october 2013 responsive images in the wild-vlad zelinschi](https://reader035.vdocuments.site/reader035/viewer/2022062512/553aa594550346b9328b45ac/html5/thumbnails/22.jpg)
![Page 23: Iasi code camp 12 october 2013 responsive images in the wild-vlad zelinschi](https://reader035.vdocuments.site/reader035/viewer/2022062512/553aa594550346b9328b45ac/html5/thumbnails/23.jpg)
![Page 24: Iasi code camp 12 october 2013 responsive images in the wild-vlad zelinschi](https://reader035.vdocuments.site/reader035/viewer/2022062512/553aa594550346b9328b45ac/html5/thumbnails/24.jpg)
Main problem
Serve the user only what he needs in terms of:
• bytes
• image resolution
Also don’t break the layout and keep the site fluid and adaptive
![Page 25: Iasi code camp 12 october 2013 responsive images in the wild-vlad zelinschi](https://reader035.vdocuments.site/reader035/viewer/2022062512/553aa594550346b9328b45ac/html5/thumbnails/25.jpg)
Solution one (CSS)
div {
background-image: url(img/large.png);
@media screen and (max-width: 600px) {
background-image: url(img/small.png);
}
}
![Page 26: Iasi code camp 12 october 2013 responsive images in the wild-vlad zelinschi](https://reader035.vdocuments.site/reader035/viewer/2022062512/553aa594550346b9328b45ac/html5/thumbnails/26.jpg)
Advantages
• easy to implement
• good user control (because of mq)
•multiple backgrounds
Disadvantages• no separation of style & content
• losing semantics (add role=‘’img”)
• request each time (ex: browser resize)
![Page 27: Iasi code camp 12 october 2013 responsive images in the wild-vlad zelinschi](https://reader035.vdocuments.site/reader035/viewer/2022062512/553aa594550346b9328b45ac/html5/thumbnails/27.jpg)
Solution two (SVG)
• late recommendation from W3C
• vectors, vectors, vectors...
• use it as image source, background-image, directly in your markup, data-uri, etc.
![Page 28: Iasi code camp 12 october 2013 responsive images in the wild-vlad zelinschi](https://reader035.vdocuments.site/reader035/viewer/2022062512/553aa594550346b9328b45ac/html5/thumbnails/28.jpg)
Advantages
• scales nicely, no blur, vector based
• lots of possibilities
• one request
Disadvantages
• no IE 8 (that’s a shame...)
• no Android 2.3 or lower
• complex shapes can take up lots of space (bytes)
![Page 29: Iasi code camp 12 october 2013 responsive images in the wild-vlad zelinschi](https://reader035.vdocuments.site/reader035/viewer/2022062512/553aa594550346b9328b45ac/html5/thumbnails/29.jpg)
Solution three - picturefill.js
<span data-picture> <span data-src="medium.jpg" data-media="(min-width: 400px)"> </span> <span data-src="large.jpg" data-media="(min-width: 800px)"> </span> <!-- Non-JS browsers --> <noscript> <img src="external/img/small.jpg"> </noscript></span>
![Page 30: Iasi code camp 12 october 2013 responsive images in the wild-vlad zelinschi](https://reader035.vdocuments.site/reader035/viewer/2022062512/553aa594550346b9328b45ac/html5/thumbnails/30.jpg)
Advantages
• lightweight ~0.5kb
• better semantics because of img
• good browser support (even IE8 and non-js browsers if needed)
• support for retina
Disadvantages
• nasty markup
![Page 31: Iasi code camp 12 october 2013 responsive images in the wild-vlad zelinschi](https://reader035.vdocuments.site/reader035/viewer/2022062512/553aa594550346b9328b45ac/html5/thumbnails/31.jpg)
Future solutions
• picture element and srcset attribute
• proposed, not yet implemented
• can (and should) be used together
• aim to solve the responsive images problem and keep things coupled in markup only
![Page 32: Iasi code camp 12 october 2013 responsive images in the wild-vlad zelinschi](https://reader035.vdocuments.site/reader035/viewer/2022062512/553aa594550346b9328b45ac/html5/thumbnails/32.jpg)
<picture> <source media="(min-width: 45em)" src="large.jpg"> <source media="(min-width: 18em)" src="med.jpg"> <source src="small.jpg"> <img src="small.jpg"> <p>Accessible text</p></picture>
<picture> <source media="(min-width: 45em)" srcset="large.jpg 2x">
<!-- assume media all --> <source srcset="small.jpg 1x, small.jpg 2x"></picture>
![Page 33: Iasi code camp 12 october 2013 responsive images in the wild-vlad zelinschi](https://reader035.vdocuments.site/reader035/viewer/2022062512/553aa594550346b9328b45ac/html5/thumbnails/33.jpg)
Advantages
• it will be a native solution (someday....)
• control everything from markup
Disadvantages
• nasty markup...AGAIN!
• based only on device resolution & DPR
• it will be a native solution (someday...)
![Page 34: Iasi code camp 12 october 2013 responsive images in the wild-vlad zelinschi](https://reader035.vdocuments.site/reader035/viewer/2022062512/553aa594550346b9328b45ac/html5/thumbnails/34.jpg)
Thoughts and things to look after
• think about server too (resize after upload, Matt Wilcox’s adaptive images)
• always, always, ALWAYS optimize your images (Grunt tasks, online services, CLI, etc.)
•NetworkInformation.connection (experimental – only in Android, Gecko 12.0 and above)
var conn = navigator.connection;
console.log(conn.speed);
![Page 35: Iasi code camp 12 october 2013 responsive images in the wild-vlad zelinschi](https://reader035.vdocuments.site/reader035/viewer/2022062512/553aa594550346b9328b45ac/html5/thumbnails/35.jpg)
Conclusion
![Page 36: Iasi code camp 12 october 2013 responsive images in the wild-vlad zelinschi](https://reader035.vdocuments.site/reader035/viewer/2022062512/553aa594550346b9328b45ac/html5/thumbnails/36.jpg)
![Page 37: Iasi code camp 12 october 2013 responsive images in the wild-vlad zelinschi](https://reader035.vdocuments.site/reader035/viewer/2022062512/553aa594550346b9328b45ac/html5/thumbnails/37.jpg)
There is no perfect solution!
![Page 38: Iasi code camp 12 october 2013 responsive images in the wild-vlad zelinschi](https://reader035.vdocuments.site/reader035/viewer/2022062512/553aa594550346b9328b45ac/html5/thumbnails/38.jpg)
How to chose your solution
• do I have legacy content I can’t update/modify
• do I care about semantics, validity and accessibility
• do I care about non-JS users
• can I afford extra requests
• is a 3rd party solution acceptable (cloud services, etc.)
• browser legacy & support
![Page 39: Iasi code camp 12 october 2013 responsive images in the wild-vlad zelinschi](https://reader035.vdocuments.site/reader035/viewer/2022062512/553aa594550346b9328b45ac/html5/thumbnails/39.jpg)
Take away
• have a strategy from the beginning
• analyze & try to predict problems
• chose depending on your context
•DO NOT MAKE ASSUMPTIONS!
![Page 40: Iasi code camp 12 october 2013 responsive images in the wild-vlad zelinschi](https://reader035.vdocuments.site/reader035/viewer/2022062512/553aa594550346b9328b45ac/html5/thumbnails/40.jpg)
![Page 41: Iasi code camp 12 october 2013 responsive images in the wild-vlad zelinschi](https://reader035.vdocuments.site/reader035/viewer/2022062512/553aa594550346b9328b45ac/html5/thumbnails/41.jpg)
Further resources
• http://alistapart.com/article/responsive-web-design
• http://httparchive.org/interesting.php
• http://googlewebmastercentral.blogspot.ro/2010/04/using-site-speed-in-web-search-ranking.html
• https://github.com/scottjehl/picturefill
• http://www.w3.org/TR/html-picture-element/
• http://www.w3.org/html/wg/drafts/srcset/w3c-srcset/
• http://adaptive-images.com/
• http://addyosmani.com/blog/image-optimization-tools/
• http://www.netvlies.nl/blog/design-interactie/retina-revolution
• http://css-tricks.com/which-responsive-images-solution-should-you-use/
• http://mobile.smashingmagazine.com/2013/09/16/responsive-images-performance-problem-case-study/
• http://mobile.smashingmagazine.com/2013/07/22/simple-responsive-images-with-css-backgrounds/
![Page 42: Iasi code camp 12 october 2013 responsive images in the wild-vlad zelinschi](https://reader035.vdocuments.site/reader035/viewer/2022062512/553aa594550346b9328b45ac/html5/thumbnails/42.jpg)
Q & AVlad Zelinschi
@vladzelinschi