Skip to content

image guide

Every Image Format Explained — and When to Use Each One

There are more image formats than ever, and the question "which one should I use?" does not have a single answer. Each format was designed for a specific job: photographic compression, lossless archival, simple animation, vector scaling, or mobile camera output. This guide explains what every major format actually does under the hood and when it is the right choice.

Updated September 22, 2026 · 23 questions answered

Key takeaways

  • Lossy formats (JPEG, lossy WebP, AVIF, HEIC) trade data for file size; lossless formats (PNG, GIF, lossless WebP) keep every pixel.
  • Match the format to the job: photos to JPEG/WebP/AVIF, graphics and text to PNG, simple flat-colour animation to GIF, cutting-edge delivery to AVIF.
  • Modern formats beat JPEG on file size at equal quality, but software support — not compression — decides when you can actually switch.
  • File extensions lie: verify a real format by opening it or checking metadata, never by the name alone.
  • Compression cannot be undone: convert from originals, keep lossless masters, and treat every lossy re-save as a small permanent loss.

How Image Compression Works

Every image is a grid of pixels — each pixel stores colour as three or four numbers: red, green, blue, and optionally alpha (transparency). A 4000×3000 photograph has 12 million pixels, and at 4 bytes per pixel (RGBA) that is 48 MB of raw data. Compression exists to make that number tractable.

