Responsive images in the
wild
Vlad Zelinschi
Front-end developer @
@vladzelinschi
var codecamper = ‘you’;
if (codecamper && ‘responsive images’)
{
console.log(‘Happy!’);
}
else
{
console.log(‘Oh no!’);
}
var codecamper = ‘you’;
if (codecamper && ‘responsive images’)
{
console.log(‘Happy!’);
}
else
{
console.log(‘Oh no!’);
}
Responsive
images
Responsive
images
‘’Responsive’’ +/- ‘’design’’

• term(s) coined by Ethan Marcotte in 2010 in an
article written for A list apart
• a new m...
Responsive design challenges

• it’s a must in these days
• users want the same (if not better) experience

• compatibilit...
responsive

Images
Images

• visual impact
• create & define user emotions
• art
• no img = designer will kill you
• a big/ important part of...
http://httparchive.org/interesting.php - sept, 15, 2013
http://httparchive.org/interesting.php - sept, 15, 2013
Responsive design limitations
+
HQ lovely images
=
...
Performance is a must also because...

• starting from 2010 Google includes loading time in
Page Rank

• for online busine...
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 se...
The
DON’T DO THIS OR I WILL
PERSONALLY TRACK YOU
AND KILL YOU IN YOUR
SLEEP
example
Site::after
Site summary
• no distinction between mobile/desktop images

• 285 requests
• 13.6 MB transferred (no cache)

• onLoad eve...
Main problem

Serve the user only what he needs in terms of:
• bytes
• image resolution
Also don’t break the layout and ke...
Solution one (CSS)

div {
background-image: url(img/large.png);

@media screen and (max-width: 600px) {
background-image: ...
Advantages
• easy to implement

• good user control (because of mq)
• multiple backgrounds

Disadvantages
• no separation ...
Solution two (SVG)

• late recommendation from W3C
• vectors, vectors, vectors...
• use it as image source, background-ima...
Advantages
• scales nicely, no blur, vector based

• lots of possibilities
• one request

Disadvantages
• no IE 8 (that’s ...
Solution three - picturefill.js

<span data-picture>
<span data-src="medium.jpg"
data-media="(min-width: 400px)">
</span>
...
Advantages
• lightweight ~0.5kb
• better semantics because of img
• good browser support (even IE8 and non-js browsers
if ...
Future solutions

• picture element and srcset attribute
• proposed, not yet implemented
• can (and should) be used togeth...
<picture>
<source media="(min-width: 45em)"
src="large.jpg">
<source media="(min-width: 18em)"
src="med.jpg">
<source src=...
Advantages
• it will be a native solution (someday....)
• control everything from markup

Disadvantages
• nasty markup...A...
Thoughts and things to look after
• think about server too (resize after upload, Matt
Wilcox’s adaptive images)
• always, ...
Conclusion
There is no
perfect solution!
How to chose your solution
• do I have legacy content I can’t update/modify
• do I care about semantics, validity and acce...
Take away

• have a strategy from the beginning
• analyze & try to predict problems

• chose depending on your context
• D...
Further resources
• http://alistapart.com/article/responsive-web-design
• http://httparchive.org/interesting.php

• http:/...
Q&A
Vlad Zelinschi
@vladzelinschi
Iasi code camp 12 october 2013 responsive images in the wild-vlad zelinschi
Iasi code camp 12 october 2013 responsive images in the wild-vlad zelinschi
Iasi code camp 12 october 2013 responsive images in the wild-vlad zelinschi
Iasi code camp 12 october 2013 responsive images in the wild-vlad zelinschi
Iasi code camp 12 october 2013 responsive images in the wild-vlad zelinschi
Iasi code camp 12 october 2013 responsive images in the wild-vlad zelinschi
Iasi code camp 12 october 2013 responsive images in the wild-vlad zelinschi
Iasi code camp 12 october 2013 responsive images in the wild-vlad zelinschi
Upcoming SlideShare
Loading in …5
×

Iasi code camp 12 october 2013 responsive images in the wild-vlad zelinschi

527 views

Published on

Published in: Technology, Design
  • Be the first to comment

  • Be the first to like this

Iasi code camp 12 october 2013 responsive images in the wild-vlad zelinschi

  1. 1. Responsive images in the wild Vlad Zelinschi Front-end developer @ @vladzelinschi
  2. 2. var codecamper = ‘you’; if (codecamper && ‘responsive images’) { console.log(‘Happy!’); } else { console.log(‘Oh no!’); }
  3. 3. var codecamper = ‘you’; if (codecamper && ‘responsive images’) { console.log(‘Happy!’); } else { console.log(‘Oh no!’); }
  4. 4. Responsive images
  5. 5. Responsive images
  6. 6. ‘’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
  7. 7. 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
  8. 8. responsive Images
  9. 9. Images • visual impact • create & define user emotions • art • no img = designer will kill you • a big/ important part of the web
  10. 10. http://httparchive.org/interesting.php - sept, 15, 2013
  11. 11. http://httparchive.org/interesting.php - sept, 15, 2013
  12. 12. Responsive design limitations + HQ lovely images = ...
  13. 13. 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.
  14. 14. 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
  15. 15. The DON’T DO THIS OR I WILL PERSONALLY TRACK YOU AND KILL YOU IN YOUR SLEEP example
  16. 16. Site::after
  17. 17. 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...)
  18. 18. 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
  19. 19. Solution one (CSS) div { background-image: url(img/large.png); @media screen and (max-width: 600px) { background-image: url(img/small.png); } }
  20. 20. 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)
  21. 21. Solution two (SVG) • late recommendation from W3C • vectors, vectors, vectors... • use it as image source, background-image, directly in your markup, data-uri, etc.
  22. 22. 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)
  23. 23. 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>
  24. 24. 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
  25. 25. 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
  26. 26. <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>
  27. 27. 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...)
  28. 28. 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);
  29. 29. Conclusion
  30. 30. There is no perfect solution!
  31. 31. 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
  32. 32. Take away • have a strategy from the beginning • analyze & try to predict problems • chose depending on your context • DO NOT MAKE ASSUMPTIONS!
  33. 33. Further resources • http://alistapart.com/article/responsive-web-design • http://httparchive.org/interesting.php • http://googlewebmastercentral.blogspot.ro/2010/04/using-site-speed-inweb-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-imagesperformance-problem-case-study/ • http://mobile.smashingmagazine.com/2013/07/22/simple-responsiveimages-with-css-backgrounds/
  34. 34. Q&A Vlad Zelinschi @vladzelinschi

×