Best Image Formats for the Web in 2025

For related fixes and guides, see our troubleshooting hub.

Images typically account for 50–70% of a page's total weight. Choosing the wrong format can silently tank your Lighthouse score, hurt your Core Web Vitals, and cost mobile users unnecessary data. Here is the practical guide to making the right call in 2025.

The Formats You Need to Know

JPEG

The veteran. JPEG is a lossy format optimised for photographs and complex images with gradients and many colours.

Use when: You have a photograph or complex real-world image and WebP/AVIF is not an option.

Avoid when: The image has sharp edges, text, or transparency. JPEG has no alpha channel and adds blocky artefacts around high-contrast edges.

Typical savings over uncompressed: 80–90%

PNG

Lossless compression that preserves every pixel. Supports full transparency (alpha channel).

Use when: You need pixel-perfect quality logos, icons, screenshots, images with text, or anything with hard edges.

Avoid when: You have photographs. A PNG photo will be 5–10× the size of an equivalent JPEG.

WebP

Google's format designed to replace both JPEG and PNG. It supports lossy compression (like JPEG), lossless compression (like PNG), and transparency.

Browser support: Excellent. All modern browsers including Safari 14+ support WebP.

Savings vs JPEG: 25–35% smaller at equivalent visual quality.

Savings vs PNG: 25–34% smaller for lossless compression.

Use when: You want to serve photos or complex UI images and your build pipeline or CDN can handle the conversion.

AVIF

The new standard. AVIF (AV1 Image File Format) offers dramatically better compression than WebP, especially at lower quality settings.

Browser support: Good and improving. Chrome, Firefox, and Safari 16+ all support it.

Savings vs WebP: 30–50% smaller at equivalent quality.

Savings vs JPEG: 50–70% smaller.

Use when: You are optimising aggressively and can serve a fallback for older browsers.

SVG

Not a raster format SVG is XML-based vector graphics. Infinitely scalable with no quality loss.

Use when: Icons, logos, illustrations, charts, or any graphic that is path-based rather than photographic.

Avoid when: You have a photograph. An SVG cannot represent photographic detail efficiently.

Bonus: SVG can be styled with CSS and animated with CSS or JavaScript.

Decision Chart

The <picture> Element for Format Negotiation

You do not have to pick one format and force it on everyone. The <picture> element lets the browser choose the best format it supports:

<picture>
  <source srcset="hero.avif" type="image/avif" />
  <source srcset="hero.webp" type="image/webp" />
  <img src="hero.jpg" alt="Hero image" width="1200" height="630" />
</picture>

Browsers that support AVIF use it. Those that support only WebP use that. Everyone else gets the JPEG. No JavaScript required.

Practical Tips for Core Web Vitals

Largest Contentful Paint (LCP) is directly affected by how fast your hero image loads. Using WebP or AVIF for above-the-fold images and adding fetchpriority="high" to the LCP image can shave hundreds of milliseconds.

Always set explicit width and height on <img> elements to prevent Cumulative Layout Shift (CLS).

Use lazy loading for below-the-fold images: loading="lazy".

Serve images at the correct intrinsic size. Do not serve a 2000px-wide photo for a 400px-wide thumbnail. Use srcset to serve appropriately sized images at each breakpoint.

Useful Tools

• ToolKits WebP Converter convert PNG/JPEG to WebP in your browser
• ToolKits JPG Compressor reduce JPEG file size without visible quality loss
• ToolKits Image Resizer resize to correct intrinsic dimensions before upload
• Squoosh (by Google) excellent visual comparison of formats and quality settings

The practical takeaway: switch photographs from JPEG to WebP today. Add AVIF as a progressive enhancement. Use SVG for everything vector. Your visitors (and your Lighthouse scores) will thank you.