How to compress images for a website

Step by step

1. Decide the display size. Check how wide the image appears on the page. A full-width hero rarely needs more than 1,600 px; a blog image 1,200 px; a product thumbnail 400 px. Double those figures for retina screens only if the image is small.
2. Resize first. Open Resize Image, drop the photos in, set Resize by to Width (keep aspect ratio), type the width and click Resize. A 4,000 px phone photo at 1,200 px is already a tenth of the pixels.
3. Compress photos as JPG. Open Compress JPG, drop the resized files in and leave Quality at 75. Click Compress JPG and compare the before and after sizes in the result list.
4. Compress screenshots and graphics as PNG. Open Compress PNG and keep Method on Lossy (reduce colours, much smaller) with Colours at 256. Click Compress PNG. Flat-colour images lose nothing visible.
5. Consider WebP. If your platform serves WebP (WordPress, Shopify, Squarespace and most static hosts do), run the JPGs through JPG to WebP at quality 80 for a further 25 to 35 percent saving.
6. Download and upload. Click Download all as ZIP, then upload the compressed set to your CMS. Keep the originals in a folder in case you need a larger crop later.

Why resize before compressing?

File size scales with pixel count far more than with quality setting. A 12 MP phone photo is 4,032 by 3,024 pixels; shown at 1,200 px wide in a blog post, the browser throws away 90 percent of those pixels after downloading all of them. Resizing to the display width removes that waste before compression starts, and it is the single biggest saving available. Compression quality then handles the remaining 60 to 80 percent.

How much does each step save?

The table shows a typical phone photo through the full routine. The resize does most of the work; quality 75 does most of the rest; WebP shaves a final quarter off. Visually, the quality 75 JPG and the WebP are indistinguishable from the original at normal viewing distance on a laptop or phone screen.

What size should web images be?

There is no single correct number, but these targets keep pages fast on UK mobile connections and satisfy Google's Core Web Vitals thresholds for Largest Contentful Paint. Aim for the hero image under 200 KB, inline images under 100 KB and thumbnails under 30 KB. Total image weight on a page should stay under 1 MB.

Which format should I use for each image?

JPG is lossy, has no transparency and is best for photographs. PNG is lossless, supports transparency and is best for screenshots and graphics with flat colours and sharp edges. WebP is 25 to 35 percent smaller than JPG at equal quality, supports transparency and animation, and has worked in every major browser since Safari 14 in 2020, so it is safe to use as a primary format today. SVG is a vector format that scales without loss and is the right choice for logos and icons. Keep GIF for nothing new: it is limited to 256 colours and makes large files.

Will lossy PNG compression ruin my screenshots?

Almost never. Lossy PNG works by reducing the palette to at most 256 colours and dithering the rest. A screenshot of a web page or app uses a few dozen distinct colours, so nothing is lost and the file shrinks 60 to 80 percent. The exceptions are screenshots containing photographs or smooth gradients, where banding can appear; for those, convert to JPG or WebP instead.

Does compressing in the browser cost quality compared with desktop software?

No. Kilnfile uses the same encoders that desktop tools use, compiled to run in your browser tab, so a quality 75 JPG from Kilnfile is the same quality 75 JPG you would get from an image editor. The advantage is that nothing is uploaded, there is no file limit and no watermark, and a batch of 100 product photos can be processed in one drag.

Frequently asked questions