Key Takeaways — brief reading, less than 30 seconds
- For web photos, serve AVIF → WebP → JPEG inside a <picture> tag. AVIF compresses best, JPEG is the safety net, and the browser picks the first one it can decode.
- PNG is for transparency and sharp edges, not photographs. A photo saved as PNG is routinely 3× the size of the equivalent JPEG for no visible quality gain.
- SVG is the only correct format for logos and icons. One file renders crisp on every screen, from favicon to billboard, and you can edit it in a text editor.
- TIFF and raw stay in the archive. You edit from them and export smaller derivatives; you never ship them to a user.
Glossary12 terms
- Raster image: An image made of a grid of pixels. Every photograph and screenshot is a raster image. Scales up poorly — enlarging a raster image shows the pixels.
- Vector image: An image described by mathematical paths instead of pixels. Scales to any size without losing quality. Used for logos, icons, and illustrations.
- Lossy compression: JPEG uses it, and so does default WebP. Smaller files come at the cost of detail; the loss is permanent, and re-saving the same image repeatedly makes it worse.
- Lossless compression: A compression method that reduces file size without discarding any image data. PNG, TIFF, and lossless WebP are lossless — the decoded image is pixel-identical to the original.
- Alpha channel: The channel that stores transparency information per pixel. PNG, WebP, HEIF, and TIFF support an alpha channel; JPEG does not.
- Colour depth: The number of bits used to describe each pixel’s colour. 8-bit per channel is standard; 10-bit and 16-bit formats (TIFF, HEIF, raw) preserve more tonal range for editing.
- DPI (dots per inch): Matters for print; irrelevant on screen. A 300 DPI JPEG and a 72 DPI JPEG look identical on a monitor if their pixel dimensions are the same.
- Chroma subsampling: JPEG, HEIF, and AVIF all use it: colour information is stored at lower resolution than brightness. Human eyes barely notice, and it is one reason JPEG stays small at moderate quality settings.
- Raw file: The unprocessed sensor data from a digital camera (CR2, NEF, ARW, DNG). You develop it in software, adjusting exposure, white balance, and sharpening, then export a JPEG or TIFF for sharing.
- DNG (Digital Negative): Adobe’s attempt at a universal raw format. Same sensor data as a proprietary raw, but readable without the camera manufacturer’s decoder.
- Codec: AVIF and HEIF both borrow their codecs from video compression (AV1 and HEVC respectively). That is why they beat JPEG on size: video compression has had decades more research poured into it.
- DAM (Digital Asset Management): A platform that stores master image files, tracks versions, and generates format-specific derivatives for each distribution channel.
My first website ran on BMP files. It loaded at a crawl, weighed a lot, and two of the diagrams were drawn in Microsoft Paint. Not bad for a first attempt. Then I found out about JPG.
Years later, that first site is long gone and I now build a Digital Asset Management platform. Working on it forced me past “when to use each format” and into how they work.
JPG, PNG, TIFF, WebP, HEIF, AVIF, SVG, and raw each do one thing well. The chapters below cover what that is, how they combine in practice, and how we serve the right one per browser.
Why Image File Formats Matter#
Image formats mostly differ on five things:
- lossless or lossy
- raster or vector
- transparency
- animation
- browser compatibility
The right pick depends on what the image is doing and where it will be viewed, and most real pipelines combine two or three. Here is how the main formats line up.
| Format | Lossless | Raster | Transparency | Animation | Browser |
|---|---|---|---|---|---|
| JPEG | No | Yes | No | No | Yes |
| PNG | Yes | Yes | Yes | Yes? | Yes |
| TIFF | Either? | Yes | Yes | No | No |
| WebP | Either? | Yes | Yes | Yes | Yes |
| HEIF | No? | Yes | Yes | Yes | Safari only? |
| AVIF | Either? | Yes | Yes | Yes | Yes |
| GIF | Yes? | Yes | 1-bit? | Yes | Yes |
| BMP | Yes | Yes | No? | No | Limited? |
| SVG | Yes | No? | Yes | Yes | Yes |
| Raw | Either? | Yes | No | No | No |
The table skips one thing: file size. BMP still renders in every browser but has not been used on a real website in decades — uncompressed pixels are cheap to decode and expensive to download. Browser support also shifts month to month; caniuse.com(opens in new tab) is where to check the current state on any format.
Raster vs Vector: Two Types of Image Files#
Raster images store pixels; vector images store math. Photographs can only be raster. Logos and icons should be vector so they stay sharp at every size, from favicon to billboard.
A raster logo needs three separate files to look crisp on every screen (@1x for standard monitors, @2x for most laptops, @3x for phones), and you pick between them with srcset or <picture> media queries. The same logo as SVG is one file that works on every display ever made.
“Vector is always smaller” is wrong. Logos and icons are tiny as SVG because they hold a handful of paths; a complex illustration with a few thousand paths (a traced photograph or a dense infographic) can end up larger as SVG than the same image as WebP.
JPEG (JPG): The Universal Format#
- Raster
- Lossy
- No transparency
- No animation
- Web-ready
JPEG has been the web’s photograph format since 1992, and it still is. The 1992 bitstream is what every browser decodes; what improved is the encoders. MozJPEG and Google’s Jpegli(opens in new tab) (2024) produce the same format at roughly 35% smaller file sizes. It uses lossy compression: smaller files at the cost of detail you cannot get back. Good for photographs, bad for logos or anything with text and sharp edges.
JPEG loses a little more on every save. A lossy image edited and re-saved a dozen times visibly degrades, which is why the master stays in a lossless format and JPEGs are only exported at the end. Chroma subsampling catches people too: almost every encoder defaults to 4:2:0, which breaks on sharp colour edges — red text on a coloured background, thin saturated lines, anything that changes colour pixel by pixel. Those belong in PNG or WebP.
PNG: Lossless with Transparency#
- Raster
- Lossless
- Transparency
- Animation
- Web-ready
PNG preserves every pixel and supports transparency, which is why it runs the web’s graphics, UI assets, and screenshots. File sizes are larger than JPEG for photographs, but for anything with text, sharp edges, or an alpha channel, PNG is the right answer.
PNG has two flavours that are easy to confuse. PNG-8 uses a 256-colour palette, which suits icons and UI assets and produces tiny files; PNG-24 (or PNG-32 with alpha) stores full 24-bit colour and is what you want for everything else. PNG does have one failure mode worth knowing: a screenshot of a photo-heavy webpage is often larger as PNG than the same region exported as JPEG, because lossless compression has no cheap way to handle gradients.
TIFF: The Print and Archive Standard#
- Raster
- Either (lossy/lossless)
- Transparency
- No animation
- Not web
TIFF is a print and archival format. It stores uncompressed or losslessly compressed image data at full colour depth, often with layers and multiple pages, which is why files are large. Web browsers will not render it, so keep it out of your content pipeline.
TIFF is a container, not a codec. The same .tif file can hold uncompressed pixels, LZW, ZIP, or even JPEG-compressed data, which is why file sizes vary wildly from one TIFF to the next. The reason print shops insist on it is not size but CMYK support and 16-bit colour depth — neither JPEG nor PNG handle CMYK, and JPEG’s 8 bits per channel clip the tonal range a drum scanner or medium-format camera records.
WebP: The Web-First Format#
- Raster
- Either (lossy/lossless)
- Transparency
- Animation
- Web-ready
WebP is Google’s web image format, introduced in 2010. It compresses photographs roughly 25–35% smaller than JPEG at comparable quality and handles transparency, animation, and lossless mode in the same container. Browser support has been universal for years.
WebP is two codecs under one name. Lossy WebP comes from VP8, a video codec; lossless WebP is its own scheme that averages around 26% smaller than PNG on the same source. The limit worth remembering: WebP caps at 16383 × 16383 pixels, so stitched panoramas and gigapixel scans still go out as JPEG or TIFF.
HEIF and AVIF: The Next Generation#
- HEIF:
- Raster
- Lossy
- Transparency
- Animation
- Safari only
- AVIF:
- Raster
- Either (lossy/lossless)
- Transparency
- Animation
- Web-ready
Both formats borrow their compression from video codecs, which is why they produce smaller files at better quality than JPEG. HEIF is the iPhone camera default, but browser support outside Safari is still thin. AVIF is the one to serve on the web today: broad browser support and compression that beats WebP.
HEIF is the container, HEVC is the codec, and .heic is the file extension iPhones actually write — the three names get used interchangeably, which trips people up. The reason AVIF won on the web and HEIF did not is not technical: AV1 (AVIF’s codec) is royalty-free, HEVC is patent-encumbered, and the browser vendors were not going to ship an HEVC decoder that came with per-unit licensing fees.
GIF, BMP, and SVG: Niche Formats#
- GIF:
- Raster
- Lossless
- 1-bit transparency
- Animation
- Web-ready
- BMP:
- Raster
- Lossless
- No transparency
- No animation
- Legacy
- SVG:
- Vector
- Lossless
- Transparency
- Animation
- Web-ready
GIF survives for one reason: simple web animations that do not warrant a video file. BMP is a Windows bitmap, uncompressed, with no practical advantage over PNG or TIFF. SVG is the web’s vector format. One file renders crisp on every screen, and because it is XML, you can edit it in a text editor. Every logo and icon you ship belongs here.
GIF’s 256-colour palette is the killer limit: gradients dither into visible banding, and an animated GIF of a short clip is routinely 5–10× larger than an equivalent animated WebP or muted MP4. BMP is still around because Windows uses it for the clipboard and for in-memory bitmaps — you will almost never see one on disk outside of old Paint exports. SVG has one footnote that bites: it can contain <script> tags, so user-uploaded SVGs need sanitising before they are served, otherwise an uploaded logo becomes an XSS vector.
Raw Files: The Photographer’s Negative#
- Raster
- Either (usually lossless)
- No transparency
- No animation
- Not web
A raw file is the sensor data from a digital camera before any image has been made from it. Photographers shoot raw because it preserves the full dynamic range and leaves every editing decision for later. The cost is size, proprietary formats per manufacturer, and the need to develop every file before it can be shared.
Raw isn’t one format. Canon, Nikon, Sony, Fujifilm, and Olympus each have their own (CR2/CR3, NEF, ARW, RAF, ORF), and Adobe’s DNG was the attempted open standard that few camera makers adopted. What sits on the sensor is a Bayer-pattern grid (each photosite captures one of red, green, or blue), and the raw developer reconstructs the full-colour image on your computer. That is why you choose white balance and exposure after the shot: nothing has been committed to pixels yet.
Choosing the Right Image File Format#
For the web, you do not need to pick one format and stick with it. We serve a stack inside a <picture> tag in this order: AVIF → WebP → JPEG/PNG. The browser takes the first one it supports and ignores the rest.
AVIF goes first. It is lossy by default, but typical photographs end up smaller than the WebP equivalent at the same visible quality. Transparency, animation, and 96% browser support put it at the top of the list.
WebP sits in the second slot, lossy mode. Files are a touch larger than AVIF with the same feature set, and it is the fallback for anything that cannot decode AVIF yet.
JPEG and PNG are the final safety net for older clients. JPEG when the source has no alpha channel; PNG when transparency matters.
The other half of the answer is what you keep. Upload once, hold a lossless master (PNG for graphics, TIFF for photographic or print sources, raw for anything shot on a proper camera), and let the platform generate the AVIF, WebP, and JPEG derivatives at delivery time. When a new format lands (AVIF did in 2022, the next one will too) you regenerate from the master instead of hunting down every place the image was ever used.
The format decision moves from upload to delivery, and it moves per channel: AVIF for the web, JPEG for email clients, print-ready TIFF for production, the original source for anyone who needs to edit.
That is the balance we ship.
Frequently Asked Questions About Image File Formats #
Which image file format is best for web images?
When should I use PNG instead of JPEG?
Should I publish HEIF or AVIF for new photos today?
Can I convert a JPEG into a vector image?
How does a DAM handle different image file formats?
