Optimising Images for WordPress Websites

Kinsta wrote an awesome article covering every angle of image optimisation relating specifically to maximising the speed of WordPress Sites. Below is a key outline summary with the takeaways.Key Takeaways From Kinsta Image Optimisation Article

  • Convert images with lots of colour, like photos into jpg files
  • Convert images which are more 2-tone or flat (like logos) into PNGs
  • You want to keep an entire webpage below 2mb (somewhere between 1-2mb is best)
  • Lossy compression isn’t a bad thing, as long as you don’t “lose too much” – and you have control (Matching the image size and quality to your requirements is worth the effort of trial and error)
  • WordPress will automatically take the image you upload and generate different size versions of those images to be served to different sized devices
  • Plugins like WP Smush will compress images in a lossless way
  • Save images in tools like photoshop as “Optimised for web”

Kinsta’s List of Best Practices for Web Image Optimisation

  • If using a WordPress plugin, use one that compresses and optimizes images externally on their servers. This, in turn, reduces the load on your own site.
  • Use vector images whenever possible alongside your PNGs and JPGs
  • Use a CDN to serve up your images fast to visitors across the globe
  • Remove unnecessary image data
  • Crop the white space and recreate it by using CSS to provide the padding
  • Use CSS3 effects as much as possible
  • Save your images in the proper dimensions. Although remember WordPress now supports responsive images to serve them up without resizing them with CSS.
  • Use web fonts instead of placing text within images – they look better when scaled and take less space
  • Use raster images only for scenes with lots of shapes and details
  • Reduce the bit-depth to a smaller color palette
  • Use lossy compression where possible
  • Experiment to find the best settings for each format
  • Use GIF if you need animation (but compress your animated GIFs)
  • Use PNG if you need high detail and high resolutions
  • Use JPG for general photos and screenshots
  • Remove any unneeded image metadata
  • Automate the process as much as possible
  • In some cases, you might want to lazy load images for faster first-page render
  • Save images as “optimized for web” in tools such as Photoshop

Link to original article:

How to Optimize Images for Web and Performance