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

Shipping Responsive Images to 25% of the Web

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.


Joe McGill

May 26, 2016


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

  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

  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

  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