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.

Ultimate Guide to Image Optimisation in WordPress

1,751 views

Published on

On average images comprise over 2/3rds of the size of a page request. This talk looks at how to optimise images to speed up your website; ranging from image compression to responsive images.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Ultimate Guide to Image Optimisation in WordPress

  1. 1. TheUltimate(?)Guideto ImageOptimisation. StevenJones @stompweb
  2. 2. Whyfocusonimages?
  3. 3. Issues. 1.FileSize 2.FileTypes 3.Imagesizes/proportions 4.DeliveryMethod 5.Appearance 6.Responsive
  4. 4. FileSize. Problem#1 Imagesarebeingloadedontothesitedirectlyfromacamera’s SDcard. Reducethebaselinefilesizethatcanbeuploaded. Imsanity:https://wordpress.org/plugins/imsanity/ Solution
  5. 5. FileSize. Problem#2 Evenafterensuringthatimagesoutputonyourwebsiteare nottoobig,filesizesarestilllarge. Compressimagesinyourmedialibrary. Kraken:https://wordpress.org/plugins/kraken-image-optimizer/ EWWWImageOptimizer: https://wordpress.org/plugins/ewww-image-optimizer/ Solution
  6. 6. FileSize. Problem#3 Imagesthatarepartofyourthemearen’toptimised. UseataskrunnersuchasGulptoautomatethecompression ofyourassets. gulp-imagemin: https://www.npmjs.com/package/gulp-imagemin/ Solution
  7. 7. FileTypes. 1.JPG 2.PNG 3.GIF 4.SVG 5.WEBP
  8. 8. FileTypes. JPG-25KB PNG-50KB
  9. 9. FileTypes. JPG-150KB PNG-20KB
  10. 10. Filesizes/proportions. Problem Thereisaspacefora700pxx400pximageonyoursitebut yourclienthasuploadedimagesthatare2000pxx800px. Useadd_image_size()tocreatedifferentimagesonupload. Solution
  11. 11. Filesizes/proportions.
  12. 12. Filesizes/proportions. add_image_size( 'wordpress-thumbnail', 200, 200, FALSE );add_image_size( 'wordpress-thumbnail', 200, 200, FALSE );
  13. 13. Filesizes/proportions. add_image_size( 'wordpress-thumbnail', 200, 200, TRUE );
  14. 14. Filesizes/proportions. add_image_size('wordpress-thumbnail',200,200,array('left','top' ) );
  15. 15. Filesizes/proportions. Problem Youhaveusedadd_image_size()butexistingimagesare notthecorrectsize. Regenerateimages. RegenerateThumbnails:https://wordpress.org/plugins/regenerate-thumbnails/ Solution
  16. 16. Filesizes/proportions. Problem Youhave1000sofimagesinthemedialibrarybutonlyneed acertainsizeforafewspecificimages. Generateimageson-the-fly WPThumb:https://wordpress.org/plugins/wp-thumb/ vt_resize(): https://www.seedprod.com/dynamically-resize-wordpress-images-on-the-fly/ Solution
  17. 17. DeliveryMethod. Problem#1 Lotsofsmallimagesbeingloadedforlogosandiconsacross thesite. 1.Deliverthemasoneimage(Sprite). 2.Useiconfonts HTTP/2:http2demo.io Solutions
  18. 18. DeliveryMethod. Problem#2 Yourusersaredistributedaroundtheworldandimagesaren’t loadingveryquicklytocustomersabroad. Photon-partofJetpack DeliverthemviaaContentDeliveryNetwork(CDN). WPOffloadS3: https://wordpress.org/plugins/amazon-s3-and-cloudfront/ Solution
  19. 19. Appearance. Problem#1 Youhavelotsofimagesonthepagebutmostofthemare belowthefold. LazyLoadtheimages. lazySizes:http://afarkas.github.io/lazysizes/ Solution
  20. 20. Appearance. Problem#2 Youhavealotofimagesonyoursitethatiscontributing toalargepagesize,includingaslider. Revisitthedesignstage.Doyouneedasmanyimages?Is theslideraddingvaluetoyoursite? Solution
  21. 21. ResponsiveImages. Problem#1 Ihaveanimagethatis800pxx400pxondesktopbutIonly needittobe400pxx200pxonmobiledevices. Problem#2 Iwanttobeabletoserveretinaimagestoretinadevices,but nottonon-retinadevices. Problem#3 IwanttoprovidedifferentimagesizesatdifferentscreenIwanttoprovidedifferentimagesizesatdifferentscreen widthsa.k.a.artdirection
  22. 22. ResponsiveImages. Solution#1,#2&#3 <picture></picture>
  23. 23. ResponsiveImages. 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>
  24. 24. ResponsiveImages. <?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>
  25. 25. ResponsiveImages. Solution#1(b) Installthefeaturedplugintoprovidesupportforimagesinthe WordPresseditor-mergedinfor4.4. RICGResponsiveImages: https://wordpress.org/plugins/ricg-responsive-images/
  26. 26. ResponsiveImages. Solution#2 <picture> <source media="(min-width:650px)" srcset=" images/featured-image.jpg, images/featured-image@2x.jpg2x"> <img<img src=" images/featured-image-small.jpg, images/featured-image-small@2x.jpg2x" alt="Dyson"> </picture>
  27. 27. ResponsiveImages. 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>
  28. 28. ResponsiveImages. <?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>
  29. 29. ResponsiveImages. <?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>
  30. 30. ResponsiveImages. Bonus-Fallbackimages <picture> <sourcetype="image/webp"srcset="images/dyson.webp"> <imgsrc="images/dyson.jpg"alt="Dyson"> </picture>
  31. 31. ResponsiveImages. FurtherInformation <picture>elementrequirespolyfillforolderbrowsers #feature-respimgonSlack FeaturedpluginmergedintoWP4.4 <picture>polyfill: https://scottjehl.github.io/picturefill/
  32. 32. Questions? @stompweb BlogPost: http://stomptheweb.co.uk/ultimate-guide-image-optimisation-wordpress

×