The heaviest thing on most small business websites isn’t the code, the plugins or the theme. It’s a photo someone uploaded straight off their phone: 4,000 pixels wide, 6 megabytes, displayed in a box 600 pixels across.
Images are usually the easiest speed win on a WordPress site, and the fixes are mostly habits rather than technical work.
Upload at the size it will be shown
WordPress makes several smaller copies of every image you upload (thumbnail, medium, large and a few others) and serves an appropriate one to each screen. That helps. It doesn’t help as much as uploading a sensible file in the first place, because the original still sits on your server and some page builders and themes use it directly.
WordPress also scales down anything larger than 2,560 pixels on its longest side when you upload it. That’s a safety net, not a target. These are the sizes we work to:
| Where the image goes | Upload width | Rough file size to aim for |
|---|---|---|
| Full-width hero or banner | 1,920 to 2,400 px | Under 300 KB |
| Image beside text (half width) | 1,200 px | Under 150 KB |
| Blog post image | 1,200 to 1,600 px | Under 200 KB |
| Team headshot | 800 px | Under 80 KB |
| Gallery or project photo | 1,600 px | Under 250 KB |
| Logo | Use SVG if you can, otherwise PNG at twice the display size | Under 30 KB |
The file sizes are rough targets, not rules. A busy photo of a building site will be heavier than a headshot against a plain wall.
On Elementor sites, watch background images in particular. A background loads the file you chose at the size you chose, so a 5,000 pixel background will load at 5,000 pixels on a phone. Elementor lets you set a different background image for mobile, and it’s worth doing on big hero sections.
JPEG, PNG, WebP or AVIF?
- JPEG for photos. Universally supported, small enough when compressed well.
- PNG for graphics with transparency or sharp edges, like a screenshot or a logo. Terrible for photos (huge files).
- SVG for logos and icons. Tiny and sharp at any size. Only upload SVGs from a source you trust, because they can contain code. WordPress doesn’t allow SVG uploads by default, so you’ll need a plugin that sanitises them.
- WebP is a modern format that’s typically much smaller than JPEG at similar quality. WordPress has accepted WebP uploads for years, and every current browser displays it.
- AVIF is newer and smaller again. WordPress added AVIF support in version 6.5, but only if your server’s image library supports it. Check under Tools > Site Health > Info > Media Handling.
In practice, we don’t ask clients to convert files by hand. Upload a properly sized JPEG and let an optimisation plugin create WebP (or AVIF) versions and serve them to browsers that support them. That way you keep a normal JPEG as the original, and visitors get the smaller file.
Compression: how much is too much
Compression throws away detail your eye won’t notice. There are two types:
- Lossy compression makes files much smaller and, at sensible settings, looks the same. Use this for photos.
- Lossless keeps every pixel but saves far less.
Most optimisation plugins offer levels like “lossless”, “glossy” or “lossy” (names vary). For a business site, the middle setting is usually the sweet spot. Check a few images at full size afterwards, especially ones with skin tones, sky gradients or fine text, because that’s where over-compression shows up first as blotches and banding.
If you’re editing on a computer before upload, exporting a JPEG at about 75 to 85 percent quality from Photoshop, Lightroom or Affinity is a good starting point.
Alt text that helps people
Alt text is the description read aloud by screen readers and shown when an image fails to load. Google also uses it to understand the image, per its image SEO guidance. Write it for the person who can’t see the picture, and the search benefit follows.
Some examples from a concrete contractor’s project gallery:
| Weak | Better |
|---|---|
| IMG_4471 | Exposed aggregate driveway after sealing, with new garden edging |
| concrete | Grey honed concrete floor in an open-plan living area |
| concrete grinding Ballina concrete polishing best concrete Northern Rivers | Before and after of a cracked pool surround, ground back and resealed |
| photo of our team | Three tradies in hi-vis standing beside a concrete truck on a residential job |
A few rules of thumb:
- Describe what’s in the image, in a sentence or less.
- Don’t start with “image of” or “photo of”. Screen readers already announce it’s an image.
- Mention the location or service only if it’s genuinely part of what the photo shows.
- Purely decorative images (a background texture, a divider) should have empty alt text, so screen readers skip them.
- Text inside an image (a promo graphic) should be written out in full in the alt text, or better, put on the page as real text.
Add alt text in the Media Library by clicking an image and filling in the “Alternative Text” field. Elementor image widgets pull alt text from there automatically. The block editor copies it in when you insert the image, so set it in the library first. On a project-heavy site like the concrete contractor site we built, where photos do most of the selling, this is worth doing properly for every image, and it’s easier when the images come from a planned commercial photography shoot rather than a camera roll. There’s more on file names and search in our image SEO guide.
Cleaning up a bloated media library
A site that’s been running for five years often has thousands of images, many never used: duplicates, old logos, drafts of banners, the same photo uploaded four times.
We tackle it in this order:
- Take a full backup first. Deleting images is permanent, and “unused” detection isn’t perfect.
- Check what’s taking up room. Your hosting control panel shows the size of the
wp-content/uploadsfolder. If it’s several gigabytes on a small brochure site, there’s work to do. - Optimise what’s there. Most optimisation plugins can bulk-compress existing images. This alone often halves the folder size.
- Find unused images carefully. Media cleaner plugins scan for images not referenced anywhere. Treat their list as a suggestion. Page builders, sliders and custom fields sometimes store image references in ways scanners miss. Move to trash, check the site, then delete.
- Stop the problem recurring. Resize before uploading, and give files sensible names before they go up (
polished-concrete-driveway-lennox.jpg, notIMG_4471.jpg).
If you’ve changed theme over the years, you may also have dozens of old thumbnail sizes for each image that the current theme doesn’t use. A plugin like Regenerate Thumbnails can rebuild them, but run it on a backup or staging copy first.
Then let caching do the rest
Once images are the right size and format, lazy loading (built into WordPress) means images further down the page only load as people scroll. Combine that with page and browser caching, explained in WordPress caching in plain English, and most image-related slowness disappears.
Resizing, compression and WebP conversion are among the first things we sort in a WordPress speed fix, and we set them up on the sites we build. If your current site feels sluggish and you suspect the photos, ask us to take a look.