Image optimisation

Images often represent the largest part of downloaded bytes on a webpage and occupy a considerable part of the visible area. Therefore, image optimisation can often save the largest amount of bytes and achieve significant performance improvements for a website.

Best practice

  • Use small images (< 200 KB) that load quickly
  • Choose the right image format:
    • Instead of gifs use <video>: e.g. Video formats and https://web.dev/replace-gifs-with-videos/
    • Fine detail with highest resolution: png or SVG
    • Optimising a photo, screenshot, or a similar image asset: jpeg
    • If you use a WebView to render content in your platform-specific application: WebP
  • Choose the correct level of compression: Use PNG and JPEG compression tools such as https://tinypng.com/, Imagemin (suggested by Google) or ImageOptim
  • Serve responsive images with the srcset tag
  • Use image CDNs to optimise images

Source: web.dev Fast load times - Optimise your images

Check

  • Google lighthouse can identify issues with image sizes

Code example

Convert PNG to JPEG (settings from Google PageSpeed insights v4)

convert $IMG.png -sampling-factor 4:2:0 -strip -quality 85 -interlace JPEG -colorspace sRGB $IMG.jpg

As a special trick you can add -gaussian-blur 0.05 to the above command to get much smaller (but blurry) images. This can work very well for backgrounds.