Image compressor: WebP, AVIF, JPEG, PNG.

Your browser can already decode and encode images, so this tool uses those built-in codecs instead of a server. Each file is decoded with createImageBitmap, drawn onto a canvas at the size you choose, and encoded again with canvas.toBlob in the format and quality you pick. Files never leave the tab, which makes the tool safe for client photos, unreleased designs and screenshots of internal systems.

Because the browser does the encoding, results depend slightly on the browser. Chromium-based browsers and Firefox can encode WebP; Safari currently cannot, so it offers JPEG and PNG. AVIF encoding through a canvas is not widely available, so the tool asks your browser at load time and shows the AVIF option only where it actually works rather than silently handing back a PNG.

JPEG is the universal format for photos. It is lossy, has no transparency, and still compresses photographs well. PNG is lossless and supports transparency, which suits logos, icons, UI screenshots and diagrams with flat colour and sharp text, but it is a poor choice for photos: a PNG photo is often ten times the size of a good JPEG.

WebP handles both jobs. Lossy WebP is typically smaller than JPEG at similar visual quality, and it supports transparency, so it can replace both JPEG photos and many PNGs. Every current major browser displays WebP. AVIF, based on the AV1 video codec, usually compresses photos further still, especially at lower qualities, and is also displayed by all current major browsers. It is slower to encode, which matters for build pipelines rather than for single files.

The panel under the settings encodes the same image in every format your browser supports, at your current quality and size, so you can see the real trade-off for that specific image instead of relying on averages.

For photographs, a quality between 65 and 80 is the usual sweet spot for both WebP and JPEG: files shrink dramatically and most people cannot see a difference at normal viewing size. Below about 50 you start to see blocky areas in skies and smears in fine texture. Screenshots with text show artefacts sooner, so try a higher quality, or lossless PNG, for those.

Do not judge by numbers alone. The comparison slider is there so you can drag across faces, text and gradients, which is where compression shows first. Quality values are not comparable between formats either: WebP at 70 and JPEG at 70 do not mean the same thing.

Camera and phone photos are often 4,000 pixels or more across. A blog post column is rarely wider than 800 CSS pixels, so even on a high-density screen an image of 1,600 pixels is plenty. Halving the width cuts the pixel count by three quarters, which usually saves more than any quality setting. That is why the tool defaults to a 1,600 px longest side.

On a real site, serve several sizes with srcset and sizes so phones download small files, and use the picture element to offer AVIF or WebP with a JPEG fallback where you need one. Give every image width and height attributes so the layout does not shift as it loads. These steps feed directly into Core Web Vitals; our guide to improving LCP, INP and CLS covers the rest.

On most content pages the largest element above the fold is an image, which makes it the Largest Contentful Paint element. A heavy hero image directly delays LCP. Compress it, size it to its display width, never lazy-load it, and consider fetchpriority="high" so the browser requests it early. Images further down the page should use loading="lazy".

A content delivery network with image resizing can automate much of this for large sites. For a marketing site or a store with a few hundred images, compressing at upload time with a tool like this one is often enough.

Re-encoding through a canvas removes metadata: EXIF camera details, GPS location, timestamps and embedded thumbnails are not copied to the output. That is good for privacy and saves a few kilobytes, but if you need to keep copyright or location data, use a desktop tool that preserves it.

Orientation is applied before encoding, so portrait phone photos come out upright. Canvas output is in sRGB, so photos shot in a wide-gamut space such as Display P3 may lose a little saturation in the most vivid colours. Animated GIFs and animated WebP files are flattened to their first frame.

Search engines read more than the pixels. Give files descriptive names before you upload them, such as walnut-dining-table.webp rather than IMG_2041.webp, and write alt text that describes what the image shows in the context of the page. Alt text is what screen reader users hear and what search engines use to understand the image; decorative images should have an empty alt attribute so they are skipped.

Converting a site's images to WebP does not change their URLs if your platform rewrites them, but if you replace files by hand, update every reference and redirect the old image URLs if they were linked from elsewhere. Keep the same aspect ratio when you resize, or set width and height to the new values, so the page does not shift as images load. Our e-commerce launch checklist covers product image standards in more detail, and accessibility testing is how we check alt text across whole sites.

For a one-off page, blog post or a batch of product photos, a browser tool is quick and private. For a site that publishes images every day, build the same steps into your upload pipeline or CMS so nobody has to remember them.