The average South African mobile user pays around R85 per gigabyte on prepaid. A homepage that ships 6 MB of images costs that user about fifty cents of data, before they have read a single word. Compare that to a comparable site in Germany on a flat-rate plan and you can see why local conversion rates suffer.
This is not a vanity issue. Google's Core Web Vitals weigh Largest Contentful Paint heavily, and on a Cape Town 4G connection your hero image is almost always the LCP element. Heavy images mean slow LCP, which means lower rankings, which means less traffic, which means less revenue. Fix the images, fix the funnel.
The four things that matter
1. Format
If you are still serving JPEG or PNG everywhere, you are roughly doubling your image weight. WebP is supported in every browser that matters (including iOS Safari since 2020). AVIF is even smaller but encoding is slower and not all CMS plugins handle it cleanly yet. Default to WebP unless you have a specific reason otherwise. A typical 800 KB JPEG becomes a 180 KB WebP at the same visible quality.
2. Dimensions
The most common waste is serving a 4000-pixel-wide image into a 600-pixel-wide container. The browser scales it down for display but still has to download every byte. Use the actual rendered size as your target width, then add a 2x version for retina screens. Anything bigger is pure waste.
The srcset attribute lets the browser pick the right size for the viewport. WordPress generates these automatically when you upload through the media library, but custom themes and page builders frequently bypass that pipeline. Check your hero image by right-clicking it and choosing "Inspect" - if the srcset attribute is missing, you are serving one giant image to every device.
3. Compression
Photographs can be compressed to roughly 75 percent quality before the human eye notices anything. Most CMS defaults compress at 90 to 95, which keeps file sizes high for no visible benefit. Drop the default to 80 and you save 30 to 40 percent on every image.
For one-off compression: squoosh.app in the browser handles WebP, AVIF, and MozJPEG with side-by-side comparison. For batch work on a server: cwebp -q 80 input.jpg -o output.webp via the command line.
4. Lazy loading
Images below the fold should not load until the user scrolls near them. The native loading="lazy" attribute on img tags is supported everywhere and requires no JavaScript. Add it to every image that is not part of the hero or above-the-fold content. Your initial page weight drops dramatically and your LCP improves because the browser is not fighting to download images the user will never see.
WordPress quick wins
If you are on WordPress, three plugins do most of the work:
- EWWW Image Optimizer or Imagify for automatic WebP conversion on upload.
- WP Rocket or FlyingPress for lazy loading, CSS optimisation, and CDN integration.
- ShortPixel Adaptive Images if you want a service to serve correctly-sized images automatically.
Configure once, then forget. The combined saving on a typical SA business site is usually 60 to 75 percent of total image weight. That is the difference between a 7-second mobile load and a 2-second mobile load.
What about hosting?
Compression and format only go so far. If your host is in Europe or North America and your visitors are in South Africa, every image has to cross an ocean. A 200 KB image from Amsterdam to Johannesburg is still slow. The fix is a CDN that caches your images at edge locations closer to your visitors. Cloudflare's free tier covers most small sites. Bunny.net is cheap and has a Johannesburg point of presence. Either one cuts image latency by 60 to 80 percent for SA visitors.
Measure before and after
Run a health check on your site before you start, save the score, then check again after the optimisation pass. The image weight, LCP time, and overall mobile score should all improve measurably. The poor score sample shows what a heavy-image site looks like in a full report; the perfect score sample shows where you are aiming.
For the technical baseline, our free scan measures image weight, dimensions, modern format usage, and lazy-loading status across every page on your homepage and three internal pages. If you are an agency managing client sites, the Studio plan tracks these scores over time so you catch regressions when a client uploads a 5 MB JPEG to their new blog post.