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.

7cef1c9108207ec24db7a40f142db676?s=128

Joe McGill

June 14, 2015
Tweet

Transcript

  1. RESPONSIVE IMAGES
 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