Image optimisation for non-designers
5 min read · Updated
Big photos are the most common reason small business websites are slow, and they’re the easiest thing to fix. You don’t need to be a designer or buy any software. Here’s how to do it.
Why photos slow your site down
A photo from a modern phone is often 4000 pixels wide and 3 to 5 MB. Your website might only show it 1200 pixels wide, but unless someone resized it, every visitor downloads the full-size file. On a phone with average reception, a single 4 MB image can take several seconds.
Multiply that across a homepage with a banner and a gallery, and you’ve got a page that takes 10 seconds to load. Most visitors won’t wait that long.
Step 1: Find your biggest images
Run a free scan. If images are a problem, your report says so and tells you roughly how big the worst one is. You can also check in your website builder’s media library, which usually shows each file’s size. Anything over 500 KB is worth fixing. Anything over 1 MB is definitely slowing you down.
Step 2: Resize to the size you actually need
Work out how wide the image is shown on your site. As a rough guide:
- Full-width banners: 1600 to 2000 pixels wide
- Images in a column, blog posts, services: 1000 to 1200 pixels wide
- Gallery thumbnails and logos: 400 to 800 pixels wide
Most computers can resize images without extra software. On a Mac, open the image in Preview and use Tools, then Adjust Size. On Windows, the Photos app has a resize option. Free online tools like Squoosh work in any browser.
Step 3: Compress and convert
Resizing gets you most of the way. Compression finishes the job.
- Save photos as WebP if your website supports it, or JPEG if it doesn’t.
- Use PNG only for logos, icons and graphics with sharp edges or transparency. Never for photos.
- Set quality to around 75 to 85%. The difference from 100% is almost impossible to see, but the file is often half the size.
Squoosh lets you compare before and after side by side, so you can find the point where it still looks good. Aim for most images to end up under 200 KB.
Step 4: Let your website do the rest
Most website builders can now do some of this for you:
- WordPress has image optimisation plugins that compress and convert images automatically when you upload them.
- Shopify, Squarespace and Wix resize and serve modern formats automatically, but they still start from what you upload, so upload sensible sizes.
- Lazy loading means images further down the page only load when someone scrolls to them. Most builders have it on by default. Make sure your top banner isn’t lazy-loaded, as that can make it slower.
Step 5: Fix the ones already on your site
Optimising new uploads is easy. The images already on your site are the ones slowing it down today. Start with your homepage and your most visited pages, replace the biggest images, then run another scan to see the difference.
A plugin that bulk-optimises your existing media library can save hours on a WordPress site. On other platforms, re-uploading the worst few images is usually enough to make a big difference.
Don’t forget alt text
While you’re working through your images, give each one a short description, called alt text. It helps people using screen readers, and it helps Google understand your images too. Describe what’s in the photo, like “Plumber fixing a leaking kitchen tap”. Leave it empty for purely decorative images.
Check your work
Run a fresh scan after you’ve made changes. You should see your mobile load time drop and the image finding change to Good. If your site is still slow after sorting the images, read why is my website slow? for the next most likely causes, or see how the speed audit works.
Want the full picture? See what our free speed audit checks
Common questions
Will compressing images make them look blurry?
Not if you do it sensibly. Most compression removes detail the eye can't see. Compress to around 75 to 85% quality and compare side by side. You usually can't tell the difference.
What's WebP and should I use it?
WebP is an image format designed for the web. It's usually 25 to 35% smaller than JPEG at the same quality and works in all modern browsers. If your website builder supports it, use it.
How big should my images be?
A full-width banner rarely needs to be wider than 1600 to 2000 pixels. Images in a column or gallery can be 800 to 1200 pixels. Most should end up under 200 KB.