![Page 1: Ultimate Guide to Image Optimisation in WordPress](https://reader030.vdocuments.net/reader030/viewer/2022020410/587eb69e1a28abbb688b61d5/html5/thumbnails/1.jpg)
The Ultimate(?) Guide to Image Optimisation.
Steven Jones@stompweb
![Page 2: Ultimate Guide to Image Optimisation in WordPress](https://reader030.vdocuments.net/reader030/viewer/2022020410/587eb69e1a28abbb688b61d5/html5/thumbnails/2.jpg)
Why focus on images?
![Page 3: Ultimate Guide to Image Optimisation in WordPress](https://reader030.vdocuments.net/reader030/viewer/2022020410/587eb69e1a28abbb688b61d5/html5/thumbnails/3.jpg)
Issues.
1. File Size2. File Types3. Image sizes/proportions4. Delivery Method5. Appearance6. Responsive
![Page 4: Ultimate Guide to Image Optimisation in WordPress](https://reader030.vdocuments.net/reader030/viewer/2022020410/587eb69e1a28abbb688b61d5/html5/thumbnails/4.jpg)
File Size.
Problem #1Images are being loaded onto the site directly from a camera’sSD card.
Reduce the baseline file size that can be uploaded.
Imsanity : https://wordpress.org/plugins/imsanity/
Solution
![Page 5: Ultimate Guide to Image Optimisation in WordPress](https://reader030.vdocuments.net/reader030/viewer/2022020410/587eb69e1a28abbb688b61d5/html5/thumbnails/5.jpg)
File Size.
Problem #2Even after ensuring that images output on your website arenot too big, file sizes are still large.
Compress images in your media library.
Kraken : https://wordpress.org/plugins/kraken-image-optimizer/
EWWW Image Optimizer : https://wordpress.org/plugins/ewww-image-optimizer/
Solution
![Page 6: Ultimate Guide to Image Optimisation in WordPress](https://reader030.vdocuments.net/reader030/viewer/2022020410/587eb69e1a28abbb688b61d5/html5/thumbnails/6.jpg)
File Size.
Problem #3Images that are part of your theme aren’t optimised.
Use a task runner such as Gulp to automate the compressionof your assets.
gulp-imagemin : https://www.npmjs.com/package/gulp-imagemin/
Solution
![Page 7: Ultimate Guide to Image Optimisation in WordPress](https://reader030.vdocuments.net/reader030/viewer/2022020410/587eb69e1a28abbb688b61d5/html5/thumbnails/7.jpg)
File Types.
1. JPG2. PNG3. GIF4. SVG5. WEBP
![Page 8: Ultimate Guide to Image Optimisation in WordPress](https://reader030.vdocuments.net/reader030/viewer/2022020410/587eb69e1a28abbb688b61d5/html5/thumbnails/8.jpg)
File Types.
JPG - 25KB PNG - 50KB
![Page 9: Ultimate Guide to Image Optimisation in WordPress](https://reader030.vdocuments.net/reader030/viewer/2022020410/587eb69e1a28abbb688b61d5/html5/thumbnails/9.jpg)
File Types.
JPG - 150KB PNG - 20KB
![Page 10: Ultimate Guide to Image Optimisation in WordPress](https://reader030.vdocuments.net/reader030/viewer/2022020410/587eb69e1a28abbb688b61d5/html5/thumbnails/10.jpg)
File sizes/proportions.
ProblemThere is a space for a 700px x 400px image on your site butyour client has uploaded images that are 2000px x 800px.
Use add_image_size() to create different images on upload.Solution
![Page 11: Ultimate Guide to Image Optimisation in WordPress](https://reader030.vdocuments.net/reader030/viewer/2022020410/587eb69e1a28abbb688b61d5/html5/thumbnails/11.jpg)
File sizes/proportions.
![Page 12: Ultimate Guide to Image Optimisation in WordPress](https://reader030.vdocuments.net/reader030/viewer/2022020410/587eb69e1a28abbb688b61d5/html5/thumbnails/12.jpg)
File sizes/proportions.
add_image_size( 'wordpress-thumbnail', 200, 200, FALSE );add_image_size( 'wordpress-thumbnail', 200, 200, FALSE );
![Page 13: Ultimate Guide to Image Optimisation in WordPress](https://reader030.vdocuments.net/reader030/viewer/2022020410/587eb69e1a28abbb688b61d5/html5/thumbnails/13.jpg)
File sizes/proportions.
add_image_size( 'wordpress-thumbnail', 200, 200, TRUE );
![Page 14: Ultimate Guide to Image Optimisation in WordPress](https://reader030.vdocuments.net/reader030/viewer/2022020410/587eb69e1a28abbb688b61d5/html5/thumbnails/14.jpg)
File sizes/proportions.
add_image_size( 'wordpress-thumbnail', 200, 200, array( 'left', 'top' ) );
![Page 15: Ultimate Guide to Image Optimisation in WordPress](https://reader030.vdocuments.net/reader030/viewer/2022020410/587eb69e1a28abbb688b61d5/html5/thumbnails/15.jpg)
File sizes/proportions.
ProblemYou have used add_image_size() but existing images arenot the correct size.
Regenerate images.
Regenerate Thumbnails : https://wordpress.org/plugins/regenerate-thumbnails/
Solution
![Page 16: Ultimate Guide to Image Optimisation in WordPress](https://reader030.vdocuments.net/reader030/viewer/2022020410/587eb69e1a28abbb688b61d5/html5/thumbnails/16.jpg)
File sizes/proportions.
ProblemYou have 1000s of images in the media library but only needa certain size for a few specific images.
Generate images on-the-fly
WPThumb : https://wordpress.org/plugins/wp-thumb/
vt_resize() : https://www.seedprod.com/dynamically-resize-wordpress-images-on-the-fly/
Solution
![Page 17: Ultimate Guide to Image Optimisation in WordPress](https://reader030.vdocuments.net/reader030/viewer/2022020410/587eb69e1a28abbb688b61d5/html5/thumbnails/17.jpg)
Delivery Method.
Problem #1Lots of small images being loaded for logos and icons acrossthe site.
1. Deliver them as one image (Sprite). 2. Use iconfonts
HTTP/2 : http2demo.io
Solutions
![Page 18: Ultimate Guide to Image Optimisation in WordPress](https://reader030.vdocuments.net/reader030/viewer/2022020410/587eb69e1a28abbb688b61d5/html5/thumbnails/18.jpg)
Delivery Method.
Problem #2Your users are distributed around the world and images aren’tloading very quickly to customers abroad.
Photon - part of Jetpack
Deliver them via a Content Delivery Network (CDN).
WP Offload S3 : https://wordpress.org/plugins/amazon-s3-and-cloudfront/
Solution
![Page 19: Ultimate Guide to Image Optimisation in WordPress](https://reader030.vdocuments.net/reader030/viewer/2022020410/587eb69e1a28abbb688b61d5/html5/thumbnails/19.jpg)
Appearance.
Problem #1You have lots of images on the page but most of them arebelow the fold.
Lazy Load the images.
lazySizes : http://afarkas.github.io/lazysizes/
Solution
![Page 20: Ultimate Guide to Image Optimisation in WordPress](https://reader030.vdocuments.net/reader030/viewer/2022020410/587eb69e1a28abbb688b61d5/html5/thumbnails/20.jpg)
Appearance.
Problem #2You have a lot of images on your site that is contributingto a large page size, including a slider.
Revisit the design stage. Do you need as many images? Isthe slider adding value to your site?
Solution
![Page 21: Ultimate Guide to Image Optimisation in WordPress](https://reader030.vdocuments.net/reader030/viewer/2022020410/587eb69e1a28abbb688b61d5/html5/thumbnails/21.jpg)
Responsive Images.
Problem #1I have an image that is 800px x 400px on desktop but I onlyneed it to be 400px x 200px on mobile devices.
Problem #2I want to be able to serve retina images to retina devices, butnot to non-retina devices.
Problem #3I want to provide different image sizes at different screen I want to provide different image sizes at different screen widths a.k.a. art direction
![Page 22: Ultimate Guide to Image Optimisation in WordPress](https://reader030.vdocuments.net/reader030/viewer/2022020410/587eb69e1a28abbb688b61d5/html5/thumbnails/22.jpg)
Responsive Images.
Solution #1, #2 & #3
<picture></picture>
![Page 23: Ultimate Guide to Image Optimisation in WordPress](https://reader030.vdocuments.net/reader030/viewer/2022020410/587eb69e1a28abbb688b61d5/html5/thumbnails/23.jpg)
Responsive Images.
Solution #1 (a)
<picture> <source media="(min-width: 650px)" srcset="images/featured-image.jpg"> <img src="images/featured-image-small.jpg" alt="Dyson"> alt="Dyson"></picture>
![Page 24: Ultimate Guide to Image Optimisation in WordPress](https://reader030.vdocuments.net/reader030/viewer/2022020410/587eb69e1a28abbb688b61d5/html5/thumbnails/24.jpg)
Responsive Images.
<?php // Featured large (1000 x 600)$image_large = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'featured' );// Featured small (500 x 300)$image_small = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'featured-small' );?>
<picture><picture> <source media="(min-width: 650px)" srcset="<?php echo $image_large[0]; ?>"> <img src="<?php echo $image_small[0]; ?>" alt="Dyson"></picture></picture>
![Page 25: Ultimate Guide to Image Optimisation in WordPress](https://reader030.vdocuments.net/reader030/viewer/2022020410/587eb69e1a28abbb688b61d5/html5/thumbnails/25.jpg)
Responsive Images.
Solution #1 (b)Install the featured plugin to provide support for images in theWordPress editor - merged in for 4.4.
RICG Responsive Images : https://wordpress.org/plugins/ricg-responsive-images/
![Page 26: Ultimate Guide to Image Optimisation in WordPress](https://reader030.vdocuments.net/reader030/viewer/2022020410/587eb69e1a28abbb688b61d5/html5/thumbnails/26.jpg)
Responsive Images.
Solution #2<picture> <source media="(min-width: 650px)" srcset=" images/featured-image.jpg, images/[email protected] 2x"> <img <img src=" images/featured-image-small.jpg, images/[email protected] 2x" alt="Dyson"></picture>
![Page 27: Ultimate Guide to Image Optimisation in WordPress](https://reader030.vdocuments.net/reader030/viewer/2022020410/587eb69e1a28abbb688b61d5/html5/thumbnails/27.jpg)
Responsive Images.
Solution #3
<picture> <source media="(min-width: 650px)" srcset="images/featured-image-rectangle.jpg"> <img src="images/featured-image-square.jpg" alt="Dyson"> alt="Dyson"></picture>
![Page 28: Ultimate Guide to Image Optimisation in WordPress](https://reader030.vdocuments.net/reader030/viewer/2022020410/587eb69e1a28abbb688b61d5/html5/thumbnails/28.jpg)
Responsive Images.
<?php// Featured Retina (2000 x 1200)$image_retina = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'featured-retina' ); // Featured Large (1000 x 600)$image_large = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'featured-large' );// Featured small (500 x 300)$image_small = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'featured-small' );$image_small = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'featured-small' );?>
<picture> <source media="(min-width: 650px)" srcset=" <?php echo $image_large[0]; ?>, <?php echo $image_retina[0]; ?> 2x"> <img src="<?php echo $image_small[0]; ?>" srcset="<?php echo $image_largel[0]; ?> 2x" alt="Dyson"></picture>
![Page 29: Ultimate Guide to Image Optimisation in WordPress](https://reader030.vdocuments.net/reader030/viewer/2022020410/587eb69e1a28abbb688b61d5/html5/thumbnails/29.jpg)
Responsive Images.
<?php // Featured rectangle (1000 x 600)$image_rect = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'featured-rect' );// Featured square (400 x 400)$image_small = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'featured-square' );?>
<picture><picture> <source media="(min-width: 650px)" srcset="<?php echo $image_rect[0]; ?>"> <img src="<?php echo $image_square[0]; ?>" alt="Dyson"></picture></picture>
![Page 30: Ultimate Guide to Image Optimisation in WordPress](https://reader030.vdocuments.net/reader030/viewer/2022020410/587eb69e1a28abbb688b61d5/html5/thumbnails/30.jpg)
Responsive Images.
Bonus - Fallback images
<picture> <source type="image/webp" srcset="images/dyson.webp"> <img src="images/dyson.jpg" alt="Dyson"></picture>
![Page 31: Ultimate Guide to Image Optimisation in WordPress](https://reader030.vdocuments.net/reader030/viewer/2022020410/587eb69e1a28abbb688b61d5/html5/thumbnails/31.jpg)
Responsive Images.
Further Information<picture> element requires polyfill for older browsers
#feature-respimg on Slack
Featured plugin merged into WP 4.4
<picture> polyfill : https://scottjehl.github.io/picturefill/
![Page 32: Ultimate Guide to Image Optimisation in WordPress](https://reader030.vdocuments.net/reader030/viewer/2022020410/587eb69e1a28abbb688b61d5/html5/thumbnails/32.jpg)
Questions?
@stompweb
Blog Post : http://stomptheweb.co.uk/ultimate-guide-image-optimisation-wordpress