Compress Images for Website Speed and SEO (2026)
Short answer: large images are usually the heaviest element on a page, so they slow down Largest Contentful Paint and hurt Core Web Vitals and SEO. The fix is one pass: resize each image to the size it will actually be shown at, then compress it to the right format and quality. We measured a typical phone photo dropping from roughly 2.5 MB to about 80 KB with no visible quality loss, and the whole thing runs in your browser with nothing uploaded.
Why do large images hurt your website speed and SEO?
Images are typically the largest bytes on a page and often the largest visible element. Google's Largest Contentful Paint metric measures when the biggest element finishes loading, and a multi-megabyte hero image is very often that element. When the hero takes several seconds to paint, the page feels slow even if everything else is ready. That is a Core Web Vital, and Core Web Vitals feed into page experience and rankings.
There is a second cost: data. A visitor on a mobile connection pays for every kilobyte you make them download. A 3 MB photo that could have been 60 KB wastes the visitor's data and makes them more likely to leave before the page is usable.
How do I compress images for my website?
Work in this order, once per image, from the original file:
- Resize to the display size. Do not upload a 4000-pixel phone photo for a 1200-pixel-wide hero slot. Resize to the size the image will actually be shown at on the page.
- Choose the format. JPEG for photos, WebP for smaller files at the same visible quality, PNG only when you need transparency.
- Compress in one pass. Run the resized image through the compressor, pick a quality that keeps it crisp, and check the file size before you upload.
- Set width and height. Add the image's actual width and height in the page markup so the browser reserves space and the layout does not shift while the image loads.
Always start from the original file. Compressing an already-compressed image, then resizing it, then compressing again, stacks damage and produces soft, blocky results.
What is the right image size for a website?
Match the image to its display size. Uploading more pixels than the screen can show buys nothing but load time.
| Image use | Suggested width | Format | Target file size |
|---|---|---|---|
| Hero or banner (full width) | 1200 to 2000 px | JPEG or WebP | 80 KB to 200 KB |
| Content image inside an article | 800 to 1200 px | JPEG or WebP | 40 KB to 100 KB |
| Thumbnail or small card | 300 to 600 px | JPEG or WebP | 10 KB to 40 KB |
| Logo or icon | under 300 px | PNG or SVG | under 20 KB |
These are starting points, not rules. A complex photograph needs more bytes than a flat illustration, so check the actual result rather than chasing a number.
JPEG or WebP for website images?
JPEG is the safe default: every browser supports it, and it handles photos and complex images well. WebP is usually 25 to 35 percent smaller than an equivalent JPEG at the same visible quality, and every modern browser supports it. Use WebP when you want smaller files and can accept that a very small share of visitors on older browsers may need a fallback.
PNG keeps transparency and sharp edges, but a photographic PNG is usually much larger than the same image as JPEG or WebP. Reserve PNG for logos, icons, screenshots with text, and anything that needs a transparent background.
| Format | Best for | Trade-off |
|---|---|---|
| JPEG | Photos, complex images, broad support | No transparency; quality drops at low settings |
| WebP | Photos, smaller files, modern browsers | Older browsers may need a fallback |
| PNG | Transparency, sharp edges, text screenshots | Larger file size for photos |
Will compressing images make them blurry?
Only if you overdo it. Moderate compression removes data the eye cannot easily see, so a photo at quality 75 to 85 usually looks identical to the original at a fraction of the size. Quality 95 to 100 keeps almost everything but the file stays large. Below quality 60, faces and text start to look soft or blocky.
| Quality setting | What you get | When to use |
|---|---|---|
| 90 to 100 | Nearly lossless, large file | When detail matters more than speed |
| 75 to 85 | Crisp to the eye, much smaller | Most website photos |
| 60 to 70 | Small file, slight softness possible | Background images, thumbnails |
| Below 60 | Very small, visible blocks and soft edges | Avoid for anything visitors look at |
The honest point: compression discards detail and you cannot get it back. If an image already looks soft, compressing it will not sharpen it. Start from a good original.
Should I resize or compress images first?
Resize first, then compress. Resizing removes the pixels you do not need for the display size; compression then shrinks the remaining file. If you compress a huge image first and resize it after, you do more work than necessary and can still end up with a file that misses your size target. The one exception is when an image is already exactly the right display size and only needs a KB trim - then compression alone is enough.
What compression cannot fix (honest limits)
- Compression cannot sharpen a blurry photo. If the original is out of focus, a smaller file will still be out of focus.
- Resizing alone does not guarantee an exact KB target. A downscaled photo can still miss a limit; compression is the separate step that hits a size ceiling.
- Lossy detail is gone forever. Once you compress and save, the discarded detail cannot be recovered. Keep your originals.
- WebP is not universal. Very old browsers may not render WebP; use JPEG as the fallback or serve WebP only where supported.
- Compression will not fix every SEO problem. It helps Largest Contentful Paint and page speed, but content, links, and technical health still matter.
What we actually checked
We took a typical phone photo of an outdoor scene at roughly 4032 by 3024 pixels and about 2.5 MB, then produced website-ready versions: resized to 1200 pixels wide as JPEG quality 80 (about 110 KB), resized to 1200 pixels wide as WebP quality 80 (about 80 KB), and resized to 800 pixels wide as JPEG quality 80 (about 55 KB). At 100 percent zoom the JPEG quality 80 and WebP versions looked essentially identical to the original, while the file dropped by more than 95 percent. These are representative results from one test session, not a guarantee for every camera or image; your exact bytes depend on content, complexity, and settings.
What this check does not cover: we did not test responsive image markup (srcset and sizes), CDN delivery, or lazy loading, all of which are separate layers that can further improve page speed. Compression is the first step, not the whole performance story.
For a single image or a whole folder, our Image Compressor handles resize and compression in one pass in your browser, and if you need exact pixel dimensions first, the Image Resizer is the right step before compression. Nothing is uploaded and nothing is stored.
Quick FAQ
How do I compress images for my website without losing quality?
Resize each image to the size it will actually be shown at on the page, then compress in one pass from the original file. Choose JPEG for photos, WebP for smaller files with the same visible quality, and check the result at 100 percent zoom before you upload. Never resize the same file over and over; always start from the original.
What is the best image format for a website in 2026?
Use JPEG for photos and complex images where broad browser support matters. Use WebP for smaller files at the same visible quality; it is supported by all modern browsers. Use PNG only when you need a transparent background, since PNG files are usually larger than an equivalent JPEG or WebP.
What size should website images be?
Match the image to its display size: a full-width hero around 1200 to 2000 pixels wide, a content image around 800 to 1200 pixels wide, and a thumbnail around 300 to 600 pixels wide. Uploading a 4000-pixel phone photo for a 1200-pixel slot wastes bytes and slows the page for no visible benefit.
Does compressing images improve SEO and Core Web Vitals?
Yes, indirectly. Images are usually the largest element on a page, so smaller images load faster and improve Largest Contentful Paint, which is a Core Web Vital. Faster pages also tend to rank better and keep visitors longer. Compression alone will not fix every SEO issue, but it is one of the fastest wins.
Should I resize or compress images first?
Resize first, then compress. Resizing to the display size removes the pixels you do not need; compression then shrinks the file further. If you compress first and resize later, you waste work and can end up with a file that is still too large or too soft.
For related file problems, see our guides on batch compressing images and JPEG versus WebP versus PNG, or browse the full blog for more tested file guides.