WordPress Image Optimisation: Smaller Files, Same Quality

On many WordPress sites, images account for most of the weight of a page. A single uncompressed photo from a phone can be several megabytes, larger than the rest of the page combined. Optimising images is one of the easiest and most reliable ways to make a site faster, and it improves experience on slow mobile connections. This guide explains the practical steps.

Understand the three levers

Image weight depends on three things, and you can adjust each one:

• Dimensions: the width and height in pixels.
• Compression: how aggressively quality is traded for file size.
• Format: JPEG, PNG, WebP, AVIF, SVG and others each suit different content.

The most common mistake is uploading images far larger than they are displayed. A banner shown 1,200 pixels wide does not need a 5,000-pixel original.

Choose the right format

Format	Best for	Notes
JPEG	Photographs	Universal support; lossy compression
PNG	Graphics with transparency, screenshots	Lossless; can be large for photos
WebP	Photos and graphics	Usually smaller than JPEG or PNG at similar quality; supported by WordPress
AVIF	Photos	Often very small; check current WordPress and browser support
SVG	Logos, icons, simple illustrations	Scales without quality loss; sanitise uploads from untrusted sources

WebP is a sensible default for most sites today. Keep SVG for logos and icons, where it stays sharp at any size.

Resize and compress

Work out the largest size each image will be displayed at on your site, allowing for high-density screens, and resize to roughly double that for sharp results where necessary. For a full-width hero on a typical layout, a few thousand pixels is more than enough. For a blog content column, much less.

WordPress creates several smaller versions of each upload automatically, and uses the srcset attribute so browsers pick a suitable size. That helps, but it works best when the original is not huge to start with.

Compress sensibly

Lossy compression removes detail the eye barely notices. For photographs, a moderate quality setting usually looks identical to the original at a fraction of the size. Test by comparing before and after at full size on a good screen. Avoid recompressing already compressed images repeatedly, since quality degrades each time.

You can compress with desktop tools before uploading, or use a plugin or service that processes images automatically on upload. Choose a plugin that keeps your original files, so you can re-run it with different settings later.

Loading, accessibility and extras

Lazy loading delays images below the visible area until the visitor scrolls near them. WordPress adds this attribute to most images by default. Two cautions apply:

• Do not lazy-load the main image at the top of the page. It is the most important item for how fast the page feels, and delaying it makes things worse.
• Always include width and height attributes so the browser reserves space and the layout does not jump while images load.

Alt text and file names

Optimisation is not only about weight. Write short, descriptive alt text for meaningful images, since screen reader users rely on it and search engines use it as context. Leave alt empty for purely decorative images. Use descriptive file names such as blue-ceramic-teapot.webp rather than IMG_4021.jpg.

Backgrounds, sliders and video

Large background images in page builders, auto-playing sliders and background videos are heavy. If you need them, serve smaller versions to phones, limit the number of slides, and prefer a short compressed clip or a static image. Embedded videos from external platforms should load as a click-to-play preview instead of loading the whole player immediately.

Clean up the media library

Over time, libraries fill with unused uploads and duplicates. They take up disk space and make backups larger. Before deleting, check that an image is not used in posts, widgets, product galleries or theme settings. Use a backup first, as bulk media deletion cannot be undone.

A simple workflow

1. Resize the original to the largest needed size.
2. Export to WebP or a well-compressed JPEG.
3. Upload and add descriptive alt text.
4. Check the result on a phone and with a speed testing tool.
5. Serve static files through a CDN if your audience is spread across regions.

Serving the right image to each device

WordPress generates several sizes of every upload and tells the browser about them, so a phone can download a small version while a large desktop screen gets a bigger one. This only works well if your theme requests suitable sizes. If your theme uses a fixed large size everywhere, you lose the benefit. Check the actual file size of images in your browser's network panel on a phone-sized view, and adjust the registered image sizes if you find waste. Regenerating thumbnails after changing sizes brings old uploads in line.

Optimised images on Zebra Hosting

Smaller images mean less storage and bandwidth use, and a CDN speeds up delivery further. Cloudflare CDN is available on sites hosted with us; see the CDN page. Our WordPress hosting gives you Plesk to manage your files and PHP settings, including limits that affect large uploads.