Images Are Killing Your Load Time: A Guide to WebP, AVIF and Sizing
Quick answer
To stop images slowing your website: resize each image to the largest size it’s actually displayed, compress it, and serve it in a modern format like WebP or AVIF, which are usually much smaller than JPEG or PNG at similar quality. Set width and height so the layout doesn’t jump, lazy-load images below the fold, and never lazy-load the main hero image. In WordPress, an image optimisation plugin can automate most of this.
If we had to name one thing that slows down more small business websites than anything else, it would be images. Not code, not hosting. Photos.
It makes sense. Phones now take enormous photos, and it’s easy to upload them straight to a website. A gallery of beautiful 4 MB images looks great on fibre and feels painfully slow on a phone in a mall basement.
The good news: images are also one of the easiest things to fix.
Why do images slow websites down?
Every image is a file the visitor’s device has to download. Big files take longer, especially on mobile data. And the largest image at the top of the page is usually your Largest Contentful Paint element, the moment Google uses to judge how fast your page loads.
Three things make images heavier than they need to be:
- Wrong dimensions. A 4000-pixel-wide photo shown in an 800-pixel space.
- No compression. Files saved at maximum quality with extra data the eye can’t see.
- Old formats. JPEG and PNG are less efficient than modern alternatives.
Step 1: Resize to the size you actually need
Find out how wide the image displays on your site. A full-width hero might need around 1600 to 2000 pixels for sharp results on large screens. A blog image in a content column might need 800 to 1200. A team headshot might need 400.
Resize before uploading. It’s the single biggest saving, and it costs nothing.
WordPress automatically creates several smaller copies of each upload and uses responsive image code (srcset) so phones can download a smaller version. That only works well if the original isn’t absurdly large and your theme uses the feature properly.
Step 2: Compress
Compression removes data you won’t notice. Most photos can be compressed significantly before any visible difference appears. Free tools like Squoosh (from Google) let you compare quality side by side, and WordPress plugins can compress automatically on upload.
Step 3: Use WebP or AVIF
| Format | Best for | Notes |
|---|---|---|
| JPEG | Photos (older standard) | Universal support, larger files |
| PNG | Graphics with transparency, screenshots | Often very large for photos |
| WebP | Photos and graphics | Usually much smaller than JPEG/PNG; supported by all modern browsers |
| AVIF | Photos | Often even smaller than WebP; supported by modern browsers |
| SVG | Logos, icons, simple illustrations | Tiny and perfectly sharp at any size |
WordPress supports uploading WebP natively, and AVIF in recent versions. Many optimisation plugins can also convert your existing library automatically and serve the modern format to browsers that support it.
Logos and icons deserve special mention. If your logo is a large PNG, ask your designer for an SVG version. It’ll be a fraction of the size and crisp on every screen.
Step 4: Prevent layout shift
Images should have width and height attributes so the browser reserves space before the image arrives. Without them, content jumps as images load, which hurts your Cumulative Layout Shift score and annoys visitors. Most modern WordPress themes handle this; some page builders don’t.
Step 5: Lazy-load correctly
Images below the first screen should lazy-load, so they only download as people scroll. WordPress does this by default for many images.
The image at the top of the page should not lazy-load. It should load immediately, ideally with a high priority hint. This one mistake is behind many slow LCP scores we see.
A real-world example
Imagine a boutique wine farm near Paarl. Their homepage has a slider with five landscape photos, each uploaded straight from a professional camera. The gallery page has thirty more.
The fix: replace the slider with one hero image, resize it to around 1920 pixels wide, convert it to WebP or AVIF, and make sure it isn’t lazy-loaded. Bulk-optimise the gallery and let it lazy-load. Nothing about the look of the site changes. The mobile load time usually drops noticeably.
Common image mistakes
Using PNG for photos. PNG photos can be many times larger than necessary.
Uploading, then shrinking with CSS. The browser still downloads the full-size file.
Background images for important content. CSS backgrounds are discovered later by the browser, which can slow LCP.
Forgetting alt text. Not a speed issue, but descriptive alt text helps accessibility, image search and AI systems understand your content.
Optimising once and forgetting. New uploads by staff can undo everything. Automate it.
Quick checklist
- Resize to display size before uploading
- Compress every image
- Use WebP or AVIF for photos, SVG for logos and icons
- Set width and height
- Lazy-load below the fold, never the hero
- Write descriptive alt text
- Automate with a plugin so new uploads stay optimised
Then re-test with our foundation checker. Image fixes often show up immediately in your mobile score. For the rest of the speed picture, see our WordPress speed fixes.
Key takeaways
- Images are the most common cause of slow small business websites.
- Resize, compress, and convert to WebP or AVIF.
- Use SVG for logos and icons.
- Set dimensions to prevent layout shift.
- Lazy-load everything except the hero image.
Frequently asked questions
What is the best image format for websites?
For photos, WebP or AVIF. For logos and icons, SVG. Use PNG only when you need transparency and a modern format isn’t suitable.
Does WordPress support WebP and AVIF?
Yes. WordPress supports WebP uploads, and recent versions support AVIF. Plugins can convert existing images automatically.
What size should website images be?
Roughly the largest size they’re displayed. Around 1600 to 2000 pixels wide for full-width hero images, smaller for content images and thumbnails.
Should I lazy-load all images?
No. Lazy-load images below the first screen, but load the main above-the-fold image immediately.
Check your LCP and image opportunities in about a minute.
Check my foundation