Choosing an image format used to be simple: JPEG for photos, PNG for graphics, done. Today the picture is more nuanced — and more rewarding. Modern formats like WebP and AVIF can cut image weight by half or more with no visible drop in quality, which directly improves page speed, search performance, and the experience of everyone on a slow connection.
This guide explains how each major web image format actually works, where each one wins, and how to choose with confidence. It is written for anyone who publishes images on the web — developers, designers, marketers, and store owners — and it focuses on practical decisions rather than theory.
Start With Two Questions
Almost every format decision comes down to two properties of your image.
**Is it a photograph or a graphic?** Photographs (continuous tones, gradients, soft edges) compress well with *lossy* formats that discard detail the eye barely notices. Graphics with sharp edges, flat color, and text — logos, icons, screenshots, charts — need *lossless* compression or a vector format to stay crisp.
**Do you need transparency or animation?** A logo placed over different backgrounds needs an alpha channel. A short looping clip needs animation support. These requirements rule formats in or out before file size even enters the conversation.
Hold those two answers in mind as we go through the formats.
The Web Image Formats at a Glance
| Format | Compression | Transparency | Animation | Browser support | Best for |
|---|---|---|---|---|---|
| JPEG (JPG) | Lossy | No | No | Universal | Photographs where compatibility matters |
| PNG | Lossless | Yes (alpha) | No | Universal | Logos, icons, screenshots, flat graphics |
| WebP | Lossy + lossless | Yes (alpha) | Yes | All modern browsers | A modern default for photos and graphics |
| AVIF | Lossy + lossless | Yes (alpha) | Yes | Most modern browsers | Maximum efficiency for photos and hero images |
| SVG | Vector (lossless) | Yes | Yes | Universal | Logos, icons, illustrations that must scale |
| GIF | Lossless, 256 colors | 1-bit | Yes | Universal | Legacy simple animations |
JPEG (JPG): The Universal Photo Format
JPEG has been the default photographic format for three decades, and its greatest strength is universal compatibility. Every browser, operating system, camera, and editing tool reads it without question.
JPEG uses lossy compression: it discards high-frequency detail that human vision is least sensitive to, and stores the rest compactly. At high quality settings the loss is invisible; push the compression too far and you get blocky artifacts and halos around edges.
Its limitations matter as much as its reach. JPEG has no transparency, so any transparent area becomes a solid background, and it struggles with sharp edges and text. Use JPEG when a photograph must open anywhere with no compatibility risk. If you have graphics or need transparency, convert JPG to PNG instead.
PNG: When You Need Transparency or Pixel-Perfect Detail
PNG is lossless: it reproduces every pixel exactly as saved, with no compression artifacts. That makes it the right tool for logos, icons, screenshots, diagrams, and any graphic with crisp edges or large areas of flat color. It also supports full alpha transparency, so images sit cleanly over any background.
The trade-off is file size. For photographs, a PNG can be several times larger than an equivalent high-quality JPEG. The rule of thumb is simple: PNG for graphics and transparency, not for photos. When a PNG photo is slowing a page down, convert PNG to JPG or, better for the web, convert PNG to WebP. For a deeper look, see JPG vs PNG.
WebP: The Practical Modern Default
WebP, developed by Google, is the format most sites should reach for first today. It supports both lossy and lossless compression, full alpha transparency, and animation — covering nearly every use case in a single format. Google reports that lossy WebP images are typically 25 to 34 percent smaller than comparable JPEGs, and lossless WebP is usually around 26 percent smaller than PNG.
Support is no longer a barrier: WebP works in every current major browser, including Safari since version 14. For the overwhelming majority of audiences you can serve WebP directly, which is why it is a sensible default for both photos and graphics. To adopt it, convert JPG to WebP or convert PNG to WebP. For a fuller explainer, read What Is WebP.
AVIF: The Most Efficient, With a Few Trade-offs
AVIF is the newest mainstream format, built on the AV1 video codec from the Alliance for Open Media. It is the efficiency champion: at comparable visual quality, AVIF files are often around half the size of JPEG and meaningfully smaller than WebP. It also handles high dynamic range, wide color gamuts, transparency, and animation.
There are two practical trade-offs. Encoding is slower and more demanding than JPEG or WebP, which matters for large batches. And although support is now broad — Chrome, Firefox, Edge, and Safari 16.4 and later — it remains slightly behind WebP, so a fallback is wise. AVIF shines for large hero images and photo-heavy pages where every kilobyte counts. Try it by converting JPG to AVIF or PNG to AVIF, and see What Is AVIF for details.
SVG: For Anything That Must Scale
SVG is fundamentally different: it is a vector format, describing shapes with math rather than a grid of pixels. An SVG stays perfectly sharp at any size, from a favicon to a billboard, while staying tiny for simple graphics. It is the correct choice for logos, icons, and illustrations built from solid shapes and lines.
SVG is not suitable for photographs, which have no clean geometry to describe. But for interface icons and brand assets, nothing matches its scalability and crispness. Learn more in What Is an SVG File.
A Simple Decision Framework
When you are unsure, work through these in order:
- **Is it a logo, icon, or flat illustration?** Use SVG.
- **Is it a graphic or screenshot, or does it need transparency or pixel-perfect edges?** Use PNG, or lossless WebP for smaller files.
- **Is it a photograph for a modern audience?** Use AVIF for the smallest size, WebP for the best balance of size and reach.
- **Does it need to open literally anywhere, including old software?** Use JPEG.
- **Is it animated?** Use WebP or, better, a real video format like MP4 — not GIF.
Serving Modern Formats Safely
You do not have to choose one format for everyone. The HTML picture element lets the browser pick the best format it supports: list AVIF first, then WebP, then a JPEG or PNG fallback, and each visitor downloads only one file. Modern browsers get the efficient version and older ones get a guaranteed fallback, with no JavaScript required.
This matters beyond aesthetics. Images are usually the largest part of a page, so format choice has a direct effect on Largest Contentful Paint, one of Google's Core Web Vitals, and therefore on both user experience and search performance. Smaller, well-chosen images are one of the highest-leverage speed improvements available.
How to Convert Your Existing Images
You rarely need to re-export from scratch. To modernize an existing library, convert in place: JPG to WebP, PNG to WebP, JPG to AVIF, or PNG to JPG for maximum compatibility. Keep your original high-quality masters and generate modern formats from them as needed.