Image Optimisation for WordPress Sites

A photo straight out of a phone or a DSLR is made for printing, not for a web page. It is often several thousand pixels wide and several megabytes in size. Put twenty of those on a gallery page and a visitor on a mobile connection stares at a blank screen while the pictures download. On many slow WordPress sites, this one habit is the root problem.

The fix is mostly habits, not tools: resize before you upload, pick a sensible format, let the browser load pictures only when needed, and accept a little compression where nobody will see it. This article covers each step in order, and ends with what to do about the photos already in your media library.

Why camera and phone photos slow a WordPress page

Two things decide how heavy an image is: its pixel dimensions and how hard it is compressed. A phone photo can be 4000 pixels wide. The widest any photo is displayed on a typical site is around 1900 pixels, and inside a blog column closer to 800. The browser downloads the whole file, then shrinks it to fit. Every extra pixel is data your visitor paid to download and never saw.

WordPress does make smaller copies of each upload. The catch is that page builders, sliders, full-width banners and galleries that link to the full image often use the original anyway, so the heavy file is what reaches the phone.

There is a hidden cost too. A library full of ten megabyte originals makes backups slow and restores risky, which matters when you read our notes on WordPress security for business. Shared hosting storage also fills faster than most owners expect.

Resize before you upload, every single time

This is the step that does most of the work, and it costs nothing. Decide the largest width each kind of image will ever need, and resize to that before the file touches WordPress. Reasonable limits for most business sites:

• Full-width hero banners and sliders: around 1900 pixels wide.
• Images inside a blog post or a page column: 1200 pixels wide is usually plenty.
• Product thumbnails, team photos and card images: 600 to 800 pixels wide.
• Logos and icons: an SVG or a small PNG, never a photo-sized JPEG.

You do not need special software. Preview on a Mac and Photos on Windows both resize, most phone gallery apps offer a smaller export when you share, and free browser tools resize and compress in one go. While you are at it, give the file a descriptive name, such as hair-oil-bottle-front.jpg rather than IMG_4521.jpg, and fill in the alt text on upload. Both help Google understand the picture, and alt text helps visitors who use screen readers.

One more reason to resize on your own computer: phone photos carry hidden data, including the GPS location of the shot. Most resizing tools strip it. Uploading originals from a staff member's phone can publish that location without anyone noticing.

Pick the format for the job

Format changes the size as much as dimensions do. Each format is good at one thing, and the usual mistake is to pick the wrong one because it looks sharper on your own screen.

• JPEG: photographs. Small files, with a little softness that nobody notices at normal size.
• PNG: screenshots, flat graphics and anything that needs a transparent background. Very large for photographs, so avoid it for them.
• WebP: a newer format that handles photos and transparency at smaller sizes than both. WordPress accepts WebP uploads, and most current browsers display it.
• SVG: logos, icons and simple illustrations. A tiny file that stays crisp at any size.

If you want one rule: WebP for photos and graphics, SVG for logos. If an old plugin struggles with WebP, fall back to JPEG for photos and PNG for graphics. AVIF is smaller still, but tool support is less even, so treat it as optional for now.

How much quality you can give up without customers noticing

Every JPEG and WebP export has a quality slider from 0 to 100. At 100 the file is nearly as large as the original. Somewhere between 75 and 85, most photos look the same on a phone as they did at 100, at a fraction of the size. Below about 60 you start to see blotchy skies and halos around edges.

The question is not whether the picture is perfect, but whether a customer on a phone can see any difference. Side by side on a large monitor, a trained eye might. On a six inch screen, almost never. Test it: export one photo at two settings, open both on your phone, and ask a colleague which is compressed.

Some businesses genuinely need more detail. Jewellery, sarees, furniture finishes and anything a buyer zooms into before paying deserve higher quality on the zoom image only. Compress the gallery thumbnails hard, keep the large view cleaner, and you get speed where it matters and detail where it sells.

Lazy loading, and the photos already on your site

Lazy loading means the browser downloads an image only when the visitor scrolls near it, so a page with thirty photos loads like a page with three. WordPress switches this on by default, so you may already have it. The exception that matters: the hero image at the top should load immediately, because it is the first thing people see. Some themes lazy load it anyway, which makes the page feel slower.

For photos already in your library, there are two sensible routes. A bulk optimisation plugin can compress, resize and convert existing files in the background; many offer a free tier with a monthly limit. Or you clean up by hand the pages that bring in business, such as the home page, service pages and top products, and leave the rest.

Start with the heaviest pages. Free tools such as Google's PageSpeed Insights list oversized images by file name, so you know which to fix first. The same resized, well lit photos belong on your Google listing too; see our guide to Google Business Profile optimisation for what works there.

Making it stick without doing it by hand forever

The habit outlasts any plugin. Write a one line rule into your content process: nothing wider than 1900 pixels, WebP or JPEG at a quality of around 80, descriptive file names, alt text filled in. Give the same rule to your photographer and ask for web sized exports alongside the print files.

If you are still comparing platforms, hosted platforms such as Shopify resize and convert images for you, while WordPress leaves it in your hands. Our WordPress vs Shopify comparison covers that trade. The control is worth having, as long as somebody owns the job.

Images are usually the heaviest part of a page, but scripts, styles and missing caching add weight too, and that is where a speed plugin earns its place. Our Performance Enhancer handles caching, script deferral and asset optimisation while leaving the WooCommerce cart and checkout alone, the part most speed plugins break. Fix the images first, then let the plugin do the rest.

FAQs