Making Website Images Smaller Without Losing Quality

On most web pages, images make up the largest share of the data. So the easiest way to speed up a slow page is usually to fix the images, not the server.

1. Upload images at the size they're shown

Uploading a 4000-pixel-wide phone photo into a space shown 800 pixels wide makes visitors download several megabytes for nothing. Resize the image to the largest width it will be shown at before uploading. For high-resolution screens, twice the display width is usually enough.

WordPress generates different sizes of each upload automatically and adds a srcset attribute so the browser can pick the right one. Keeping the original from being huge still protects your disk space and inode usage.

2. Choose the right format

• WebP: supported by all current browsers, and usually smaller than JPEG at the same visual quality.
• AVIF: in many cases smaller still than WebP; most current browsers support it.
• SVG: ideal for logos and icons, sharp at any size. Be careful with SVG files from outside sources, as they can contain code.
• PNG: only for images that need transparency and have few colours. Don't use it for photos.

3. Set the compression quality

For photos, a quality setting of around 75–85% cuts file size noticeably with a loss you can't see. Trying a few settings on your own images and comparing gives the best result.

4. Use lazy loading correctly

The loading="lazy" attribute stops images further down the page from downloading until the visitor gets close. WordPress adds it to most images by itself.

The important exception: don't lazy-load the large image visible as soon as the page opens (usually the hero or product image). It is often the LCP element, and loading it late makes the page feel slow. Adding fetchpriority="high" to that image tells the browser to download it first.

5. Specify width and height

When an image's width and height are in the HTML, the browser reserves its space before it arrives. That stops content jumping down while the page loads, the CLS problem. See our Core Web Vitals guide.

Improving existing images in bulk

On WordPress, an image optimisation plugin can compress existing images in bulk and create WebP versions. The image optimisation in LiteSpeed Cache does this too, though it runs through an external service called QUIC.cloud. Take a backup before you start and leave the option to keep originals switched on.

Measure the result

Check the page's total size in the browser's developer tools before and after. Smaller pages reach visitors faster and reduce your monthly traffic.