Website Image Optimization: The Fastest Way to Speed Up Your Site

Images Are Usually the #1 Speed Problem

On the average small business website, images account for 50–80% of total page weight. A single unoptimized hero image can be 4–8MB — larger than the entire rest of the page combined. Fixing your images is usually the single fastest way to improve your PageSpeed score.

Use WebP Format

WebP images are 25–35% smaller than equivalent JPEG files with no visible quality loss. Every modern browser supports WebP. If your website is still serving JPEG and PNG files, converting to WebP is the single biggest optimization you can make.

For images that need transparency (logos, icons), WebP also replaces PNG with significantly smaller file sizes.

Resize Before Uploading

If your hero image displays at 1200px wide on screen, don’t upload a 4000px wide original. The browser downloads the full 4000px file and then shrinks it — wasting bandwidth and slowing the page. Resize images to their maximum display size before uploading.

For most small business websites: hero images at 1400–1600px wide, content images at 800–1000px wide, thumbnails at 300–400px wide.

Compress Everything

After resizing, compress. Tools like Squoosh (free, browser-based) let you adjust quality and see the file size reduction in real time. For photos, 75–85% quality is visually identical to 100% but 60–70% smaller.

Implement Lazy Loading

Lazy loading tells the browser to only download images when they’re about to enter the viewport. Images below the fold don’t load until the user scrolls to them. This is a one-line code change: add loading="lazy" to every <img> tag except above-the-fold images.

Always Set Width and Height

Every <img> tag should have explicit width and height attributes. This prevents Cumulative Layout Shift (CLS) — that annoying jump when images load and push content around. The browser reserves space before the image downloads.