Optimize images for a website.

WebP, with a JPEG fallback if you must support very old browsers. At the same visual quality it is a quarter to a third smaller than JPEG and it keeps transparency, so it also replaces most PNGs. Every current browser decodes it.

The width it is drawn at, or twice that for retina screens. A full-width hero on a 1920 pixel layout needs 1920 pixels; a 400 pixel card image needs 400 to 800. Serving a 4000 pixel photo in a 400 pixel slot wastes bandwidth and time.

Images are usually the largest thing on a page and the hero image is often the Largest Contentful Paint element. Google wants LCP under 2.5 seconds; bringing a 2 MB hero to 200 KB is the single biggest step most pages can take.

Between 60 and 80 percent. Under 60 the artifacts show on gradients and skin; above 80 the file grows quickly for a difference no one sees. Export at twice the display size and lean on the lower end of that range for retina assets.

Before. A CMS that converts on upload still stores and serves what you gave it in some paths, and you control the quality and the pixel size only if you set them yourself. Optimised uploads are also faster and cheaper to store.

Quality drives the lossy encoders. For JPEG and WebP, 70 to 80 percent is where the file gets small while photos still look unchanged on a screen; under 60 the blocking starts to show. For PNG the slider matters less, since the format is lossless: the gains come from the side cap and from switching format.

The tool compresses, checks the size, lowers the quality and tries again until the file is under the cap or the quality runs out. Pair a small cap with a side cap: a 4000 pixel photo won't fit in 100 KB at any quality, a 1024 pixel one will.

Off by default, which strips the camera model, exposure settings, date and GPS position from a photo. Turn it on when you want that data to travel with the image. Stripping it also saves a few kilobytes.

The result pane shows the original's size, the result's size and the saving in percent. If the encoder can't beat the original (a PNG already optimised, a tiny icon), the tool returns the original rather than a larger file.

No. The file is read in your browser and every step runs there, on your device. The page makes no request with your image, so you can load it, go offline and keep working.

No. The "Optimize images for a website" tool is free and opens without a sign-in, an account or an install.

Up to 100 MB per file, the limit the tool states under its drop area. A larger file is refused with a plain message instead of being decoded.

No, it takes one file at a time. If you drop or choose several, only the first is used; run the tool again for the next one.

When the output would not be smaller and you kept the same format, the tool hands back your original and says so in the status line.

Closest to the "Optimize images for a website" tool: PNG compressor, PNG to WebP converter, WebP optimizer, Reduce image size online. Each opens on its own page, free and in the browser.

The "Optimize images for a website" tool is one of 47 in its group. The group's page, /tools/png, lists them all.

The tool is free. Its interface is built from shadcn.io's own components (Button, Input, Slider and the rest of the registry under /ui), which come in React, Vue, Svelte and Solid. Pro adds the blocks and templates for the product around it.