Image converter: PNG, JPG, WebP and AVIF

For a website, WebP is the safe default: Google measured lossless WebP at 26% smaller than PNG and lossy WebP at 25-34% smaller than JPEG at the same SSIM quality. For a file that has to open in old desktop software, an email client or a print shop, use PNG or JPG.

Each file is decoded by your browser with createImageBitmap() (or an <img> for SVG), drawn on a canvas at the size you set, and written out with canvas.toBlob(type, quality). The quality number from 1 to 100 maps to the 0 to 1 value that call takes; it applies to lossy formats only, so PNG has no slider.

Browsers do not fail when they cannot write a type: MDN notes that an unsupported type is exported as PNG. So the tool checks the type of every result and tells you instead of handing you a PNG named .avif. When you save to JPG, which has no alpha channel, transparent pixels are filled with the background colour you pick.

Writing a fresh file also drops metadata such as EXIF camera data and GPS location, which is often what you want before posting a photo. The pixels are rotated to match the EXIF orientation first, so phone photos do not come out sideways.

For a build step or thousands of files, the same conversions in common tools:

# ImageMagick 7: one file, or every PNG in a folder
magick photo.png -quality 80 photo.webp
magick mogrify -format jpg -quality 85 *.png

# libwebp
cwebp -q 80 in.png -o out.webp
dwebp in.webp -o out.png

// Node.js with sharp
import sharp from 'sharp';
await sharp('in.png').resize({ width: 1600, withoutEnlargement: true }).webp({ quality: 80 }).toFile('out.webp');
await sharp('in.png').avif({ quality: 50 }).toFile('out.avif');

# Python with Pillow
from PIL import Image
im = Image.open("in.png")
im.save("out.webp", quality=80)
im.convert("RGB").save("out.jpg", quality=85)  # JPG has no alpha

• Animated GIF and WebP become a still image. A canvas draws one frame (per the HTML spec, the format's default image or else the first frame), so only that frame is saved.
• Lossy to lossless does not add quality. A JPG saved as PNG keeps its compression artefacts and grows in size.
• Very large images can hit the browser's canvas size limit. If a file fails with a canvas error, set a max width such as 4000 px.
• Colour: the canvas works in sRGB, so wide-gamut photos (Display P3) may look slightly less saturated after conversion.

For single-direction pages with their own tips, see WebP to PNG, JPG to PNG and PNG to WebP. To inline a small image in HTML or CSS, use image to Base64. More on DevHunt: design tools.