Source
Drop an image here
PNG, JPEG, WebP, GIF, BMP or SVG
80
Result
The converted image appears here.
Image Converter & Compressor
Convert an image between PNG, JPEG and WebP, resize it, and compress it, all in the browser. A canvas in this tab does the work and nothing is uploaded, which matters when the image is a screenshot of a dashboard or a client's unreleased logo.
1 WebP is the default format for the web
WebP
Pick WebP unless something forces another format. It is roughly 25 to 35% smaller than JPEG at the same visual quality, supports transparency, and every current browser reads it.
JPEG
Use it when something old or non-web has to open the file. JPEG has no transparency, so the tool composites transparent pixels onto the background color you choose (white by default).
PNG
Lossless, so use it for screenshots of text, diagrams and anything with flat color and hard edges. For photographs it is several times larger, and the quality slider has no effect.
AVIF
Smaller still, but encoding is slow and the browser canvas cannot produce it, so this tool does not offer it. Use a build step such as sharp for AVIF.
2 What re-encoding does to your file
The tool draws the image onto a canvas and encodes it again from the pixels. That has two consequences. First, all metadata is gone: EXIF location, camera model, timestamps and the copyright field. Before publishing a photo that is usually what you want; if you need the copyright field, add it back afterwards.
Second, each pass is lossy for JPEG and WebP. Converting a JPEG to WebP at 80 and back again does not return the original, and the losses add up. Always re-encode from the highest-quality source you have, never from a file you already compressed.
3 Why a PNG can get bigger
A canvas re-encode does not optimize the PNG stream the way oxipng or pngquant do, so a PNG that has already been through one of those tools will come out larger here. Converting a photograph to PNG also multiplies its size several times over, because PNG is lossless and a photograph has no flat regions to compress. If the size goes up, pick a different format for that image.
How to use the Image Converter & Compressor tool
- Drop an image on the left panel, or click Choose a file.
- Pick the output format. WebP is the right default for the web; use JPEG when an older program has to read it, and PNG only for lossless output.
- Drag Quality down until the preview starts to look wrong, then raise it a little. Most photos look right between 75 and 85.
- Change Width or Height to resize. Keep aspect ratio is on by default, so the other one follows.
- Download saves the result. The conversion ran in a canvas in this tab, so nothing was uploaded.
How to convert and compress images in a build
Command line (sharp / ImageMagick)
# sharp is the fastest option for a Node project
npx sharp-cli -i input.png -o output.webp --format webp --quality 80
# Resize and convert a whole folder
npx sharp-cli -i "src/*.{jpg,png}" -o dist/ resize 1200 --format webp
# ImageMagick, if it is already installed
magick input.png -quality 80 -resize 1200x output.webp
# Squeeze a PNG properly: a canvas re-encode cannot do this
npx oxipng -o 4 --strip safe image.png
npx pngquant --quality 65-85 image.pngoxipng and pngquant optimize the PNG stream itself, which is why a browser-based tool can make an already-optimized PNG larger.
In the browser, the way this page does it
// createImageBitmap applies the EXIF orientation, which drawImage alone does not
const bitmap = await createImageBitmap(file, { imageOrientation: "from-image" });
const canvas = document.createElement("canvas");
canvas.width = 1200;
canvas.height = Math.round(1200 * bitmap.height / bitmap.width);
const ctx = canvas.getContext("2d");
ctx.imageSmoothingQuality = "high";
// JPEG has no alpha, so transparency needs something to land on
ctx.fillStyle = "#ffffff";
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(bitmap, 0, 0, canvas.width, canvas.height);
const blob = await new Promise((r) => canvas.toBlob(r, "image/webp", 0.8));Serving the right format
<!-- The browser picks the first type it understands -->
<picture>
<source srcset="hero.avif" type="image/avif">
<source srcset="hero.webp" type="image/webp">
<img src="hero.jpg" alt="" width="1200" height="630" loading="lazy" decoding="async">
</picture>
<!-- width and height are not optional: without them the page
reflows when the image loads, which is most of your CLS score -->Common errors and how to fix them
- The converted PNG is larger than the original
- A canvas re-encode does not optimize the PNG stream, so an already-optimized file grows. Use oxipng or pngquant, or pick a lossy format if the image is a photograph.
- Transparency turned black
- JPEG has no alpha channel. Composite onto a background color first, which this page does with the Background behind transparency control. Without a fill, transparent pixels come out black.
- The photo came out rotated
- EXIF orientation. drawImage ignores it; createImageBitmap with imageOrientation: 'from-image' applies it. This is why a phone photo looks fine in Finder and sideways on the web.
- The tab crashed on a large image
- A canvas holds the image uncompressed: a 50-megapixel photo is about 200 MB of RAM. Resize before converting, or do it in a build step.
- Quality 100 still looks soft
- JPEG and WebP are lossy at every quality. If the source had already been compressed, each pass adds more artifacts. Always re-encode from the original.
Good to know
WebP is roughly 25 to 35% smaller than JPEG at matched visual quality and is supported by every browser in use. AVIF is smaller again, often by a wide margin on photographs, but encoding is slow and the browser canvas cannot produce it, so generate AVIF in a build step instead.
Re-encoding strips all metadata, which is usually what you want. A photo straight from a phone carries GPS coordinates, the camera model and a timestamp. Publishing it unprocessed publishes all of that.
Specifications and references
This tool follows the specifications below. Read them when you need the exact normative wording, for example to settle an edge case between two implementations.
Frequently Asked Questions
Is my image uploaded anywhere?
No. The browser reads the file into a canvas in this tab and re-encodes it there, so nothing is sent over the network.
Which format should I pick?
WebP for almost everything on the web: it is roughly 25 to 35% smaller than JPEG at the same quality, and every current browser supports it. Use JPEG when an older program has to read the file, and PNG only when you need lossless output, because PNG photographs are several times larger.
Why did my PNG get bigger as a PNG?
The original was probably compressed by a tool that optimizes the PNG stream, such as oxipng, and the canvas re-encode does not do that. Converting a photograph to PNG also inflates it, because PNG is lossless and photographs have no flat areas to compress.
What happens to transparency?
PNG and WebP keep it. JPEG cannot store transparency, so the tool composites transparent pixels onto the background color you choose, white by default.
Does it strip EXIF data?
Yes, as a side effect of re-encoding. Location, camera model and timestamps are all removed, which is usually what you want before publishing a photo. The orientation flag goes too, so the tool rotates the pixels first.
Is there a size limit?
Only your device's memory. A canvas holds the image uncompressed, so a 50-megapixel photo needs about 200 MB of RAM while it is being converted. Very large images may fail on a phone.
Related
For vector files, use the SVG optimizer instead. To build a full icon set from one image, use the favicon generator, and to inline a small image in CSS, image to Base64.
More Image Tools
SVG Optimizer Shrink SVG files with SVGO in your browser. Favicon Generator Build a full favicon set from one image. Image to Base64 Convert an image to a Base64 data URI for HTML or CSS. Base64 to Image Preview a Base64 string or data URI as an image and download it. JSON Formatter Beautify, validate and minify JSON.