Print

Image optimisation - WebP, lazy loading and the right sizes

  • website speed, page speed, litespeed, cache, cdn, cloudflare, core web vitals, image optimisation, webp, lazy loading
  • 0

Image optimisation

Images are typically the heaviest items on any page. Optimising them is the single biggest performance win for most sites - it takes minutes per image and shaves 50-80% off the bytes downloaded.

The three rules of image optimisation

1. Use the right format

  • WebP for almost everything. About 30% smaller than JPG at the same quality, supported by every modern browser.
  • JPG for photos when WebP is not available.
  • PNG only when you need transparency or sharp lines (logos, icons, screenshots with text).
  • SVG for vector logos and icons - tiny file size, infinitely scalable.
  • AVIF for cutting-edge sites - even smaller than WebP, supported by recent browsers.

2. Use the right dimensions

Do not upload a 4000x3000 photo from your DSLR to display in a 800x500 hero section. Resize the source image to roughly 1.5x the largest display size (the extra accounts for retina displays).

WordPress has srcset built in - if you upload a properly-sized source, WordPress generates multiple sizes automatically and the browser picks the right one for the viewer's screen.

3. Compress before upload

Free tools that get 60-80% file size reductions with no visible quality loss:

  • TinyPNG - drag and drop in a browser
  • Squoosh by Google - more control over format and quality
  • WordPress: ShortPixel or Imagify plugins compress on upload

Lazy loading

"Lazy load" means images below the fold do not load until the user scrolls toward them. Modern browsers do this with one HTML attribute: <img loading="lazy" src="...">. WordPress 5.5+ adds this automatically to every image. For custom-built sites, add it manually.

Common mistakes

  • Hero image without dimensions. Always include width and height attributes - it stops the page jumping as the image loads (good for Core Web Vitals).
  • One huge background image. Slice it into a smaller foreground image plus a CSS-coloured background.
  • Animated GIFs. Replace with MP4 or WebM video - typically 90% smaller.

Hosting with LiteSpeed image opt Hire us to optimise your images

Need a hand?

The Trinico Cloud team is in South Africa and replies during local business hours. Reach us via WhatsApp, e-mail or a support ticket - whichever suits you best.

Contact us Open a support ticket


Was this answer helpful?

« Back
Loading