Shipping Responsive Images to 25% of the Web

Transcript

1. Shipping Responsive Images To 25% Of The Web Joe McGill

   @joemcgill
2. None

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