How to compress images for a website

A practical guide · Updated June 2026

Images are usually the heaviest thing on a web page — often more than the HTML, CSS and JavaScript combined. Compressing them well is the single highest-impact thing most people can do to make a site faster, and it takes minutes, not hours. This guide walks through why bloated images slow you down, how compression actually works, and the exact settings, formats and file-size targets that keep pages fast without any visible loss of quality.

Why large images slow your site down

Every image on a page has to travel from a server to a visitor's device before it can be drawn on screen. A 3MB photo on a mobile connection can take several seconds to arrive, and while it loads the page looks broken or empty. That delay hurts you in three concrete ways:

• Core Web Vitals and LCP. Largest Contentful Paint measures how long it takes for the biggest visible element — very often a hero image — to finish loading. Google wants LCP under 2.5 seconds. A heavy hero image is the most common reason sites fail this metric.
• SEO rankings. Page speed is a confirmed ranking signal. Two pages with equally good content will not rank equally if one loads in 1.5 seconds and the other in 6. Faster pages get crawled more efficiently and tend to rank higher.
• Bounce rate and conversions. Studies consistently show that when load time climbs from 1 to 3 seconds, the probability of a visitor leaving jumps sharply. Slow pages lose sales, sign-ups and readers before the content even appears.

The good news: an image compressed correctly can be 60–80% smaller than the original with no difference the human eye can spot. That is essentially free performance.

How image compression actually works

There are two families of compression, and knowing the difference tells you which setting to reach for.

Lossy compression

Lossy compression permanently discards data the eye is unlikely to notice — subtle colour variations, fine detail in busy areas — in exchange for dramatically smaller files. JPG and lossy WebP work this way. You control how aggressive it is with a quality slider. This is what you want for photographs and most website imagery, because photos have so much detail that removing a little is invisible.

Lossless compression

Lossless compression rearranges and packs data more efficiently without throwing anything away, so the result is pixel-perfect. PNG and lossless WebP work this way. The savings are smaller, but the image is identical to the original. Use it for logos, icons, screenshots with sharp text, and anything with hard edges or transparency where lossy artifacts would show.

A simple decision: photos → lossy, graphics with crisp lines → lossless. Most pages are a mix, so you will use both.

Choosing the right quality setting

When you compress with a quality slider, the sweet spot for the web is 70–85%. Inside this band files shrink enormously while the difference stays invisible at normal viewing sizes. Here is what actually happens as you move the slider:

• 90–100%: barely smaller than the original — you are paying full price for detail nobody can see.
• 80–85%: the practical default. Excellent quality, typically 50–70% smaller than an uncompressed export.
• 70–79%: great for large background or hero images where a tiny softening is acceptable in return for a much lighter file.
• Below 60%: compression artifacts (blocky patches, halos around edges) start to appear. Avoid unless file size is critical.

A reliable habit is to start at 80%, look at the result at full size, and only drop lower if the file is still too big. Never re-compress an already-compressed JPG repeatedly — each save loses a little more, and the damage stacks up. Always compress from the highest-quality original you have.

Resize to display size before you compress

This is the step most people skip, and it is often worth more than the compression itself. Cameras and phones produce images 4000–6000 pixels wide, but a blog body is rarely wider than 800 pixels and a thumbnail might display at 200. Serving a 4000px image into an 800px slot means the browser downloads roughly five times more pixels than it can ever show and then throws the rest away.

So the correct order is resize first, then compress:

1. Find the widest the image is ever shown on your site (check the layout — content column, card, thumbnail).
2. Resize the image to that width. For sharp displays, exporting at roughly 1.5–2× the display width keeps it crisp on retina screens without going overboard.
3. Then apply 70–85% quality compression to the correctly-sized file.

As a quick reference for common slots:

• Full-width hero: 1600–2000px wide is plenty for almost any layout.
• In-content photo: 1000–1200px wide.
• Card / listing image: 600–800px wide.
• Thumbnail / avatar: 150–400px wide.

Pick the right format — usually WebP

Format choice compounds the savings from quality and resizing. For most modern sites the answer is WebP: at the same visual quality it is typically 25–35% smaller than JPG and far smaller than PNG, it supports transparency, and every current browser handles it. Convert your JPGs and PNGs to WebP and you often cut page weight by another third for free.

• WebP — the default for photos and graphics on a modern site.
• JPG — a safe fallback for photos when you need maximum compatibility with very old software.
• PNG — reach for it only when you need lossless graphics or transparency and cannot use WebP.
• AVIF — even smaller than WebP and increasingly supported; worth testing for large hero images.

If you are unsure which format a specific image should be, our image converter lets you try each one and compare the resulting file sizes in seconds.

Target file sizes to aim for

Numbers make this concrete. If you hit these targets, your pages will feel fast on almost any connection:

• Hero / banner image: under 200KB (ideally 100–150KB).
• In-content photo: under 100KB.
• Card / listing image: under 70KB.
• Thumbnail: under 50KB.
• Logo / icon (PNG or WebP): under 20KB.
• Total page weight: under 1–2MB, images included.

If a single image blows past 500KB after compression, it almost always means the dimensions are still too large — go back and resize before compressing harder.

A fast batch workflow

You rarely have just one image. Here is a repeatable process that scales from a single post to an entire gallery:

1. Gather the originals at the highest quality you have — never work from screenshots or already-shrunk copies.
2. Resize each image to its display width using the reference sizes above. Many tools let you set a maximum width and process a whole folder at once.
3. Convert to WebP (or AVIF) for the biggest format win.
4. Compress at 80% quality, then spot-check the largest files at full size.
5. Verify the totals — confirm no image exceeds its target and the page as a whole stays under 1–2MB.

Do this once for a template and every future image just follows the same recipe. It becomes a two-minute habit rather than a project.

Keep it private: compress in your browser

Many online compressors upload your images to a server to process them, which means your photos leave your device and sit on someone else's machine. That is a privacy and security concern for client work, personal photos, or anything confidential. The better option is a client-side tool that does everything in your browser — the image is processed locally and never uploaded anywhere.

Benefits of a client-side, in-browser approach:

• Privacy: your files never leave your computer.
• Speed: no upload or download round-trip, so large batches finish faster.
• No limits: you are not capped by a server's upload size or a daily quota.

All of Imagloo's tools work this way — the processing happens on your device, and nothing is sent to us.

Frequently asked questions

Try the free tools — in your browser

Put this guide into practice with Imagloo's free, private tools. Everything runs locally in your browser, so your images are never uploaded:

• Image Compressor — shrink file size at the right quality, no upload required.
• Image Resizer — set exact display dimensions before you compress.
• Image Converter — switch to WebP (or JPG/PNG) for the biggest format win.