A few small habits around image size and image type make a real difference to how fast your pages load — and a faster page is better for your visitors and better for your search rankings. Here are the three most common image issues and how to fix each one.
Why Image Size Matters
It's easy to upload a photo straight from your phone or camera without a second thought. But it's not unusual for a single image to come in at 3MB or more — and a file that size, sitting on its own, is enough to noticeably slow a page down.
Large images mean longer load times, and that affects two things: how your visitors experience your site, and how search engines rank it. Slow pages are penalised for SEO, and visitors — especially on mobile data — are more likely to leave before a heavy page finishes loading.
Resize Before You Upload
The fix is simple: resize your images before you upload them, rather than after.
Aim for a file size under 250kb. As a rough guide, this usually means setting the longest side of the image to around 900px.
Resizing on a Mac (Preview)
Open the image in Preview — the default photo viewer on a Mac.
Go to Tools → Adjust Size in the menu bar.
Set the longest side to around 900px.
Save the image, then upload the resized version.
💡 Smaller files load faster for everyone, but the difference is most noticeable for visitors browsing on mobile data — so this small habit pays off every time someone opens your site on their phone.
Column Background Images vs Image Blocks
Not every image issue is about file size — sometimes it's about how the image is placed on the page.
If you set a portrait-orientation photo as a Column Background Image, it can end up cropped once the page is viewed on a wider screen. A Column Background Image scales to fill the space it sits in, so parts of a tall image may be cut off to make it fit.
The fix is to use an Image Block instead. An Image Block keeps the image's full aspect ratio, so the whole photo stays visible — nothing gets cropped, no matter how wide the screen is.
⚠️ If a portrait photo is sitting in a Column Background Image and it looks cropped on desktop, that's the cause. Swap it for an Image Block to show the full picture.
Transparent PNGs and File Size
PNG files with a transparent background are useful for logos and overlays, but they tend to be much larger than a JPEG of the same image — and that extra file size is harder to optimise away.
If you don't actually need the transparency, the simplest fix is to convert the PNG to a JPEG:
Open the PNG in Canva.
Add a solid colour background layer behind the image, matching the colour of the page it will sit on.
Download the flattened image as a JPEG.
Once the transparent background is replaced with a solid colour, the image compresses far more efficiently — giving you a smaller file with no visible difference on the page.
Quick Reference
Image file is over 250kb — resize so the longest side is around 900px before uploading.
Portrait image cropped on wide screens — use an Image Block instead of a Column Background Image.
Transparent PNG is large and hard to optimise — add a matching solid background in Canva and export as a JPEG.