Guide

Image optimization for the web

Updated 2026 · ~5 min read · by kizura

Images are usually the heaviest part of a web page. Optimizing them is the single biggest thing most sites can do to load faster, rank better, and keep visitors from leaving. Here is a practical, no-jargon workflow.

Why images matter for speed

Unoptimized images can be several megabytes each. On mobile connections that means seconds of waiting, and visitors abandon slow pages. Search engines also factor loading speed into rankings, so heavy images quietly hurt SEO. The good news: most images can shrink by 60-80% with no visible quality loss.

Step 1 - Pick the right format

Use WEBP for almost everything on the web - it is 25-35% smaller than JPG or PNG at the same quality and supported by every modern browser. Use JPG for photos needing maximum compatibility, and PNG for graphics, logos, screenshots, and transparency. Our converter switches between all three in your browser. See the PNG vs JPG vs WEBP guide.

Step 2 - Right-size before you upload

A common mistake is uploading a 4000px photo that displays at 800px - the browser downloads all those wasted pixels. Resize to the largest size the image will actually display. Use the resize tool for exact dimensions. If an image is too small, upscale it rather than stretching it in CSS.

Step 3 - Compress smartly

For photos, quality around 75-85% is usually indistinguishable from the original while cutting file size dramatically. Our compressor shows the resulting size live. See the compression guide for lossy vs lossless.

Quick optimization checklist

Convert to WEBP (or JPG for universal photos).
Resize to real display dimensions.
Compress to ~80% and check it still looks good.
Strip metadata to save KB and protect privacy (EXIF remover).
For many images, chain resize -> compress in the Studio.

Start with the compressor or converter.

Why image weight is the first thing to optimise

On a typical content page, images are half or more of the bytes a visitor downloads, and the hero image is very often the Largest Contentful Paint element — the thing Google’s Core Web Vitals clock measures when it decides whether your page “feels fast”. Optimising images is therefore the rare SEO task with a mechanical, measurable payoff: fewer bytes → earlier LCP → better page-experience signal, plus lower bounce on slow connections. And the wins are big: in our measurements, simply resizing a 2,400 px photo to 1,600 px and exporting WebP q75 cut it from 2,683 KB to 674 KB — a 75% reduction with no visible change at display size.

A five-step optimisation pipeline

1. Size to the layout, not the camera. Measure the widest your image ever renders (browser dev tools → hover the element). Export at that width ×2 for retina screens — a 600 px column wants a 1,200 px file, not the 4,000 px original.
2. Choose format by content. Photos → WebP (JPG fallback if your stack needs it). UI screenshots, logos, charts → PNG or lossless WebP. Our measured table in the formats guide shows why this single decision can be a 5× difference.
3. Compress to the knee of the curve. Quality 75–82 for photographic WebP/JPG is the sweet spot; below q60 the savings flatten while artifacts bloom (measured: q60→q40 saved only 10 KB on our test photo).
4. Strip metadata. EXIF blocks add weight and can leak GPS coordinates — one pass through the EXIF remover before publishing.
5. Let the browser be lazy. Add loading="lazy" to below-the-fold images and always set width/height attributes so the layout doesn’t jump (that jump is the CLS metric).

Serving the right size to the right screen

One file cannot be optimal for both a 360 px phone and a 4K monitor. The srcset attribute lets you export a small ladder of sizes and let the browser pick: <img src="photo-1200.webp" srcset="photo-800.webp 800w, photo-1200.webp 1200w, photo-1600.webp 1600w" sizes="(max-width:700px) 100vw, 700px">. Our resize ladder shows what that ladder is worth — the same photo weighed 1,851 KB at 2,400 px, 834 KB at 1,600 px, 482 KB at 1,200 px and 221 KB at 800 px — so a phone user downloads an eighth of what a desktop user does. Generate the ladder in one pass with the resize tool (batch mode) or chain resize → compress in the Studio, then spot-check your page with Lighthouse or PageSpeed Insights: its “Properly size images” audit will confirm the savings you just banked.