How to Optimize Images for a Faster Website

Open the developer tools on almost any slow website and you will find the same culprit: a handful of images weighing several megabytes each. According to the HTTP Archive's ongoing measurements, images consistently account for roughly 40–50% of the median page's total bytes — more than scripts, styles and fonts combined. The good news: no other optimization gives you as much speed for as little effort. This guide walks through the five steps in order of impact.

Why image weight matters more than ever

Three reasons, beyond simple politeness to your visitors:

• Search ranking. Google's Core Web Vitals — especially Largest Contentful Paint (LCP), which is very often an image — feed directly into ranking. A hero image that takes four seconds to appear is an SEO problem, not just a design problem.
• Mobile reality. Most traffic is mobile, often on mediocre connections. A 3 MB photo that loads instantly on office Wi-Fi takes ten seconds on a weak 4G signal — and most visitors abandon before that.
• Conversion and revenue. Every additional second of load time measurably increases bounce rate. For ad-supported and e-commerce sites alike, slow images are lost income.

Step 1: Resize to the dimensions you actually display

This is the biggest win and the most commonly skipped. A camera photo is around 4000×3000 pixels; a blog content column is typically 700–900 pixels wide. Serving the full-size original means shipping up to 20× more pixels than anyone will ever see — the browser just throws them away after downloading.

Rule of thumb: resize each image to at most 2× its largest displayed width (the 2× covers high-density "Retina" screens). Displaying at 800 px wide? Export at 1600 px maximum. Our Image Resizer does this in the browser in seconds — presets included, nothing uploaded.

Step 2: Compress with intent

Once the pixel count is right, choose the quality level deliberately:

• Quality 80–85 is the professional default for photos on the web. Nearly all publishing platforms compress to this range internally.
• Quality 90+ only for images the user will inspect closely — portfolio photography, product zooms.
• Quality 65–75 for thumbnails, backgrounds and decorative images where nobody studies the detail.

A typical 1600 px photo drops from ~800 KB at quality 100 to ~150 KB at quality 82 with no difference visible at normal viewing distance. If your source is a PNG photo, converting it with our PNG to JPG converter routinely cuts 60–90% of the weight in one move.

Step 3: Pick the right format

The short version of our PNG vs JPG guide: photos travel as JPG (or better, WebP), graphics travel as PNG (or better, SVG for vector art). WebP deserves special mention for websites: it compresses photos roughly 25–35% smaller than equivalent-quality JPG, supports transparency, and has been supported by every major browser for years. Our Image Resizer exports WebP directly.

AVIF compresses even harder but encodes slowly and still meets occasional tool friction — adopt it when your pipeline makes it effortless, not before.

Step 4: Let the browser help — lazy loading and dimensions

Two HTML attributes do a surprising amount of work:

• loading="lazy" on images below the first screen tells the browser not to download them until the visitor scrolls near. A long article with twenty images initially loads only the two or three visible ones. Do not lazy-load the hero image — that delays your LCP instead of improving it.
• width and height attributes (or CSS aspect-ratio) let the browser reserve the correct space before the image arrives, eliminating the layout jumps that Google measures as Cumulative Layout Shift (CLS).

For sites with international audiences, serving images from a CDN adds a further, purely infrastructural win — the bytes simply start closer to the visitor.

Step 5: Audit what you already published

New habits fix new pages; old pages keep leaking. Once a quarter, run your key pages through Google's PageSpeed Insights and look at two line items: "Properly size images" and "Serve images in next-gen formats". They list the exact offending files with potential savings — a ready-made to-do list. Fix the heaviest five images first; the distribution is always top-heavy and an hour of work usually removes most of the excess weight.

A realistic before-and-after

A typical small-business homepage we see: five camera-original JPGs totalling 11 MB. After the workflow above — resized to display dimensions, quality 82, hero excepted from lazy loading — the same page ships about 900 KB of images. Load time on 4G drops from ~12 seconds to under 3. Nothing about the design changed; every image looks identical at normal size. That is the routine result, not the best case.

The checklist

1. Resize every image to ≤ 2× its displayed width.
2. Compress photos at quality 80–85.
3. Photos → JPG/WebP; graphics → PNG/SVG.
4. loading="lazy" below the fold; explicit width/height everywhere.
5. Quarterly PageSpeed audit; fix the top five offenders.