There are two fundamental strategies. Lossless compression reorganises the same data more efficiently (DEFLATE, used by PNG; LZ-Hi, used by WebP lossless; Lempel-Ziv-Welch, used by GIF) so the file is smaller but reconstructs every original pixel exactly. Lossy compression permanently discards data the human eye is unlikely to notice (JPEG's DCT quantisation, WebP's VP8 prediction, AVIF's AV1 intra coding) and achieves far smaller sizes at the cost of mathematical accuracy.

The practical difference: lossless formats can be re-saved infinite times without degradation. Lossy formats degrade every re-save because they quantise the same data again — the equivalent of photocopying a photocopy. This is why your saved-and-reopened JPEG looks slightly worse each time, while your PNG does not change.

JPEG (JPG) — The Photographic Workhorse

JPEG (Joint Photographic Experts Group) was finalised in 1992 and remains the single most-used image format on the internet. It uses lossy compression based on the Discrete Cosine Transform: the image is divided into 8×8 blocks, each block is converted from spatial frequencies into a set of coefficients, and small coefficients — representing detail the eye cannot perceive — are rounded to zero.

Strengths: universally supported, efficient on photographic content (10:1 compression ratios with minimal visual loss at quality 85), progressive mode allows a blurry-to-sharp render, and the format is decades of engineering-tuned.

Weaknesses: no transparency, ringing artefacts around sharp edges (text, UI elements), colour banding in gradients at low quality, and generation loss on every re-save.

Best for: photographs, portraits, landscapes, product shots, any image with continuous tones and no flat-colour edges.

PNG — Lossless Precision

PNG was designed in 1995-1996 as an open replacement for GIF after Unisys tried to enforce a patent on GIF's LZW compression. It uses the DEFLATE algorithm (the same math behind ZIP files) combined with per-row predictive filtering to achieve 20-60% compression on images without losing any data.

PNG comes in two variants that matter: PNG-24 (true colour, 16.7 million colours, no transparency) and PNG-32 (true colour + 8-bit alpha channel). PNG-8 (256-colour palette + binary transparency) exists but is rarely used.

Strengths: perfectly lossless, 8-bit alpha transparency, no generation loss, universal support, handles text and flat colour without artefacts.

Weaknesses: enormous file sizes on photographic images, no built-in progressive loading (the whole file must download before the image renders on most browsers), and no rotation metadata.

Best for: logos, icons, UI mockups, screenshots, scientific images, anything with sharp edges or transparency.

GIF — Animated Classics

GIF (Graphics Interchange Format) was created by CompuServe in 1987. It uses LZW compression and a palette limited to 256 colours. That limitation is both its defining weakness and the source of its charming lo-fi aesthetic.

GIF's enduring relevance is animation: it was the only widely-supported animated image format on the web for 25 years. Each frame is a full image, and inter-frame compression is minimal (only fully transparent pixels between frames save space), making GIF files large for their visual quality.

Strengths: animation without video players, binary transparency (a single palette colour can be transparent), universal support.

Weaknesses: 256 colours causes dithering/banding in photographs, no alpha transparency (fully transparent or fully opaque — no smooth edges), large file sizes.

Best for: simple animations, memes, loading indicators, pixel art. For most animation use cases in 2026, MP4 or WebM video is 5-10× smaller with better quality.

WebP — Modern Compression

WebP was released by Google in 2010 as a single format covering both photographic and graphic needs. It derives from VP8 (the same video codec behind WebM video) and supports lossy mode, lossless mode, transparency, and animation.

At matched quality, WebP lossy is 25-35% smaller than JPEG. At matched quality, WebP lossless is 26% smaller than PNG. It does not beat either format in their own territory by an enormous margin, but its advantage is being one format that handles all cases competently.

Browser support: universal since 2020. The only remaining gaps are email clients and very old software.

Best for: web images in general — photographs, graphics, transparent images, and simple animations. The default web format for new content in 2026.

AVIF — The Cutting Edge

AVIF (AV1 Image File Format) is based on the AV1 video codec — the same compression technology behind YouTube's 8K streams. Released in 2019 by the Alliance for Open Media (the consortium behind WebM and VP9), AVIF achieves 15-25% better compression than WebP at equivalent visual quality.

It supports 12-bit colour depth (vs WebP's 8-bit), HDR metadata, film grain synthesis (preserving the look of noisy film stock without storing noise), and alpha transparency in both lossy and lossless modes.

Browser support: Chrome, Firefox, Edge, and Safari 16.4+ (March 2023). iOS 16+ and Android 12+ handle it natively. However, older Windows and Linux software still needs codecs installed.

Best for: when you need the absolute smallest files and can provide a fallback. Photography websites, image CDNs, and any site with Core Web Vitals performance targets where those extra 15% savings compound across thousands of images.

HEIC / HEIF — Apple's Camera Format

HEIC (High Efficiency Image Container) uses H.265/HEVC video compression for still images. Apple made it the default iPhone camera format in iOS 11 (2017) because it stores the same quality photo as a JPEG at roughly half the file size — critical for 12-megapixel cameras filling 64 GB phones.

HEIF is the container format; HEIC is the image coding within it. HEIF also supports image sequences (burst shots, Live Photos), depth maps, and computational photography metadata that JPEG cannot represent.

The problem: compatibility. Windows users cannot open HEIC files without installing extensions from the Microsoft Store. Many websites, email clients, and third-party apps reject .heic files. This is why "convert HEIC to JPG" is one of the highest-volume image searches in the world.

Best for: storing photos on Apple devices where the Photos app handles it transparently. Convert to JPEG or WebP before sharing outside the Apple ecosystem.

SVG — Vector Graphics

SVG (Scalable Vector Graphics) stores images as XML markup — paths, shapes, gradients, and text — rather than a grid of pixels. This means an SVG can be rendered at any size without quality loss, which is the fundamental difference from every raster format above.

A logo saved as SVG is typically 2-5 KB. The same logo as a 1024×1024 PNG might be 15-30 KB. And the SVG looks identical at 16×16 favicon size and on a 4K billboard.

Weaknesses: SVGs cannot represent photographic content efficiently — a photo encoded as individual pixel paths would be enormous. They are also scriptable (can contain JavaScript), which makes accepting SVG uploads a security risk.

Best for: logos, icons, illustrations, charts, and any graphic that must scale to any resolution without becoming blurry.

TIFF and BMP — Legacy and Professional

TIFF (Tagged Image File Format) is a container primarily used in professional printing and scanning workflows. It supports multiple pages (multipage TIFF = primitive document format), lossless LZW compression, and 16-bit colour depth.

BMP (Windows Bitmap) is essentially uncompressed pixel data with a tiny header. It was designed in 1991 for Windows 3.0's GDI subsystem. Today it has almost no advantage — PNG does everything BMP does, smaller.

Neither is practical for web delivery. If you receive a TIFF or BMP, convert it to a modern format immediately.

Quick Reference: Format by Use Case

This table summarises the entire guide into a decision you can make in seconds:

  • Website hero image / blog photo → WebP (lossy, quality 80)
  • Logo or icon → SVG (scalable) or PNG-32 (if raster is needed)
  • Email attachment / universal compatibility → JPEG (quality 85)
  • Screenshot with text and UI → PNG or lossless WebP
  • Product image with transparent background → PNG-32 or lossless WebP
  • iPhone photo to share with others → Convert HEIC to JPEG or WebP
  • Simple animation / meme → GIF (compatibility) or MP4 (quality + size)
  • Print-ready / professional workflow → TIFF or high-quality PNG
  • Maximum compression / next-gen web → AVIF with WebP fallback
  • Raw photo archival → Lossless format (TIFF, PNG, or lossless WebP)

Frequently asked questions

The questions people ask most about image formats explained: jpg, png, gif, webp, avif, heic, answered directly.

What are the main types of image files?

The main raster image formats are JPEG, PNG, GIF, WebP, AVIF, HEIC, BMP, and TIFF. The main vector format is SVG. Raster formats store a grid of pixels; vector formats store mathematical paths that can be scaled to any size without losing quality.

What is the difference between lossy and lossless compression?

Lossy compression (JPEG, WebP lossy, AVIF lossy, HEIC) permanently discards image data to achieve smaller files. Lossless compression (PNG, GIF, WebP lossless, TIFF with LZW) stores the same data more efficiently — the decoded image is pixel-identical to the original.

Which image format is the highest quality?

Any lossless format (PNG, TIFF, uncompressed BMP) preserves every pixel exactly. But 'highest quality' at a given file size belongs to modern formats like AVIF, because their compression algorithms preserve more visual detail per byte. The answer depends on whether you measure quality by pixel accuracy or perceptual similarity.

Why is JPEG still used if it is 30 years old?

JPEG's DCT algorithm was designed extremely well, encoder optimisation over 30 years has squeezed performance close to theoretical limits, and universal compatibility is a powerful inertia. Every camera, phone, browser, operating system, and application on earth reads JPEG. The network effect alone keeps it relevant.

Should I convert all my images to WebP?

For web delivery: yes, if you can provide a PNG/JPEG fallback for email clients and ancient browsers. For archival, design, and print: no, keep originals in lossless formats. Convert to WebP at the point of delivery (CMS, CDN, build tool), not in the source file.

What is AVIF and why should I care?

AVIF is an image format using the AV1 video codec — the most efficient open compression algorithm available in 2026. It produces files 15-25% smaller than WebP at the same quality. You should care if you operate a high-traffic website where those savings on thousands of images translate to megabytes of bandwidth cost saved per day.

Why does my PNG have a white background when I expected transparency?

Not all PNG files have alpha channels. PNG-24 stores true colour without transparency; PNG-32 includes the alpha channel. If your image editor exported PNG-24, it will have an opaque white background. Also, some viewers composite transparency against white, making it appear as though the background is part of the image.

Can GIF support more than 256 colours?

No. GIF's format specification limits the colour palette to 256 entries. Dithering creates the illusion of more colours by mixing nearby palette entries pixel-by-pixel, but the actual palette never exceeds 256. This is why photographs look terrible as GIF.

What is the best image format for websites in 2026?

The layered approach: AVIF for browsers that support it (all modern browsers), WebP as fallback (universally supported since 2020), and JPEG/PNG as last resort (for email clients and legacy systems). Use SVG for any UI element that needs to scale. This covers all cases with the smallest files per audience.

Why are iPhone photos saved as HEIC?

Apple switched from JPEG to HEIC starting with iOS 11 (2017) because HEIC uses H.265 compression, which halves file size for the same visual quality. On a phone shooting 12-48 megapixel photos, that 50% saving directly translates to more photos per gigabyte of storage.

Is BMP better than PNG?

No. BMP stores raw uncompressed pixels (occasionally with simple RLE compression). PNG stores the same lossless data but compressed with DEFLATE plus predictive filtering, producing files 50-90% smaller. There is no practical use case where BMP is superior to PNG in 2026.

Can I animate PNG?

Yes, APNG (Animated PNG) supports multi-frame animation with full alpha transparency. However, it is larger than GIF for equivalent frame counts and is not supported in older browsers. For web animations, MP4 video or animated WebP are better choices.

Which format is best for printing?

TIFF for professional print (supports 16-bit per channel colour, CMYK, lossless). PNG for home printing (lossless, universally accepted). Never use JPEG for print because compression artefacts become visible at high resolution.

What does DPI mean in image files?

DPI (dots per inch) is metadata stored in the file header that tells print software how large to display the image on paper. It does not affect the actual pixel count — a 3000×2000 image at 300 DPI is 10×6.7 inches in print; at 72 DPI it is 41.7×27.8 inches. Screen display ignores DPI entirely.

Are WebP and AVIF safe for email?

No. Email clients, especially Outlook desktop, do not reliably render WebP or AVIF. For email-embedded images, use PNG (for graphics/transparency) or JPEG (for photos). WebP/AVIF are safe for images hosted at a URL and loaded by a browser.

How do I convert an image to a different format?

Use an online converter that processes the image in your browser — no upload needed. Most operating systems include a basic converter (MS Paint for Windows, Preview for macOS), and image editors like GIMP or Affinity Photo handle every format natively. For batch conversion of dozens of files, a web-based batch converter saves significant time.

Why does my converted image look worse than the original?

If you convert from a lossy format (JPEG, HEIC) to another lossy format (WebP, JPEG), you are re-compressing already-compressed data. Each generation of lossy compression adds artefacts. To avoid quality loss: convert from the highest-quality source available, and use lossless or high-quality (85+) settings on the output.

Is SVG always better than PNG for logos?

For use on websites: yes — SVG is infinitely scalable and typically smaller. For use in raster-only contexts (email signatures, social media avatars, some print workflows): PNG is the correct choice because those contexts cannot render SVG.

What is the largest image file I can upload to a website?

Most websites accept images up to 5-25 MB. File size limits affect uploads, not display — large files take longer to upload and may be rejected by the server. Converting a 15 MB HEIC or PNG to a 1-2 MB WebP/JPEG solves the upload limit issue.

Can I view HEIC files on Windows?

Yes, but it requires installation. Microsoft provides the HEVC Video Extensions (paid, $0.99) and the HEIF Image Extensions (free) from the Microsoft Store. Alternatively, use an online converter like Collabs Tool's HEIC to JPG converter which works in the browser with no software installation.

What is the difference between 8-bit and 12-bit colour?

8-bit colour stores 256 levels per channel (256 red × 256 green × 256 blue = 16.7 million combinations). 12-bit colour stores 4096 levels per channel (68 billion combinations). More bits per channel means smoother gradients and less colour banding. AVIF supports 12-bit; JPEG, PNG, WebP, and GIF are limited to 8-bit.

Is it safe to convert images online?

Only if the converter processes files locally in your browser. Tools that upload your file to a server store a copy of your image — and that copy may end up in logs, backups, or caches. Browser-based converters like Collabs Tool never transmit your file: the conversion happens entirely in your device's memory.

Which image format is best for Instagram?

Instagram accepts JPEG, PNG, and WebP uploads. For photographs: JPEG at quality 85 is the safe choice. For graphics with transparency: PNG (Instagram composites it against white). Instagram re-compresses everything server-side, so uploading a very high quality source (lossless WebP, TIFF) does not improve the final post — quality 90 JPEG is the sweet spot.