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: