How to Prepare Images for a Fast Website

When a website loads slowly, the usual reaction is to suspect the hosting, the code, or some heavy plugin — and sometimes that really is the problem. But in the vast majority of real-world cases, the main culprit is images: a handful of unoptimized photos can weigh more than the rest of the page combined. Before switching servers or touching any code, it's worth running through this checklist.

Why images are almost always the bottleneck

The HTML, CSS, and JavaScript of a typical page together weigh just a few hundred kilobytes on most sites. Images, on the other hand, can easily exceed several megabytes if they haven't been optimized — a single uncompressed hero photo can weigh more than the rest of the page put together. That's why optimizing images usually delivers the biggest speed improvement for the smallest effort, compared with code optimizations that demand far more work for a smaller payoff.

The checklist, in order of impact

1) The right format. WebP or AVIF instead of JPG or PNG by default — at equivalent visual quality, they typically weigh considerably less. We cover this in detail in theformats guide.

2) A pixel size matched to the actual display space. If the image is shown at 800 pixels wide, there's no point serving a 4000-pixel file — the browser has to download and process all that excess data only to shrink it down visually afterward.

3) Compression set right. Neither uncompressed (unnecessary weight) nor over-compressed (visible artifacts) — the quality range that gives the best balance, which we cover in the article on how to reduce a JPG's file size without losing quality.

4) Lazy loading. HTML's native loading="lazy" attribute stops the browser from loading images the user never scrolls down to see — no external library needed, just add that attribute to any images below the initial screen.

5) Dimensions declared in the HTML. Specifying width and heighton the image tag lets the browser reserve the exact amount of space before the image finishes loading, preventing the rest of the content from "jumping" around it — something Google measures specifically as CLS (Cumulative Layout Shift), another of the Core Web Vitals metrics.

How to handle all of this at once

Points 1, 2, and 3 are solved in a single step withthe SMALLIMG compressor: upload the batch of images from your site, choose the output format, maximum width, and quality, and download everything ready to upload. Points 4 and 5 are changes made directly in your site's HTML or template — most modern content management systems (WordPress included, since version 5.5) already enable lazy loading by default, so sometimes all you need to do is check it hasn't been turned off.