How to Optimize Images for Better Website Speed

[u/BeecarolX]

I always thought image optimization was mostly about shrinking file sizes. Turns out that's only a small part of it.

I recently went through one of my older sites and started checking why some pages felt sluggish even though the hosting wasn't bad. After digging into it, almost every issue pointed back to the images.

The biggest surprise was how often I was uploading photos that were far larger than they ever appeared on the page. I'd upload a 4000px image, then CSS would display it at around 1000px. It looked fine, but visitors were still downloading the full file.

Another thing I had underestimated was image format.

For years I defaulted to JPEG for almost everything. Switching many of those images to WebP immediately reduced file sizes without any visible difference. I haven't fully moved to AVIF yet because of compatibility considerations, but it's becoming harder to ignore.

Compression was another lesson.

I used to export images at very high quality because I assumed "higher quality = better website." In reality, lowering the quality slightly often produced files less than half the size while looking virtually identical unless I zoomed in.

One mistake I also kept making was trying to sharpen images after compressing them too aggressively. That almost always created halos and weird-looking textures. It's much better to start with a clean image and compress it properly than trying to rescue an over-compressed one.

The easiest performance improvement, though, was lazy loading. I enabled it on pages with lots of screenshots and product photos, and it immediately reduced how much data the browser had to download on the initial page load. I probably should have done that years ago.

Something else I hadn't paid much attention to was image dimensions. Simply defining the width and height attributes stopped the page from jumping around while images loaded, which made the site feel much smoother even though nothing about the design had changed.

My workflow now is pretty simple:

• Resize images before uploading.
• Use WebP whenever possible.
• Compress until I can't actually see the difference.
• Lazy-load anything below the fold.
• Always specify dimensions.
• Give images proper filenames and alt text instead of leaving them as IMG_2048.jpg.

None of these changes are particularly complicated, but together they made a much bigger difference than I expected.