![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 );](https://image.slidesharecdn.com/highperformanceimagesinwordpress-lightningpdf-160410091424/85/High-Performance-Images-in-WordPress-23-320.jpg)
High Performance Images in WordPress
- 1. High Performance Images in WordPress WordCamp London April 2016 by Keith Devon
- 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. The problem The problem with images ▸ Too many ▸ Too big ▸ Device pixel ratios (DPR)
- 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. 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. 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. 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. 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. Image optimisation Kraken.io ▸ Free and paid versions ▸ Lossy or lossless options ▸ WP plugin available
- 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
- 12. Responsive images What are responsive images? ▸ RICG ▸ <picture> ▸ srcset=“”sizes=“”
- 13. Responsive images What are responsive images? ▸ RICG ▸ <picture> ▸ srcset=“”sizes=“”
- 14. Responsive images srcset and sizes ▸ Used to save bandwidth ▸ Appropriate image size depending on context ▸ Browser has final control
- 15. 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)
- 16. Responsive images sizes ‣ Tells browser the width that the image will be displayed
- 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. Responsive images sizes <img src="small.jpg" srcset="large.jpg 1024w, medium.jpg 640w, small.jpg 320w" sizes="33.3vw" alt="A tasty potato">
- 20. 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">
- 22. 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
- 23. 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 );
- 24. 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">
- 25. 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
- 26. 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!
- 27. 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