Which images should I fix first?

The large image visible in the first screenful. Its load time directly sets your LCP score. Images further down the page can be deferred with lazy loading, which removes them from the first-paint budget entirely.

Do I really need width and height on every image?

Yes. Without dimensions the browser cannot reserve space, so the text jumps when the image arrives, and that hurts your CLS score. Writing the real pixel dimensions eliminates the shift.

Can a CDN or image service handle this for me?

It helps, but an oversized original is still an oversized original. Even when the service downsizes automatically, you pay to transfer and transcode the big file, so trimming at upload time is the more fundamental fix.

Should I lazy-load every image?

No. Lazy-loading an image that is visible on arrival delays it and makes LCP worse. Load first-screen images eagerly and apply loading=lazy only below the fold.

An Image Optimization Checklist for a Faster Website

Web image optimization comes down to four steps: pick the format, resize, compress, then lazy-load. Resizing dominates the others. In our measurements, taking a photo's width from 1600px down to 800px cut the file from 269KB to 33KB, an eightfold saving. Serving a 4000px original for a slot that displays at 800px is the real reason most sites feel slow.

The most common reason a web page feels slow is not complicated code but heavy images. On most sites images account for more than half of the bytes transferred, and a photo straight from a camera can weigh several megabytes on its own if you upload it untouched. The good news is that image optimization is an area where a few simple principles let anyone see a big payoff.

This article is a practical checklist you can follow without diving deep into code. We go in order from choosing a format to resizing, compressing, and how images load.

1. Choose the Right Format for the Job

Getting the format right alone can shrink files dramatically. The key question is: is it a photo, or is it a graphic?

Photos and realistic images: JPG fits best. It excels at compressing color-rich images into small files.
Logos, icons, shapes, transparent backgrounds: PNG fits best. It keeps lines crisp and supports transparency.
PNG photos that don't need transparency: converting PNG to JPG cuts the size sharply with almost no visible quality loss.

2. Resize to the Size That's Actually Displayed

This is the most common and most wasteful mistake. An image shows at 800 pixels wide on screen, yet people often upload the original 4000-pixel photo as-is. The browser downloads that huge image and then shrinks it for display, so the user wastes several times the data on pixels they never even see.

The rule is simple: resize to just slightly larger than the size actually displayed. Even accounting for high-resolution (Retina) screens, twice the display size is plenty. Anything beyond that adds little.

3. Compress to Trim the Last of the Fat

Once format and size are sorted, compression is the final step. JPG lets you dial quality up or down, and lowering it to around 80% removes noticeable weight while most people can't tell the difference. Setting a target file size and fitting under it is the most convenient approach in practice.

The 75-85% quality range is the sweet spot between quality and size.
The larger the image — like a hero banner — the bigger the compression payoff.
Always eyeball the result after compressing to check there's no excessive loss.

4. Lazy-Load to Speed Up the First Screen

Separate from shrinking the files themselves, when you load them matters too. There is no need to download every image up front when some of them only appear far down the page. Loading them as the user scrolls close makes the first screen appear much faster.

Adding a single loading="lazy" attribute to an HTML image tag lets modern browsers handle lazy loading for you. Just don't apply it to the key image visible at the very top of the screen — that can actually delay its appearance.

Apply It Right Away with Switching

Of the checklist above, format, resizing, and compression can be handled directly with Switching's tools. Use image resize to match the display size, image compress to get under a target size, and convert PNG to JPG for PNGs that don't need transparency. Everything runs inside your browser, so you can finish optimizing without uploading your files anywhere.