Choosing the right image format can be more impactful than any compression technique. The same image saved in different formats can vary by several times in file size with virtually no visible quality difference. This guide helps you understand which format to use in every situation, how format choices affect Core Web Vitals, and why WebP has become the de facto standard for modern websites.
Overview of Major Image Formats
Before comparing, here’s a snapshot of each major format’s characteristics:
- JPEG (.jpg/.jpeg): Published in 1992 and still the most common web photo format. Lossy compression, no transparency support, excellent color reproduction, high compression efficiency.
- PNG (.png): Lossless compression, supports transparency (alpha channel), ideal for images requiring exact detail preservation. PNG files are typically 3–5× larger than equivalent JPEGs.
- GIF (.gif): Maximum 256 colors, supports simple animations. Not appropriate for high-quality static images.
- SVG (.svg): Vector format using XML to describe graphics. Scales to any size without quality loss. Best for icons and illustrations.
- WebP (.webp): Released by Google in 2010. Supports both lossy and lossless compression, transparency, and animation. One of the two primary modern web formats.
- AVIF (.avif): Based on the AV1 codec, formalized in 2019. Best compression efficiency of any format, but slower to encode.
Format Selection Matrix
Match your image type to the right format:
- Photographs (landscapes, people, products): First choice: WebP (lossy). Second choice: JPEG. PNG is not recommended (file size penalty is too high).
- Logos and brand identity: First choice: SVG (vector, scalable). If raster format is required: PNG (transparency support).
- Icons: First choice: SVG. Complex icons that don’t scale well: PNG. Icon fonts are also an option.
- Screenshots and UI mockups: First choice: PNG (lossless, sharp edges). Second choice: lossless WebP.
- Animations: Simple animations: CSS animations or Lottie (SVG-based). Complex animations: animated WebP or MP4 video. Avoid GIF — poor quality and large file size.
- Illustrations and flat design: Limited colors: SVG. Complex gradient illustrations: WebP or PNG.
- Print materials adapted for web: JPEG or WebP, resampled to match web display dimensions.
How Format Choices Affect Core Web Vitals
Since Google incorporated Core Web Vitals into ranking signals in 2021, image format choices have become more consequential. Two of the three core metrics are directly influenced by images:
LCP (Largest Contentful Paint)
LCP measures how long it takes for the largest visible content element to load. The target is under 2.5 seconds. The largest visible element is usually a hero image. Format impact:
- Switching from JPEG to WebP can reduce hero image file size by 25–35%, directly cutting load time
- Add
<link rel="preload"> for the hero image so browsers begin downloading it early in the page load process
- Avoid using CSS
background-image for the LCP element — the browser’s preload scanner cannot detect it
CLS (Cumulative Layout Shift)
CLS measures layout stability. When images load without reserved space, they push content down, creating jarring layout shifts. The fix:
- Always specify explicit
width and height attributes on <img> tags
- Use the CSS
aspect-ratio property to reserve space for images before they load
Why WebP Should Be Your Default
WebP has become the best-practice format for modern websites for good reasons:
- At equivalent visual quality, 25–34% smaller than JPEG and 26% smaller than PNG
- Supports both lossy and lossless compression — one format handles multiple use cases
- Full alpha transparency support, making it a complete PNG replacement
- Supports animation as a higher-quality, smaller-file alternative to GIF
- Browser support: over 97% of browsers globally as of 2024
Use the <picture> element to serve WebP with a JPEG fallback:
<picture>
<source srcset="image.webp" type="image/webp">
<img src="image.jpg" alt="Product description">
</picture>
AVIF: Maximum Efficiency with Trade-offs
AVIF outperforms WebP on compression efficiency across the board, but comes with practical considerations:
- Advantages: 20–50% smaller than WebP at equivalent quality; supports HDR and 10-bit color
- Disadvantages: Encoding is 10–20× slower than WebP; high-volume sites need to account for server or build time costs
- Browser support: Chrome 85+, Firefox 93+, Safari 16.4+ — approaching near-universal coverage on devices from 2023 onward
- Recommended strategy: Use
<picture> to serve AVIF → WebP → JPEG in a three-tier fallback
<picture>
<source srcset="image.avif" type="image/avif">
<source srcset="image.webp" type="image/webp">
<img src="image.jpg" alt="Product description">
</picture>
SVG: The Underused Format
SVG adoption on websites still lags behind its potential, despite being the optimal format for many use cases:
- Logos and brand identity must use SVG to remain sharp on all screen sizes, including Retina and 4K displays
- Icon systems built with SVG sprites or inline SVG allow color and size to be controlled via CSS
- Infographics, diagrams, and maps are natural SVG applications — they stay sharp at any zoom level
- SVG can be inlined directly in HTML, eliminating an additional HTTP request
- Optimize SVG file size with SVGO — it typically reduces SVG files by 20–50%
Implementation Checklist
- Plan a migration of all website JPEG photographs to WebP
- Add AVIF versions for hero images and other high-priority images, using the three-tier
<picture> fallback
- Convert all logos and icons to SVG format
- Stop using GIF for static images; replace animated GIFs with CSS animations, animated WebP, or MP4 video
- Add explicit
width and height attributes to all <img> tags to prevent CLS
- Apply
loading="lazy" to all images below the fold
- Consider integrating an image CDN (Cloudinary, imgix) to automatically serve the optimal format for each browser
Common Format Misconceptions
- Myth: “PNG is always sharper for photos.” PNG carries a massive file size penalty for photographs with no meaningful quality benefit over WebP. Use WebP or JPEG for photos.
- Myth: “Most browsers don’t support WebP.” This is outdated. WebP support exceeded 97% globally in 2024. Use it confidently.
- Myth: “SVG only works for simple shapes.” SVG supports complex filters, animations, and gradients — it can handle sophisticated visual effects.
- Myth: “You can convert formats by changing the file extension.” Real format conversion requires re-encoding. Simply renaming the file extension does nothing to the actual format.
Conclusion
For modern web development, WebP is the optimal starting point for nearly every use case, combined with SVG for vector elements and the <picture> element’s format fallback mechanism. This approach maximizes image performance without sacrificing browser compatibility. As AVIF browser support continues to grow, it will become the new default recommendation within the next few years — and the infrastructure you build with <picture> today will make that transition seamless.
Doing it without uploading the file
If the file is confidential, the safest route is the one where it never leaves your computer. Image Optimize runs entirely in the browser: the file is read from your disk, processed in memory, and written back — nothing is sent to a server.
- Open Image Optimize.
- Choose the file from your computer. It is read locally, not uploaded.
- Choose the compression level and compare it against the original.
- Download the result. The original stays where it was.
Do it in your browser — the file never leaves your device: Image Optimize
