Responsive Images for Everybody

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

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