Choose the Right Image Format for the Web

The right format depends on what’s in the image, not on which format is newest. Photos, flat graphics, logos and animations compress in completely different ways, and each has a format built for it. Pick by content type using the table below, then add a fallback only where you need one.

The decision table

Content	First choice	Fallback	Avoid
Photos	AVIF or WebP	JPG	PNG (files several times larger)
Screenshots, UI, charts	PNG or lossless WebP	PNG	JPG (blurry text, color fringes)
Logos, icons, simple illustrations	SVG	PNG at 2× size	JPG, GIF
Graphics with transparency	WebP or PNG	PNG	JPG (no transparency)
Short animations, screen recordings	MP4 or WebM video	Animated WebP	GIF
Favicons	SVG plus ICO	ICO	—

In 2026, every current major browser supports WebP and AVIF, so the fallback matters mainly for old browsers, email clients and places where people download and reuse your images.

Photos: AVIF, WebP or JPG

Photographs have smooth gradients and fine noise. Lossy formats handle this well by discarding detail the eye won’t miss.

• AVIF usually produces the smallest files at the same visual quality, often around half the size of a comparable JPG. It is slower to encode, which matters only when you create the files. See AVIF vs WebP and AVIF vs JPG.
• WebP is typically 25–35% smaller than JPG, encodes quickly, and is supported almost everywhere. See WebP vs JPG.
• JPG opens in every browser, app and operating system. Use it as the fallback, and as the main format for files that people download or forward.

A practical setup for a website is AVIF first, WebP second and JPG as the final fallback. If you only want one modern format, choose WebP. You can create these files with Convert to AVIF and Convert to WebP, or let the Image Optimizer pick the smallest file that still looks identical to the original.

More detail is on the AVIF, WebP and JPG format pages.

Screenshots and graphics: PNG or lossless WebP

Screenshots, diagrams, charts and interface mockups have sharp edges, flat areas of color and text. JPG’s compression smears exactly those things, leaving fuzzy text and colored blotches around edges.

• PNG is lossless and universally supported. Reducing it to a limited color palette often saves 50–80% on screenshots with no visible change. Try Compress PNG.
• Lossless WebP stores the same pixels as PNG, usually in a smaller file. See WebP vs PNG.

If a screenshot contains a large photo, such as a full-screen app with a background picture, lossy WebP at high quality may beat both. Test it and compare the results.

Logos and icons: SVG

A logo is shapes and colors, not pixels. SVG stores it as vector instructions, so it stays sharp at every size and on every screen density, and a simple logo is often under 5 KB. You can style it with CSS and change its colors for dark mode.

Use PNG only when you don’t have a vector original, or when the image is too detailed for SVG (a logo with photographic texture, for example). In that case, export PNG at twice the display size so it stays sharp on high-density screens. See PNG vs SVG and the SVG format page.

One caution: only use SVG files you trust or created yourself, and include them with an <img> tag. An SVG embedded inline in your HTML can contain scripts.

Animation: video, not GIF

GIF is a 1980s format with only 256 colors per frame and very inefficient compression. A few seconds of screen recording can easily be several megabytes as a GIF.

• MP4 or WebM video is usually many times smaller than the same clip as a GIF and has full color. You can make it behave like a GIF:

<video autoplay muted loop playsinline width="640" height="360">
  <source src="/demo.webm" type="video/webm">
  <source src="/demo.mp4" type="video/mp4">
</video>

• Animated WebP works in an <img> tag like a GIF, with much smaller files and full color. It’s a good choice when your system can only handle images.
• GIF is still worth keeping for places that accept nothing else, like some chat apps and email. To shrink one without losing the animation, reduce its colors with Compress GIF.

See GIF vs WebP and the GIF format page for the details.

Serving modern formats with a fallback

The <picture> element lets each browser take the first format it supports:

<picture>
  <source srcset="/img/hero.avif" type="image/avif">
  <source srcset="/img/hero.webp" type="image/webp">
  <img src="/img/hero.jpg" alt="Hikers on a ridge at sunset"
       width="1600" height="900" loading="lazy" decoding="async">
</picture>

A few details that matter:

• List the smallest format first. The browser picks the first <source> it can display, so put AVIF before WebP.
• Put alt, width and height on the <img>. The <img> is required, and it carries the attributes for all formats. Width and height let the browser reserve space and prevent layout shift.
• Don’t lazy-load the main image at the top of the page. Remove loading="lazy" for the hero image so it loads right away.
• Use srcset with widths for responsive images. Combine formats with sizes, for example srcset="/img/hero-800.avif 800w, /img/hero-1600.avif 1600w" along with a sizes attribute.

Size before format

The format is only half the decision. A 4000-pixel photo shown in an 800-pixel column wastes far more bytes than any format choice can save. Resize to about twice the largest display width (for high-density screens), then choose the format. Together, the right size and the right format usually cut image weight on a page by well over half.

Quick rules

• Photo → AVIF or WebP, with JPG fallback.
• Text, UI or sharp edges → PNG or lossless WebP.
• Logo or icon → SVG.
• Needs transparency → WebP, PNG, AVIF or SVG. Never JPG.
• Moves → video, or animated WebP.
• People will download or forward it → JPG or PNG, which open everywhere.