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.

1. TheUltimate(?)Guideto
ImageOptimisation.
StevenJones
@stompweb

2. Whyfocusonimages?

3. Issues.
1.FileSize
2.FileTypes
3.Imagesizes/proportions
4.DeliveryMethod
5.Appearance
6.Responsive

4. FileSize.
Problem#1
Imagesarebeingloadedontothesitedirectlyfromacamera’s
SDcard.
Reducethebaselinefilesizethatcanbeuploaded.
Imsanity:https://wordpress.org/plugins/imsanity/
Solution

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. FileSize.
Problem#3
Imagesthatarepartofyourthemearen’toptimised.
UseataskrunnersuchasGulptoautomatethecompression
ofyourassets.
gulp-imagemin:
https://www.npmjs.com/package/gulp-imagemin/
Solution

7. FileTypes.
1.JPG
2.PNG
3.GIF
4.SVG
5.WEBP

8. FileTypes.
JPG-25KB PNG-50KB

9. FileTypes.
JPG-150KB PNG-20KB

10. Filesizes/proportions.
Problem
Thereisaspacefora700pxx400pximageonyoursitebut
yourclienthasuploadedimagesthatare2000pxx800px.
Useadd_image_size()tocreatedifferentimagesonupload.
Solution

11. Filesizes/proportions.

12. Filesizes/proportions.
add_image_size( 'wordpress-thumbnail', 200, 200, FALSE );add_image_size( 'wordpress-thumbnail', 200, 200, FALSE );

13. Filesizes/proportions.
add_image_size( 'wordpress-thumbnail', 200, 200, TRUE );

14. Filesizes/proportions.
add_image_size('wordpress-thumbnail',200,200,array('left','top' ) );

15. Filesizes/proportions.
Problem
Youhaveusedadd_image_size()butexistingimagesare
notthecorrectsize.
Regenerateimages.
RegenerateThumbnails:https://wordpress.org/plugins/regenerate-thumbnails/
Solution

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. DeliveryMethod.
Problem#1
Lotsofsmallimagesbeingloadedforlogosandiconsacross
thesite.
1.Deliverthemasoneimage(Sprite).
2.Useiconfonts
HTTP/2:http2demo.io
Solutions

18. DeliveryMethod.
Problem#2
Yourusersaredistributedaroundtheworldandimagesaren’t
loadingveryquicklytocustomersabroad.
Photon-partofJetpack
DeliverthemviaaContentDeliveryNetwork(CDN).
WPOffloadS3:
https://wordpress.org/plugins/amazon-s3-and-cloudfront/
Solution

19. Appearance.
Problem#1
Youhavelotsofimagesonthepagebutmostofthemare
belowthefold.
LazyLoadtheimages.
lazySizes:http://afarkas.github.io/lazysizes/
Solution

20. Appearance.
Problem#2
Youhavealotofimagesonyoursitethatiscontributing
toalargepagesize,includingaslider.
Revisitthedesignstage.Doyouneedasmanyimages?Is
theslideraddingvaluetoyoursite?
Solution

21. ResponsiveImages.
Problem#1
Ihaveanimagethatis800pxx400pxondesktopbutIonly
needittobe400pxx200pxonmobiledevices.
Problem#2
Iwanttobeabletoserveretinaimagestoretinadevices,but
nottonon-retinadevices.
Problem#3
IwanttoprovidedifferentimagesizesatdifferentscreenIwanttoprovidedifferentimagesizesatdifferentscreen
widthsa.k.a.artdirection

22. ResponsiveImages.
Solution#1,#2&#3
<picture></picture>

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. 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. ResponsiveImages.
Solution#1(b)
Installthefeaturedplugintoprovidesupportforimagesinthe
WordPresseditor-mergedinfor4.4.
RICGResponsiveImages:
https://wordpress.org/plugins/ricg-responsive-images/

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. 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. 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. 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. ResponsiveImages.
Bonus-Fallbackimages
<picture>
<sourcetype="image/webp"srcset="images/dyson.webp">
<imgsrc="images/dyson.jpg"alt="Dyson">
</picture>

31. ResponsiveImages.
FurtherInformation
<picture>elementrequirespolyfillforolderbrowsers
#feature-respimgonSlack
FeaturedpluginmergedintoWP4.4
<picture>polyfill:
https://scottjehl.github.io/picturefill/

32. Questions?
@stompweb
BlogPost:
http://stomptheweb.co.uk/ultimate-guide-image-optimisation-wordpress