Best Image Format for Web: JPEG, PNG, WebP, AVIF
A real, measured comparison — not marketing numbers. We encoded the same 1920×1080 photo in every format ourselves and report the actual file sizes below.
Formats at a glance
What each format can actually do — vector or raster, transparency, lossless storage, animation, and whether it belongs in a print workflow.
| Format | Type | Transparency | Lossless | Animation | Print ready |
|---|---|---|---|---|---|
| JPGPhotos | RASTER | ||||
| PNGGraphics | RASTER | ||||
| WebPModern web | RASTER | ||||
| AVIFSmallest files | RASTER | ||||
| GIFShort loops | RASTER | ||||
| SVGVector, web | VECTOR | ||||
| PDFDocuments | VECTOR | ||||
| EPSLegacy print | VECTOR | ||||
| DXFCNC & laser | VECTOR | ||||
| ICOFavicons | RASTER | ||||
| TIFFArchival print | RASTER | ||||
| BMPUncompressed | RASTER | ||||
| AIIllustrator source | VECTOR | ||||
| PSDPhotoshop source | RASTER |
“Partial” means conditional support: WebP and AVIF have both lossy and lossless modes, GIF transparency is limited to a single fully transparent colour, EPS transparency depends on the producing application, and PNG is conditional for print because it cannot carry CMYK.
Tools that convert these formats
What happens when you zoom in
The same curve, stored three different ways, magnified ten times. The difference only becomes visible at this scale — and in print, this is exactly the scale that matters.
The dashed red lines mark JPEG's 8×8 compression blocks. This is why logos, text and hard-edged graphics belong in PNG or SVG rather than JPEG — while in a photograph those blocks disappear into natural texture, which is why JPEG is still the right choice there.
Raster (pixel) formats
Built from a fixed grid of coloured pixels. Resolution dependent: enlarge one and the pixels themselves become visible. Right for photographs.
JPEG .jpg, .jpegPhotographs, email attachments, maximum compatibilityDetails, history, pros and cons
- Released
- 1992
- Created by
- Joint Photographic Experts Group (ISO/IEC)
- Compression
- Lossy
- Colour depth
- 16.7 million colours (24-bit)
- Transparency
- No
- Animation
- No
- Extension
- .jpg, .jpeg
- Best for
- Photographs, email attachments, maximum compatibility
The default photograph format for more than thirty years. JPEG throws away detail the eye is least likely to notice, which is why a photo shrinks to a fraction of its original size — and why every save cycle degrades it a little more. It remains the safest choice whenever compatibility matters more than squeezing out the last few percent.
Advantages
- ✓Opens everywhere — every browser, phone, printer and camera since 1992
- ✓Very small files for photographic content
- ✓Adjustable quality lets you trade size against fidelity
Disadvantages
- ✕Lossy: every re-save degrades the image further
- ✕No transparency at all
- ✕Blocky 8×8 artefacts around sharp edges and text
- ✕Poor for logos, screenshots and line art
Pixebag tool: Image Compressor
PNG .pngLogos, screenshots, graphics with transparencyDetails, history, pros and cons
- Released
- 1996
- Created by
- PNG Development Group (W3C)
- Compression
- Lossless
- Colour depth
- 16.7 million colours + 8-bit alpha
- Transparency
- Yes
- Animation
- No
- Extension
- .png
- Best for
- Logos, screenshots, graphics with transparency
Created as a patent-free replacement for GIF, PNG became the default whenever an image must stay pixel-exact or carry a transparent background. It never loses a single pixel of data, so it is the right choice for screenshots, UI assets and anything containing text — but that same fidelity makes it a poor choice for photographs, where files balloon.
Advantages
- ✓Completely lossless — re-saving never degrades it
- ✓Full 8-bit alpha transparency, including soft edges
- ✓Excellent for flat colour, text and sharp lines
- ✓Universal browser and software support
Disadvantages
- ✕Files are far larger than JPEG for photographs
- ✕No animation (APNG exists but support is uneven)
- ✕Cannot carry CMYK, so it is not a print delivery format
Pixebag tool: Format Converter
GIF .gifShort looping animations, simple reaction clipsDetails, history, pros and cons
- Released
- 1987
- Created by
- CompuServe (Steve Wilhite)
- Compression
- Lossless
- Colour depth
- 256 colours per frame (8-bit palette)
- Transparency
- Partial
- Animation
- Yes
- Extension
- .gif
- Best for
- Short looping animations, simple reaction clips
Older than the web itself and technically obsolete, yet still everywhere because it plays automatically in any context that accepts an image. The 256-colour ceiling makes photographs look banded, and file sizes are enormous next to a modern video — but nothing else is quite as universally droppable into a chat window.
Advantages
- ✓Plays automatically wherever an image is allowed
- ✓Lossless within its 256-colour palette
- ✓Supports simple one-bit transparency
- ✓Supported by literally everything since 1987
Disadvantages
- ✕Only 256 colours — photographs show visible banding
- ✕Huge files compared with WebP or MP4 for the same clip
- ✕Transparency is hard-edged only, no soft alpha
- ✕No sound
Pixebag tool: GIF Maker
WebP .webpModern websites — the practical default todayDetails, history, pros and cons
- Released
- 2010
- Created by
- Compression
- Lossy + lossless
- Colour depth
- 16.7 million colours + alpha
- Transparency
- Yes
- Animation
- Yes
- Extension
- .webp
- Best for
- Modern websites — the practical default today
WebP does what JPEG, PNG and GIF each do separately, in one format: lossy or lossless compression, full alpha transparency, and animation. Files typically land 25–35% smaller than an equivalent JPEG. Browser support is now effectively universal, which makes it the sensible default for anything published on the web.
Advantages
- ✓25–35% smaller than JPEG at comparable quality
- ✓One format covers photos, graphics, transparency and animation
- ✓Both lossy and lossless modes available
- ✓Supported by every current browser
Disadvantages
- ✕Older desktop software may refuse to open it
- ✕Not accepted by print workflows
- ✕Some social platforms still re-encode it to JPEG
Pixebag tool: Format Converter
AVIF .avifSqueezing the last bytes out of web imagesDetails, history, pros and cons
- Released
- 2019
- Created by
- Alliance for Open Media
- Compression
- Lossy + lossless
- Colour depth
- Up to 12-bit HDR colour
- Transparency
- Yes
- Animation
- Yes
- Extension
- .avif
- Best for
- Squeezing the last bytes out of web images
Built from the AV1 video codec, AVIF compresses harder than anything else in common use — often half the size of a JPEG at the same perceived quality — and adds HDR and wide colour. The cost is encoding time and patchier support in non-browser software.
Advantages
- ✓Smallest files of any widely supported format
- ✓HDR and wide colour gamut support
- ✓Full alpha transparency and animation
- ✓Royalty-free and open
Disadvantages
- ✕Encoding is noticeably slower than JPEG or WebP
- ✕Support outside browsers is still incomplete
- ✕Can smear very fine texture at aggressive settings
Pixebag tool: Format Converter
JPEG XL .jxlArchival quality and lossless JPEG recompressionDetails, history, pros and cons
- Released
- 2021
- Created by
- JPEG Committee (ISO/IEC)
- Compression
- Lossy + lossless
- Colour depth
- Up to 32-bit per channel
- Transparency
- Yes
- Animation
- Yes
- Extension
- .jxl
- Best for
- Archival quality and lossless JPEG recompression
JPEG XL's headline trick is recompressing an existing JPEG roughly 20% smaller with zero further quality loss, fully reversibly. Technically it is the strongest all-rounder here, but browser adoption stalled, so it currently lives mostly in archival and professional workflows.
Advantages
- ✓Losslessly recompresses existing JPEGs ~20% smaller
- ✓Excellent quality at both high and low bitrates
- ✓Progressive decoding — image sharpens as it loads
- ✓Very high bit depth for archival use
Disadvantages
- ✕Browser support is limited and has moved backwards
- ✕Few consumer tools can open it
- ✕Rarely accepted by platforms or print shops
HEIC / HEIF .heic, .heifiPhone photo storage — convert before sharingDetails, history, pros and cons
- Released
- 2015
- Created by
- MPEG (adopted by Apple in 2017)
- Compression
- Lossy
- Colour depth
- 10-bit colour, HDR capable
- Transparency
- Yes
- Animation
- Yes
- Extension
- .heic, .heif
- Best for
- iPhone photo storage — convert before sharing
Since iOS 11 this is what an iPhone saves by default: about half the size of a JPEG at the same quality, with support for depth maps and Live Photos. The catch is that much of the non-Apple world still cannot open it, which is why so many people meet HEIC only as a file that refuses to upload.
Advantages
- ✓Roughly half the size of an equivalent JPEG
- ✓10-bit colour and HDR support
- ✓Stores depth data, bursts and Live Photos in one file
- ✓Saves significant space on a phone
Disadvantages
- ✕Windows, Android and many websites reject it without conversion
- ✕Patent licensing complicates software support
- ✕Editing tools outside Apple's ecosystem are limited
Pixebag tool: Format Converter
TIFF .tif, .tiffPrint production, scanning, long-term archivesDetails, history, pros and cons
- Released
- 1986
- Created by
- Aldus (now Adobe)
- Compression
- Lossy + lossless
- Colour depth
- Up to 32-bit per channel, CMYK and spot colour
- Transparency
- Yes
- Animation
- No
- Extension
- .tif, .tiff
- Best for
- Print production, scanning, long-term archives
The workhorse of professional print and archiving. TIFF stores layers, multiple pages, CMYK and spot colours, and can be fully lossless, which is why museums, libraries and print shops standardised on it. The files are enormous and no browser will display one, but that is beside the point for its audience.
Advantages
- ✓Truly lossless — the archival standard
- ✓Carries CMYK and spot colours for real print work
- ✓Supports layers and multiple pages in one file
- ✓Very high bit depth for scanning and retouching
Disadvantages
- ✕Very large files
- ✕No browser displays TIFF
- ✕So flexible that some variants will not open everywhere
BMP .bmpLegacy Windows software and intermediate filesDetails, history, pros and cons
- Released
- 1986
- Created by
- Microsoft / IBM
- Compression
- Uncompressed
- Colour depth
- Up to 32-bit
- Transparency
- Partial
- Animation
- No
- Extension
- .bmp
- Best for
- Legacy Windows software and intermediate files
Essentially a raw dump of pixels with a small header — no compression at all in its usual form. That makes it trivially simple for software to read and absurdly large on disk: an image that is 200 KB as a JPEG can be 6 MB as a BMP. It survives only in legacy Windows tooling.
Advantages
- ✓Absolutely lossless — nothing is discarded
- ✓Dead simple for software to read and write
- ✓No decoding cost
Disadvantages
- ✕Enormous files — often 20–30× a JPEG
- ✕No compression in the common variant
- ✕Effectively unsupported on the web
- ✕No metadata, no colour profile
ICO .icoBrowser tab favicons and Windows application iconsDetails, history, pros and cons
- Released
- 1985
- Created by
- Microsoft
- Compression
- Lossless
- Colour depth
- Multiple sizes in one file, 32-bit with alpha
- Transparency
- Yes
- Animation
- No
- Extension
- .ico
- Best for
- Browser tab favicons and Windows application icons
A container that holds the same icon at several sizes at once, so the operating system or browser can pick whichever it needs. Still the safest favicon format because very old browsers understand nothing else.
Advantages
- ✓Holds 16, 32, 48 and 256 px versions in one file
- ✓Full alpha transparency
- ✓Understood by every browser ever made
Disadvantages
- ✕Useless for anything except icons
- ✕Limited to small dimensions in practice
- ✕Awkward to create without a dedicated tool
Pixebag tool: SVG to Image
RAW .cr2, .cr3, .nef, .arw, .dng, .orfProfessional photography — the digital negativeDetails, history, pros and cons
- Released
- 2004
- Created by
- Camera manufacturers; DNG by Adobe
- Compression
- Lossless
- Colour depth
- 12–16 bit per channel
- Transparency
- No
- Animation
- No
- Extension
- .cr2, .cr3, .nef, .arw, .dng, .orf
- Best for
- Professional photography — the digital negative
Not really one format but a family: every manufacturer writes its own (Canon CR3, Nikon NEF, Sony ARW), and Adobe's DNG is the open attempt to unify them. A RAW file is unprocessed sensor data — no white balance, no sharpening, no colour decisions baked in — which is exactly why photographers shoot it. Every editing choice stays reversible.
Advantages
- ✓Maximum editing latitude — recover blown highlights and shadows
- ✓White balance and colour remain fully adjustable afterwards
- ✓12–16 bit depth instead of JPEG's 8
- ✓Nothing is discarded by the camera
Disadvantages
- ✕Very large — often 20–40 MB per frame
- ✕Proprietary and camera-specific; older formats risk obsolescence
- ✕Must be developed before anyone else can view it
- ✕Not usable on the web or in documents
JPEG 2000 .jp2, .j2kMedical imaging, cinema masters, digital archivesDetails, history, pros and cons
- Released
- 2000
- Created by
- JPEG Committee (ISO/IEC)
- Compression
- Lossy + lossless
- Colour depth
- Up to 38-bit per channel
- Transparency
- Yes
- Animation
- No
- Extension
- .jp2, .j2k
- Best for
- Medical imaging, cinema masters, digital archives
Wavelet-based and technically superior to the original JPEG in almost every measurable way, yet it never displaced it on the web. It found a permanent home in medicine (DICOM), digital cinema and national archives, where lossless quality and region-of-interest decoding matter more than browser support.
Advantages
- ✓No blocky artefacts — wavelets degrade gracefully
- ✓Both lossless and lossy in one format
- ✓Can decode just a region or a lower resolution from the same file
Disadvantages
- ✕Almost no browser support
- ✕Computationally heavy
- ✕Rarely accepted outside its specialist niches
Vector formats
Built from mathematical curves and coordinates. Resolution independent: the same file is sharp on a business card and on a billboard. Right for logos, icons and type.
SVG .svgLogos, icons, illustrations, charts on the webDetails, history, pros and cons
- Released
- 2001
- Created by
- W3C
- Compression
- Lossless
- Colour depth
- Resolution independent — no pixels at all
- Transparency
- Yes
- Animation
- Yes
- Extension
- .svg
- Best for
- Logos, icons, illustrations, charts on the web
SVG is not an image in the usual sense: it is a text file describing shapes with coordinates and curves. Because there are no pixels, it stays perfectly sharp at any size — a logo scales from a favicon to a billboard from the same file. It is also readable by search engines and editable in a text editor.
Advantages
- ✓Infinitely scalable with zero quality loss
- ✓Tiny files for flat graphics and icons
- ✓Animatable and styleable with CSS
- ✓Text inside stays selectable and searchable
Disadvantages
- ✕Cannot represent photographs
- ✕Very complex illustrations can become slow to render
- ✕Can carry scripts, so files from untrusted sources need sanitising
Pixebag tool: Image to SVG
PDF .pdfDocuments, print delivery, anything that must look identical everywhereDetails, history, pros and cons
- Released
- 1993
- Created by
- Adobe (ISO standard since 2008)
- Compression
- Lossy + lossless
- Colour depth
- Mixed vector and raster, CMYK capable
- Transparency
- Yes
- Animation
- No
- Extension
- Best for
- Documents, print delivery, anything that must look identical everywhere
PDF freezes a page — fonts, vectors, images, colour profiles — so it looks the same on every machine and printer. It is the universal handover format between designer and print shop, and the only one on this list that reliably carries multiple pages, embedded fonts and CMYK together.
Advantages
- ✓Identical appearance on any device or printer
- ✓Multiple pages, embedded fonts, CMYK and spot colours
- ✓Mixes vector and raster freely
- ✓The accepted print-delivery standard worldwide
Disadvantages
- ✕Awkward to edit once produced
- ✕File sizes grow quickly with embedded images
- ✕Not an image format for web pages
Pixebag tool: JPG to PDF
EPS .epsLegacy print workflows, older sign and embroidery shopsDetails, history, pros and cons
- Released
- 1987
- Created by
- Adobe
- Compression
- Lossless
- Colour depth
- Vector with optional embedded raster, CMYK
- Transparency
- Partial
- Animation
- No
- Extension
- .eps
- Best for
- Legacy print workflows, older sign and embroidery shops
The vector exchange format that print shops used before PDF took over. It is officially legacy — Adobe no longer develops it — but it refuses to die because an enormous amount of equipment and an entire generation of print professionals still expect it. If a supplier asks for "vector", they often mean EPS or AI.
Advantages
- ✓Understood by almost every professional print device
- ✓Carries CMYK and spot colours
- ✓Resolution independent
Disadvantages
- ✕No longer developed — officially a legacy format
- ✕Transparency support is unreliable across applications
- ✕No browser can display it
- ✕Large files for complex artwork
Pixebag tool: SVG to Image
Adobe Illustrator .aiThe master file for logos and brand artworkDetails, history, pros and cons
- Released
- 1987
- Created by
- Adobe
- Compression
- Lossless
- Colour depth
- Vector, layered, CMYK and spot colour
- Transparency
- Yes
- Animation
- No
- Extension
- .ai
- Best for
- The master file for logos and brand artwork
The working file for professional vector design. Everything stays editable: layers, live type, effects, artboards. It is a source format, not a delivery format — you keep the AI file and hand out PDF, SVG or EPS. Losing it means rebuilding a logo from scratch.
Advantages
- ✓Everything remains fully editable
- ✓Layers, artboards and live type preserved
- ✓Industry standard for logo and brand assets
- ✓Exports cleanly to every other vector format
Disadvantages
- ✕Requires Illustrator or a compatible editor to open
- ✕Proprietary — no guaranteed long-term readability
- ✕Never send it to a client as a final deliverable
CorelDRAW .cdrSign making, textile printing, engraving and laser cuttingDetails, history, pros and cons
- Released
- 1989
- Created by
- Corel Corporation
- Compression
- Lossless
- Colour depth
- Vector, layered, CMYK and spot colour
- Transparency
- Yes
- Animation
- No
- Extension
- .cdr
- Best for
- Sign making, textile printing, engraving and laser cutting
Illustrator's long-standing rival, and still dominant in specific trades — signage, textile and promotional printing, engraving, laser cutting — particularly across Eastern Europe, Turkey, India and Latin America. If a local print shop asks for "the Corel file", this is it. Cross-version compatibility is notoriously poor: a CDR saved in a newer release often will not open in an older one.
Advantages
- ✓The de facto standard in sign, textile and engraving workshops
- ✓Full CMYK and spot colour support for production
- ✓Handles multi-page layout as well as illustration
- ✓Strong tooling for cutting and plotting paths
Disadvantages
- ✕Poor compatibility between CorelDRAW versions
- ✕Almost nothing outside Corel opens it reliably
- ✕Not readable on the web or by Adobe tools without conversion
- ✕Windows-centric
DXF .dxf, .dwgCNC machining, laser cutting, CAD interchangeDetails, history, pros and cons
- Released
- 1982
- Created by
- Autodesk
- Compression
- Uncompressed
- Colour depth
- Pure geometry — lines, arcs, polylines
- Transparency
- No
- Animation
- No
- Extension
- .dxf, .dwg
- Best for
- CNC machining, laser cutting, CAD interchange
The interchange format of the CAD world. DXF carries pure geometry with real-world units, which is what a laser cutter, CNC router or plotter needs — it cuts along paths, so it cannot use a pixel image at all. Anyone sending work to a fabrication shop meets DXF sooner or later.
Advantages
- ✓Understood by virtually every CAD and CAM program
- ✓Carries true real-world dimensions
- ✓The standard input for laser cutting and CNC
Disadvantages
- ✕No colour fills, gradients or effects — geometry only
- ✕Not a display format; nothing on the web renders it
- ✕Many partially incompatible versions exist
Pixebag tool: SVG to DXF Converter
EMF / WMF .emf, .wmfVector graphics inside Word, Excel and PowerPointDetails, history, pros and cons
- Released
- 1993
- Created by
- Microsoft
- Compression
- Uncompressed
- Colour depth
- Vector drawing commands, optional raster
- Transparency
- Partial
- Animation
- No
- Extension
- .emf, .wmf
- Best for
- Vector graphics inside Word, Excel and PowerPoint
Windows' native vector format, and the reason a chart pasted into Word stays sharp when printed. Rarely chosen deliberately, but it is what Office produces and consumes internally, so it turns up whenever graphics move between Microsoft applications.
Advantages
- ✓Stays sharp when scaled inside Office documents
- ✓Native to Windows — no extra software needed
- ✓Small files for simple diagrams
Disadvantages
- ✕Effectively Windows only
- ✕No browser support
- ✕Renders inconsistently outside Microsoft software
Design source files
The editable working files of design applications. You archive these and export something else for delivery — never send one as the final asset.
Photoshop .psd, .psbThe editable master of any photo compositionDetails, history, pros and cons
- Released
- 1990
- Created by
- Adobe
- Compression
- Lossless
- Colour depth
- Layered raster, up to 32-bit, CMYK
- Transparency
- Yes
- Animation
- No
- Extension
- .psd, .psb
- Best for
- The editable master of any photo composition
The working file for raster design: layers, masks, adjustment layers, smart objects and live type all stay editable. Like AI, it is a source format — you archive the PSD and export JPEG, PNG or TIFF for actual use. Flattening it is irreversible.
Advantages
- ✓Layers, masks and adjustments remain fully editable
- ✓Supports CMYK and high bit depth for print
- ✓Industry standard, readable by many other editors
Disadvantages
- ✕Very large files once layers accumulate
- ✕Not viewable in a browser or on most phones
- ✕Proprietary format
InDesign .indd, .idmlBooks, magazines, brochures, multi-page layoutDetails, history, pros and cons
- Released
- 1999
- Created by
- Adobe
- Compression
- Lossless
- Colour depth
- Page layout — links rather than embeds assets
- Transparency
- Yes
- Animation
- No
- Extension
- .indd, .idml
- Best for
- Books, magazines, brochures, multi-page layout
The layout application's working file. Unlike the others here, an INDD usually links to its images rather than embedding them, so sending one without its linked assets and fonts produces a broken document. Output goes to press-ready PDF.
Advantages
- ✓Built for long multi-page documents
- ✓Precise typography and master pages
- ✓Produces press-ready PDF directly
Disadvantages
- ✕Breaks if linked images or fonts are missing
- ✕Requires InDesign; IDML is the only partial interchange route
- ✕Poor backwards compatibility between versions
GIMP .xcfThe open-source equivalent of a PSDDetails, history, pros and cons
- Released
- 1995
- Created by
- The GIMP project
- Compression
- Lossless
- Colour depth
- Layered raster, up to 32-bit
- Transparency
- Yes
- Animation
- No
- Extension
- .xcf
- Best for
- The open-source equivalent of a PSD
GIMP's native working format — the free counterpart to PSD. It preserves layers, masks, paths and channels, and is fully open, so there is no licensing risk in archiving it. Support outside GIMP is limited.
Advantages
- ✓Fully open format with no licensing concerns
- ✓Preserves layers, masks, paths and channels
- ✓Free tooling on every platform
Disadvantages
- ✕Almost nothing except GIMP opens it
- ✕No CMYK support in practice
- ✕Not an exchange format
Sketch .sketchInterface design on macOSDetails, history, pros and cons
- Released
- 2010
- Created by
- Bohemian Coding
- Compression
- Lossless
- Colour depth
- Vector UI design, macOS only
- Transparency
- Yes
- Animation
- No
- Extension
- .sketch
- Best for
- Interface design on macOS
The tool that defined modern interface design before Figma arrived, and still in use across many established design teams. It is macOS-only, which is precisely the constraint that opened the door for browser-based rivals.
Advantages
- ✓Lightweight and fast for vector UI work
- ✓Mature plugin and symbol ecosystem
- ✓Files are a readable ZIP of JSON internally
Disadvantages
- ✕macOS only — no Windows or Linux version
- ✕Collaboration requires extra services
- ✕Not a print format — no CMYK
Figma .figInterface design and design systemsDetails, history, pros and cons
- Released
- 2016
- Created by
- Figma
- Compression
- Lossless
- Colour depth
- Vector UI design, cloud-native
- Transparency
- Yes
- Animation
- No
- Extension
- .fig
- Best for
- Interface design and design systems
The current default for interface design. Figma files normally live in the cloud rather than on disk, and the .fig export exists mainly for backup or moving between accounts. Handoff to developers happens through the web interface, not the file.
Advantages
- ✓Real-time collaboration in the browser
- ✓Components and design-system tooling built in
- ✓Platform independent — nothing to install
Disadvantages
- ✕Effectively requires the Figma service
- ✕Not a print format — no CMYK
- ✕The .fig file is a backup, not an interchange format
RGB and CMYK — why colour differs on screen and in print
RGB
Additive mixing with light. A screen starts black and adds red, green and blue light; all three at full gives white. The web, phones and televisions are all RGB. JPG, PNG, WebP, AVIF and GIF carry RGB only.
CMYK
Subtractive mixing with ink. Paper starts white and cyan, magenta, yellow and black ink absorb light to make colour. The CMYK gamut is narrower than RGB, so bright neons and vivid blues always dull down in print. TIFF, PDF, EPS, AI, CDR and PSD can carry CMYK.
Use the CMYK Converter to preview how a screen colour shifts once it is printed.
Measured comparison — the same photo, five formats
| Format | Compression | Transparency | Browser Support | File Size (test photo) | Best For |
|---|---|---|---|---|---|
| JPEG | Lossy only | No | ~100% (universal, since 1992) | 209.5 KB | Photos, maximum compatibility |
| PNG | Lossless only | Yes | ~100% (universal, since 1996) | 2831.6 KB (lossless — not a fair comparison against lossy formats) | Screenshots, logos, graphics with transparency, anything that must be pixel-exact |
| WebP | Lossy or lossless | Yes | ~96.8% (all modern browsers) | 171.7 KB | General-purpose web images — the safe modern default |
| AVIF | Lossy or lossless | Yes | ~95.4% (all modern browsers) | 229.4 KB | High-quality photos where support (~95%) is acceptable |
| JPEG XL (experimental) | Lossy or lossless | Yes | ~14.6% (mostly Safari — not safe for general web use yet) | 162.9 KB | Archival/personal use in Safari today; not for publishing to a general audience yet |
Methodology: all sizes below are from encoding the same real 1920×1080 photograph with the same underlying WebAssembly codecs this site's own tools use, at quality 75 (where a quality setting applies). PNG is lossless by design, so its size isn't a fair apples-to-apples comparison against the lossy formats — it's listed for reference. Browser support percentages are global usage share from caniuse.com.
JPEG
The default photo format for 30+ years, and still the safest choice when compatibility matters more than squeezing out the last few percent of file size. Every browser, phone, camera, and image editor ever made can open a JPEG.
- ✓Opens absolutely everywhere
- ✓Fast to encode and decode
- ✓Small enough for most everyday use
- ✕No transparency support
- ✕Lossy only — no lossless mode
- ✕Larger than WebP/AVIF/JPEG XL at equivalent visual quality
PNG
PNG doesn't compete with JPEG on photo file size — it isn't meant to. It's the right choice whenever you need a transparent background or an exact, lossless copy of flat-color graphics, screenshots, or UI art, where JPEG's compression artifacts would actually be visible.
- ✓Lossless — pixel-perfect
- ✓Transparency support
- ✓Ideal for screenshots, logos, line art
- ✕Much larger than lossy formats for photos
- ✕No native animation (that's GIF/APNG/WebP)
WebP
WebP has been safe to use in production for years now — support is essentially universal across modern browsers. In our own measurement it produced the smallest file of any format except JPEG XL, while supporting transparency and animation JPEG can't do. For most websites replacing JPEG/PNG today, WebP is the practical default.
- ✓~97% browser support — safe to ship today
- ✓Both lossy and lossless modes
- ✓Transparency and animation support
- ✓Smaller than JPEG at equivalent quality
- ✕Slightly less efficient than AVIF/JPEG XL in some cases
- ✕Older image-editing software may not support it
AVIF
AVIF is often marketed as the best-compressing format available, and it can be at higher effort/quality settings. In our own real test at the default encoder settings this site's tools use, it actually came out larger than WebP for this particular photo — a reminder that "best format" depends on the image and encoder settings, not just the format name. Browser support (~95%) is strong but very slightly behind WebP.
- ✓Excellent compression at higher effort settings
- ✓Transparency and HDR support
- ✓~95% browser support
- ✕Slower to encode than WebP/JPEG
- ✕Real-world size depends heavily on encoder settings — not automatically smaller than WebP
JPEG XL (JXL)
JPEG XL produced the smallest file in our real test — but with only ~15% browser support, mostly Safari, a .jxl file is unopenable for the large majority of visitors today. We built an experimental converter for people who specifically want to test it (e.g. for Safari-only workflows or archival use), with clear warnings and a safety limit — see our JPEG XL Converter — but we don't recommend it for publishing images to a general audience yet.
- ✓Smallest file size in our real test, even beating AVIF and WebP
- ✓Both lossy and lossless modes
- ✓Can losslessly re-encode existing JPEGs smaller
- ✕~15% browser support — mostly Safari
- ✕The WebAssembly encoder we tested is unstable above ~18 megapixels
- ✕Not yet safe to use for images you're sharing publicly
Frequently Asked Questions
AVIF vs WebP — which should I use in 2026?
Both have excellent, comparable browser support (~95-97%). In our own measurement, WebP actually produced a smaller file than AVIF for the same photo at default settings — AVIF can compress better than WebP, but only with more aggressive (slower) encoder settings, so the real-world answer depends on your encoder, not just the format name. WebP is the safer default; AVIF is worth trying if you control your encoding pipeline and can afford to tune it.
Is PNG obsolete for photos?
For photos, yes — PNG's lossless compression produces files many times larger than JPEG/WebP/AVIF at equivalent visual quality (2831.6 KB vs 162-229 KB in our test of the same photo). PNG is still the right choice for screenshots, logos, and anything needing transparency or pixel-exact output.
What is JPEG XL and is it ready to use?
JPEG XL (.jxl) is a newer format that compressed smallest in our own real test. It's not ready for publishing to a general audience — only about 15% of browsers (mostly Safari) can open it today. It's realistic today only for personal/archival use or Safari-specific workflows.
What's the best image format for the web right now?
WebP, for most sites: ~97% browser support and smaller files than JPEG, with transparency support JPEG lacks. JPEG remains the safest choice if you need literally universal compatibility (very old devices/software). AVIF is a reasonable alternative if you can tune your encoder. JPEG XL isn't ready for general publishing yet.
How was this comparison actually measured?
We encoded the same real 1920×1080 photograph through each format's actual WebAssembly encoder — the same code our own Image Format Converter and JPEG XL Converter tools use — at quality 75 where applicable, and recorded the real output file sizes. These aren't marketing figures.
Related guides and tools
- DPI vs PPI guide — Which resolution to use for screen and print.
- Pixel to CM Converter — Convert px to cm, mm, inches and points at any DPI.
- Paper sizes guide — A3, A4, A5, Letter and Legal in mm, cm and inches.