Embed Size (px)
Citation preview
The Ultimate(?) Guide to Image Optimisation.
Steven Jones@stompweb
Why focus on images?
Issues.
1. File Size2. File Types3. Image sizes/proportions4. Delivery Method5. Appearance6. Responsive
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
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
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
File Types.
1. JPG2. PNG3. GIF4. SVG5. WEBP
File Types.
JPG - 25KB PNG - 50KB
File Types.
JPG - 150KB PNG - 20KB
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
File sizes/proportions.
File sizes/proportions.
add_image_size( 'wordpress-thumbnail', 200, 200, FALSE );add_image_size( 'wordpress-thumbnail', 200, 200, FALSE );
File sizes/proportions.
add_image_size( 'wordpress-thumbnail', 200, 200, TRUE );
File sizes/proportions.
add_image_size( 'wordpress-thumbnail', 200, 200, array( 'left', 'top' ) );
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
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
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
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
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
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
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
Responsive Images.
Solution #1, #2 & #3
<picture></picture>
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>
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>
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/
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>
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>
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>
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>
Responsive Images.
Bonus - Fallback images
<picture> <source type="image/webp" srcset="images/dyson.webp"> <img src="images/dyson.jpg" alt="Dyson"></picture>
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/
Questions?
@stompweb
Blog Post : http://stomptheweb.co.uk/ultimate-guide-image-optimisation-wordpress
