Image optimizer and WebP converter

How to optimize images for the web

1. Add your images. Drop them on the box, click it to choose files, or paste a screenshot. You can add up to 50 at once, in any format your browser can open: JPG, PNG, WebP, AVIF, GIF, BMP and SVG.
2. Pick the output format. WebP is the smallest for websites. JPG works everywhere, including email and print. PNG is lossless and keeps transparency. Same keeps each file in its own format, which is what you want when you only need smaller files.
3. Set the quality or a target size. Quality 80 is a sensible start. If a form or a platform has a limit, such as 100 KB or 2 MB, switch to Target size and type it in.
4. Resize if the image is bigger than it will be shown. A phone photo is often 4,000 pixels wide or more. Few websites show an image wider than 2,000 pixels, so choosing a maximum width usually saves more than any quality setting.
5. Compare, then download. Click Compare on any file and drag the divider to see the original and the result side by side. Switch to 100% to check fine detail. Download each file, or all of them as a ZIP.

Image optimizer, image compressor, photo compressor: the names change, the job is the same. In the UK you will also see it spelled optimiser. Each file shows its size before and after and the percentage saved, so you know what you gained before you download anything.

WebP, JPG, PNG or AVIF: which format to use

The format decides more of the final size than the quality setting does. A rough guide:

Google, which created WebP, measured its lossy files at 25 to 34% smaller than JPEGs of the same visual quality, and its lossless files at 26% smaller than PNGs. Results vary with every image, which is why the tool shows the real number for each of yours. For logos and icons, consider SVG instead: a vector file stays sharp at any size and is often smaller than any of these.

Converting to WebP, and back

Drop PNG or JPG files and choose WebP to convert PNG to WebP or JPG to WebP in one go. Going the other way, for a program or a print shop that does not accept WebP, use the WebP to PNG converter, which keeps transparency, or the WebP to JPG converter for photos and smaller files.

How much quality can you drop?

The quality number is a dial for how much detail the encoder may throw away. It is not a percentage of the original, and quality 80 in WebP is not the same as 80 in JPG or AVIF. As a starting point:

• 85 to 90: large hero images and photos where people will look closely, such as products and portfolios.
• 75 to 85: most photos on a website. The difference from the original is hard to see without zooming in.
• 60 to 75: thumbnails and small images, where the eye cannot see the loss.
• Under 60: blocks and smears start to appear in skies, skin and smooth gradients.

Text, logos and screenshots behave differently from photos: sharp edges show compression sooner. Keep them as PNG, or use WebP at 90 or more. Whatever you choose, open Compare at 100% and look at the busiest part of the image and at any flat area, such as sky or a plain wall. If you cannot see a difference there, you will not see one on the page.

What size should images be for a website?

Size images for the space they fill on the page, times two for sharp screens. A blog column 800 pixels wide needs an image about 1,600 pixels wide; a full-width banner rarely needs more than 2,560. Anything larger is downloaded and then shrunk by the browser, which costs your visitors time for nothing.

That time matters most for the largest image near the top of the page. Google measures loading with Largest Contentful Paint (LCP), and counts a page as good when its largest element appears within 2.5 seconds. Three habits keep images from dragging that down:

• Width and height in the HTML. Give every image its width and height attributes, so the browser reserves the space and the text does not jump as the image arrives.
• Lazy loading below the first screen. Add loading="lazy" to images further down the page, and never to the main image at the top.
• Several sizes for several screens. With srcset, a phone downloads a 800 pixel version and a large monitor a 1,600 pixel one. Run the same images through this tool twice, at two widths, to make both.

Why PNG files barely shrink here

PNG is lossless, so a PNG encoder cannot throw detail away; it can only pack the same pixels more tightly. Browsers pack them quickly rather than as tightly as possible, so a PNG saved here can come out about the same size as your original, or bigger. When that happens and the format and size have not changed, the tool keeps your original file.

Services that cut PNGs by 60 to 80% do something different: they reduce the image to a palette of 256 colors or fewer, which works well for flat graphics and badly for photos. This tool does not reduce colors. If your PNG is a photo or a cutout with a transparent background, convert it to WebP: transparency is kept and the file is usually a small fraction of the size. Try the sample above to see it.

What the optimizer removes from your files

Photos from phones and cameras carry EXIF metadata: the camera model, the date and time, and often the exact GPS location where the photo was taken. Every file this tool creates is drawn fresh from the pixels, so none of that is copied. That makes the files a little smaller and safer to publish. The rotation stored in the metadata is applied to the pixels first, so portrait photos stay upright.

Two more things change. Color profiles are not embedded: the browser converts the image to standard sRGB, the color space of the web, so photos shot in a wider color space can look slightly less vivid. And animated GIFs and WebPs keep only their first frame. If you need the metadata, the profile or the animation, keep your original file.

Sources