Account
All guides

Format and compression guide

AVIF, WebP, JPEG, or PNG: choosing the right image format

Choose between AVIF, WebP, JPEG, PNG, and SVG, then select an honest compression mode for each image.

Updated by Tinify.dev

Images rarely need one universal format. The right choice depends on what the image contains, which browsers or tools must open it, and whether every pixel must survive unchanged.

A quick format decision

  • AVIF is a strong first choice for web photography and artwork when small files matter and your delivery stack can provide a fallback.
  • WebP is a practical modern default for photographs, illustrations, transparency, and animation.
  • JPEG remains useful for photographs and broad compatibility. JPEG is normally lossy; a quality setting should never be presented as true lossless processing.
  • PNG suits interface graphics, screenshots, hard edges, and transparency when pixel-preserving output matters more than the smallest possible file.
  • SVG is usually the better fit for logos, icons, and illustrations that are genuinely vector-based.

The MDN image format guide documents the capabilities and compatibility tradeoffs in more detail.

Balanced, best quality, and lossless

These labels describe different goals:

  • Balanced aims for a useful reduction while keeping visible artifacts under control. It is the sensible default for most web images.
  • Best quality prioritizes fidelity and may produce a larger result than Balanced.
  • Lossless is only honest when the selected format and processing path can preserve pixels. Tinify does not offer a fake lossless switch for JPEG.

Compression can occasionally produce a file that is larger than the input. For compression jobs, Tinify keeps the original in that case and reports optimized=false instead of calling an increase a saving.

Serve a modern format with a fallback

HTML's picture element lets the browser choose a supported source:

<picture>
  <source srcset="hero.avif" type="image/avif" />
  <source srcset="hero.webp" type="image/webp" />
  <img src="hero.jpg" width="1200" height="800" alt="Describe the image" />
</picture>

Do not convert a tiny source into many formats automatically. Start with the original master, compare the rendered result at its real display size, and keep only variants your site actually serves.

A repeatable workflow

  1. Crop away pixels the design will never show.
  2. Resize from the original to the largest required display size.
  3. Choose the output format based on image content and compatibility.
  4. Compress with Balanced first, then inspect important details at 100%.
  5. Record dimensions and byte size so later changes can be compared honestly.

Tinify results expire after two hours, so download the approved output or move it into your own asset pipeline before that window closes.