Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

High Performance Images in WordPress

2,062 views

Published on

The web has an image problem. Keith Devon goes through some of the modern techniques available, and what they mean for WordPress developers.

Published in: Internet
  • Be the first to comment

High Performance Images in WordPress

  1. 1. High Performance Images in WordPress WordCamp London April 2016 by Keith Devon
  2. 2. About me Keith Devon ‣ Born in Canada, raised in Northern Ireland, living in Kent, UK ‣ WordPress developer for 6 years ‣ Co-founder of Highrise Digital @keithdevon https://highrise.digital
  3. 3. The problem The problem with images ▸ Too many ▸ Too big ▸ Device pixel ratios (DPR)
  4. 4. The problem Average web page content weight distribution 3% 3% 5% 8% 16% 64% Images Scripts Video Fonts Stylesheets HTML Other http://httparchive.org/interesting.php#bytesperpage
  5. 5. The solution How can we fix our image problem? ▸ Image sprites ▸ Icon fonts ▸ Choosing the right format (.gif, .png, .jpg, SVG, etc.) ▸ Image optimisation (size and compression) ▸ Lazy loading ▸ Responsive images
  6. 6. The solution How can we fix our image problem? ▸ Image sprites ▸ Icon fonts ▸ Choosing the right format (.gif, .png, .jpg, etc.) ▸ Image optimisation (size and compression) ▸ Lazy loading ▸ Responsive images
  7. 7. Image optimisation Image optimisation ▸ Reduce file size of image ▸ Lossy - eliminates some pixel data ▸ Lossless - compresses pixel data ▸ No single best configuration - depends on image ▸ Online tools available
  8. 8. Original iPhone image
 4032 x 3024
 2.1 MB Lossless compression
 4032 x 3024 
 1.89 MB (-6.06%) Lossy compression + resize
 1200 x 900 
 226.19 KB (-89.05%) Lossy compression
 4032 x 3024 
 1.71 MB (-15.13%)
  9. 9. Image optimisation Kraken.io ▸ Free and paid versions ▸ Lossy or lossless options ▸ WP plugin available
  10. 10. Lazy loading Lazy loading ▸ Loads images as they come into view ▸ Saves on initial page weight and HTTP requests ▸ Relies on JavaScript ▸ Lots of JS plugins available ▸ WP plugins available
  11. 11. Responsive images What are responsive images? ▸ RICG ▸ <picture> ▸ srcset=“”sizes=“”
  12. 12. Responsive images What are responsive images? ▸ RICG ▸ <picture> ▸ srcset=“”sizes=“”
  13. 13. Responsive images srcset and sizes ▸ Used to save bandwidth ▸ Appropriate image size depending on context ▸ Browser has final control
  14. 14. Responsive images srcset <img src="small.jpg" srcset="large.jpg 1024w, medium.jpg 640w, small.jpg 320w" alt="A tasty potato"> Example 1 Viewport width = 320px
 Pixel density = 1
 Chosen image* = small.jpg Example 2 Viewport width = 320px
 Pixel density = 2
 Chosen image* = medium.jpg * Probably! (the browser decides)
  15. 15. Responsive images sizes ‣ Tells browser the width that the image will be displayed
  16. 16. Responsive images sizes <img src="small.jpg" srcset="large.jpg 1024w, medium.jpg 640w, small.jpg 320w" sizes="33.3vw" alt="A tasty potato">
  17. 17. Responsive images sizes <img src="small.jpg" srcset="large.jpg 1024w, medium.jpg 640w, small.jpg 320w" sizes="33.3vw" alt="A tasty potato">
  18. 18. Responsive images sizes <img src="small.jpg" srcset="large.jpg 1024w, medium.jpg 640w, small.jpg 320w" sizes=“(min-width: 640px) 33.3vw, 100vw” alt="A tasty potato">
  19. 19. Caniuse screenshot http://caniuse.com/#search=srcset (02/04/16)
  20. 20. Responsive images Responsive images in WordPress ▸ Started with the plugin from RICG ▸ Added to core in 4.4 ▸ Adds srcset and sizes support to content images ▸ New functions ▸ New default image size (‘medium_large’) 768px w ▸ No <picture> support
  21. 21. Responsive images Using responsive images in your theme $img = get_field(‘image’); // get image from ACF field $img_id = $img['ID'];
 $img_src = $img['sizes']['archive'];
 $img_meta = wp_get_attachment_metadata($img_id); $image_html = '<img src="'.$img_src.'" alt="'.$img['alt'].'" />’; echo wp_image_add_srcset_and_sizes ( $image_html, $img_meta, $img_id );
  22. 22. Responsive images Using responsive images in your theme Result <img src="http://potato-passion.com/media/potato-on-table-282x212.jpg" alt="" srcset=“http://potato-passion.com/media/potato-on-table-300x225.jpg 300w, http://potato-passion.com/media/potato-on-table-768x576.jpg 768w, http://potato-passion.com/media/potato-on-table-1600x1200.jpg 1600w, http://potato-passion.com/media/potato-on-table-770x578.jpg 770w, http://potato-passion.com/media/potato-on-table-282x212.jpg 282w, sizes="(max-width: 282px) 100vw, 282px">
  23. 23. Responsive images Using responsive images in your theme Other thoughts ▸ Customise the ‘sizes’ output using wp_calculate_image_sizes() filter ▸ Default is better than nothing
  24. 24. Responsive images wp-lazysizes ▸ The daddy of image plugins ▸ Lazy loading AND responsive images ▸ Works out ‘sizes’ attribute for you ▸ https://github.com/aFarkas/wp-lazysizes ▸ Caveat: I haven’t used this in production yet!
  25. 25. Summary What did we learn? ▸ We have an image problem ▸ We have the tools to solve it! ▸ Optimise your images ▸ Lazy-load your images ▸ Use responsive images
  26. 26. THANKS! @keithdevon

×