Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Responsive Images for Everybody

Responsive Images for Everybody

Slides from my talk at WordCamp Denver 2015, explaining the responsive image solutions that you can use today.


Joe McGill

June 14, 2015


 FOR EVERYBODY Joe McGill @joemcgill

  2. Avg. web page size May 2015 2 MB

  3. Images = 1.3 MB

  4. TL;DR We are visually oriented, but we need to be

    responsible with our use of images.
  5. RICG Responsive Images Community Group

  6. ¯\_(ツ)_/¯ Just Use JavaScript™

  7. New HTML Tools • The <picture> element • The srcset

    attribute • The sizes attribute • *Picturefill for compatibility
  8. 800px 400px Resolution Switching

  9. Resolution Switching • Screen size • Pixel density • Layout

    changes (e.g., grids)
  10. Art Direction

  11. Art Direction

  12. the image element <img src="file.jpg" alt="a photo">

  13. srcset & x descriptors <img src="file.jpg" alt="a photo" srcset="file.jpg, file-2x.jpg

    2x"> 34 38 Edge* 21 7.1/iOS 8.3
  14. srcset & w descriptors <img src="file.jpg" alt="a photo" srcset="file.jpg 300w,

    file-2x.jpg 600w,
 file-4x.jpg 1200w"> 38 38 TBD 25 9*/iOS9
  15. srcset + sizes = ! <img src="file.jpg" alt="a photo" srcset="file.jpg

    400w, file-2x.jpg 800w,
 file-3x.jpg 1200w"
 sizes="(max-width: 400px) 100vw, (max-width: 980px) 50vw, 400px" >
  16. <picture> <picture> <source media="…" srcset="…"> <source media="…" srcset="…"> <img src="…"

    alt="…"> </picture> 38 38 TBD 25 9*/iOS9
  17. <picture> <picture> <source media="(min-width: 1200px)"
 srcset="file-lg.jpg, file-lg-2x.jpg 2x"> <source media="(min-width:

    900px)" srcset="file-md.jpg, file-md-2x 2x.jpg"> <img srcset="file-sm.jpg, file-sm-2x.jpg 2x"
 alt="a nice photo"> </picture>
  18. RICG Responsive Images Plugin https://wordpress.org/plugins/ricg-responsive-images/ WP Slack: #feature-respimg

  19. Picturefill
 http://scottjehl.github.io/picturefill/ • UPDATE TO 2.3.1 (pretty please) • Using

    src & srcset can cause double downloads in some browsers
  20. Learn more • responsiveimages.org • Jason Grigsby: Responsive Images 101

    (blog.cloudfour.com) • Eric Portis: Responsive Images in Practice (A List Apart)
  21. THANK YOU Joe McGill @joemcgill • joemcgill.net