Fasterr practical guide

How to Optimise Images for WordPress Without Making Them Look Bad

Updated 23 July 2026 · Plain-English WordPress advice

Image optimisation is not about crushing every photograph until it looks damaged. It is about sending an image that is no larger, heavier or more detailed than the page needs.

Start with dimensions

If an image displays at roughly 900 pixels wide, uploading a 5000-pixel original wastes bandwidth. Export close to the largest realistic display size, allowing for high-density screens where appropriate.

Choose the right format

  • JPEG: dependable for photographs.
  • WebP: often smaller for photographs and graphics.
  • PNG: useful for transparency and crisp interface details.
  • SVG: excellent for trusted vector artwork such as simple logos.

Compress before or during upload

Use a reliable export or optimisation workflow and visually inspect the result. A large reduction is valuable only while the image still communicates properly.

Treat the hero image differently

The main above-the-fold image is often the largest visible element. Give it a useful file size, explicit dimensions and high priority. Do not lazy-load it if that delays display.

Lazy-load below-the-fold images

Images that start outside the viewport can normally load as the visitor approaches them. This reduces initial network work without hiding the content.

Avoid layout shifts

Store width and height information so the browser reserves space before the file arrives. Otherwise text and buttons can jump around while the page loads.

Do not forget thumbnails

WordPress themes and plugins generate several image sizes. Old themes, repeated migrations and unused plugins can leave unnecessary variants behind. Review the workflow before deleting files.

Use the complete WordPress speed sequence for the fixes that come next.

Images fixed but the server still waits?

The remaining bottleneck may be caching or hosting. See our practical hosting verdict.

Read the Fasterr recommendation →