Choosing the wrong image format can triple your file sizes. The web now has six major formats — each with strengths for specific use cases. This guide tells you exactly which format to reach for and why.
April 2026 · 9 min read
Format Decision Matrix
Format
Best For
Compression
Transparency
Animation
Browser Support
JPEG
Photos, gradients
Lossy
No
No
100%
PNG
Logos, screenshots, exact colors
Lossless
Yes
No
100%
GIF
Simple animations (legacy)
Lossless (256 colors)
1-bit
Yes
100%
WebP
Photos + transparency, animations
Lossy + Lossless
Yes
Yes
97%
AVIF
Photos (best compression)
Lossy + Lossless
Yes
Yes
97%
SVG
Icons, logos, illustrations
Vector
Yes
Yes (CSS/SMIL)
99%
JPEG: Still the Photo Standard
JPEG (Joint Photographic Experts Group) is lossy compression optimized for photographs. Each save degrades quality by discarding color information the human eye doesn't notice. Quality 85% is the sweet spot for most web photos — visually identical to lossless but 60-70% smaller. Progressive JPEG (renders in blurry-to-sharp passes) improves perceived performance on slow connections.
PNG: Lossless for Precision
PNG (Portable Network Graphics) is lossless — every pixel is stored exactly. Use it when pixel-perfect quality matters: logos with flat colors, screenshots with text, icons, anything with transparency, and source files you'll edit again. PNG-8 (256 colors) is smaller for simple graphics; PNG-24 supports full color. Never use PNG for photographs — file sizes are 3–5x larger than JPEG with no visible quality improvement.
WebP: The Modern Default
WebP (Google, 2010) combines JPEG and PNG capabilities in one format: lossy for photos, lossless for graphics, transparency in both modes, and animated WebP to replace GIF. At quality 75, WebP photos are 25–35% smaller than JPEG 85% with equivalent visual quality.
AVIF: The New Champion
AVIF (AV1 Image File Format) is the most efficient format available. Based on the AV1 video codec, it achieves 50% better compression than JPEG and 30% better than WebP. Support reached 97% in 2024. Encoding is slower than WebP, so use CDN-level conversion rather than encoding at build time.
SVG: Vector for Anything Non-Photographic
SVG (Scalable Vector Graphics) is XML-based vector format. It's the only format that scales perfectly at any size — essential for logos, icons, and illustrations used at multiple sizes. SVGs are also searchable by Google (content is text), CSS-styleable, and animatable. File sizes for simple graphics are typically 5–20KB — smaller than any raster equivalent. Use SVG for anything that isn't a photograph.
GIF: Only for Memes in 2026
GIF is limited to 256 colors, no true transparency, and large file sizes for animations. Animated WebP is 40-60% smaller than GIF with full color. Animated AVIF is even smaller. There's no technical reason to use GIF for new content — it persists only for meme/social media compatibility (Twitter, Discord).
Common Image Format Mistakes
Using PNG for photographs — lossless compression of photo data is 3–5x larger than JPEG. Always use JPEG/WebP/AVIF for photos.
Using JPEG for logos — JPEG introduces compression artifacts on sharp edges and flat colors. Use SVG or PNG for logos.
Exporting SVG with embedded raster data — Illustrator can export SVG with embedded JPEGs. Always check SVG file size; if it's over 100KB, the SVG probably contains embedded images.
Not using picture for AVIF/WebP — serving only WebP without a fallback will break images in older browsers. Always use the picture element.
Upscaling low-res source images — no format can recover detail that wasn't in the original. Upscaling a 400px image to 1200px just makes a blurry 1200px image.
Frequently Asked Questions
When will I be able to drop JPEG fallbacks?
AVIF and WebP both have 97% support as of 2026. The remaining 3% are primarily old Safari (pre-14) and legacy Android WebViews. For most sites, a simple WebP with JPEG fallback (using picture) is sufficient. AVIF-only is still premature.
What about HEIC/HEIF?
HEIC (Apple's default iPhone format) has limited browser support and licensing restrictions. It's excellent for native apps and device storage, but not suitable for web delivery. Convert to WebP or AVIF for the web.
Does format choice affect SEO?
Indirectly — image format affects file size, which affects page load time, which affects Core Web Vitals (LCP, CLS), which are Google ranking signals. Smaller images = faster LCP = potential ranking improvement. Google can also index content in WebP images.
What's the fastest way to convert my existing images?
Use Squoosh (squoosh.app) for individual images, or cwebp/avifenc command-line tools for batch conversion. Alternatively, a CDN like Cloudflare Images or Next.js Image component handles conversion automatically based on browser support.
