Shipping Responsive Images to 25% of the Web

This presentation on responsive images in WordPress was given at the 2016 php[tek] conference in St. Louis, MO.

Transcript

1. Shipping Responsive Images To 25% Of The Web Joe McGill @joemcgill
3. Share what you know.
4. the image element <img src="file.jpg" alt="…">
5. Avg. web page size May 2016 2.5 MB
6. Images = 1.5 MB (60%)
7. the image element <img src="file.jpg" alt="…">
8. RICG Responsive Images Issues Community Group
9. – Josiah Bartlet* “Decisions are made by those
 who show up.”
10. An overview of responsive 
 image use cases • Display size (resolution/viewport) • Device density (retina devices) • Art direction More at: usecases.responsiveimages.org
11. Display Size resolution differences viewport layout changes
12. 2x 1x Display Density Photo by Cal Evans, CC BY-SA 2.0
13. Art Direction
14. the image element <img src="file.jpg" alt="…">
15. ¯\_(ツ)_/¯ Just Use JavaScript™
16. Responsive Image HTML • srcset (x descriptors) • srcset (w descriptors) + sizes • The <picture> element
17. srcset + x descriptors <img src="file.jpg" alt="…" srcset="file.jpg, file-2x.jpg 2x">
18. srcset + w descriptors <img src="file.jpg" alt="…" srcset="file.jpg 300w, file-2x.jpg 600w, file-4x.jpg 1200w"> NOTE: The browser doesn’t know the display size of the 
 image, so it assumes 100% of the viewport width.
19. srcset + sizes <img src="file.jpg" alt="…" srcset="file.jpg 400w, file-2x.jpg 800w, file-3x.jpg 1200w" sizes="(max-width: 400px) 100vw, 
 (max-width: 980px) 50vw, 400px" >
20. <picture> <picture> <source srcset="large.jpg" media="(min- width: 900px)"> <source srcset="medium.jpg" media="(min- width: 600px)"> <img src="small.jpg" alt="…"> <picture>
21. Jason Grigsby: Responsive Images 101
22. - The WordPress Foundation “Democratize publishing”
23. WordPress ❤ ’s srcset + sizes • WordPress automatically creates extra sizes when you upload an image (e.g., thumbnail, medium, large, etc.) • Add your own custom sizes with add_image_size() • WP includes same ratio image sizes in srcset
24. Automatically resize uploaded images ImageMagick
 or GD
25. add_image_size() // Soft resize add_image_size( 'custom-size', 220, 180 ); // Hard crop add_image_size( 'custom-size', 220, 180, true );
26. The Sizes Dilemma • The sizes attribute tells the browser about the layout of the image. • The image layout is dependent on your theme’s CSS rules.
27. A smart default <img src="…" width="600" height="400" alt="…" > sizes="(max-width: 600px) 100vw, 600px"
28. Customizing the sizes attribute add_filter( 'wp_calculate_image_sizes', 'my_sizes_filter' ); function my_sizes_filter() { return '(max-width: 37em) 85vw, (max-width: 45em) 67vw, 840px'; } WP.org code reference
29. calculating sizes attributes • Start your browser at a small width and write down image widths at each breakpoint. • Tip: use calc() to combine relative and fixed size calculations.
30. - The WordPress Foundation “Democratize publishing”
31. Shipped in WordPress 4.4 Dec. 2015
32. Image size reductions • 99% reduction in image file size (mobiforge.com) • WP 4.5 includes advanced image compression with up to 50% reduction in file sizes
33. “The future will be made by those who show up.”
34. THANK YOU Joe McGill @joemcgill • joemcgill.net https://joind.in/talk/2acd0