How to compress images for your website

Updated October 10, 2026 · RelMedia

Quick answer

Resize each photo to the largest width it is actually displayed at, save it as WebP, and aim for roughly 250 KB for a full-width banner, 150 KB for a large image and under 100 KB for images in text.

Image	Width	Target weight
Full-width banner, Retina	2400 px	≤ 380 KB
Full-width banner	1920 px	≤ 250 KB
Large image in a page	1200 px	≤ 150 KB
Image in an article	800 px	≤ 90 KB
Thumbnail, card	400 px	≤ 35 KB

Open CrispSize with the website sizes selected →Free · nothing is uploaded · no sign-up

The rule that matters most

A photo should never be wider than the largest space it fills on screen. A 4000 px photo shown at 800 px makes visitors download about 25 times more pixels than needed. Resizing is usually a bigger win than any compression setting.

Compression without visible loss

CrispSize's Smart mode lowers quality step by step until each file fits its target weight, but never below a quality floor, so photos stay sharp. Max quality mode is there for portfolios and print previews.

HTML tips for good Core Web Vitals

Add width and height on every image so the page doesn't jump while loading.
Add loading="lazy" to images below the fold, but never to your main banner.
Give the main banner fetchpriority="high": it is usually your Largest Contentful Paint.
Use srcset so phones download the 800 px version, not the 2400 px one. CrispSize writes this code for you.

Name your files

Use words, not camera numbers: red-leather-chair-1200w.webp helps Google Images more than IMG_4821.jpg. CrispSize can rename a whole batch with a pattern.

Compress your website images

Open CrispSize: the website sizes are pre-selected, in WebP.
Drop your photos and keep Smart compression on.
Download the ZIP and paste the code from web/picture-snippets.html into your site.

Open CrispSize with the website sizes selected →Free · nothing is uploaded · no sign-up

Questions

What is a good image size for a website?

Match the display width: around 1920 px for full-width banners, 1200 px for large images and 800 px for images in text, saved as WebP.

How many KB should a website image be?

Roughly 250 KB or less for a full-width banner, 150 KB for a large image and under 100 KB for images in text.

Does compressing images improve SEO?

Indirectly, yes: lighter images make pages load faster, which improves Core Web Vitals and user experience, both of which Google measures.

Is it safe to compress client photos online?

With CrispSize, nothing is uploaded: compression runs in your browser.