Image Formats for the Web: JPEG vs PNG vs WebP vs AVIF vs SVG

The formats at a glance

• JPEG: lossy, no transparency, universally supported. Still a fine default for photographs.
• PNG: lossless, supports transparency. Best for screenshots, diagrams and images with sharp edges or text; large for photos.
• WebP: lossy or lossless, with transparency and animation. Typically 25–35% smaller than JPEG at similar quality and supported by all current browsers.
• AVIF: newer and often smaller again than WebP at the same quality, with transparency and HDR support; supported by current versions of Chrome, Edge, Firefox and Safari. Encoding is slower.
• SVG: vector, scales to any size with no loss. Ideal for logos, icons and simple illustrations; not for photos.
• GIF: limited to 256 colours. For animation, a short muted video or animated WebP is far smaller.

Choosing by content

Photograph               AVIF or WebP, with JPEG fallback
Screenshot / diagram     PNG, or lossless WebP
Logo / icon              SVG (PNG fallback for email)
Needs transparency       PNG, WebP or AVIF — never JPEG
Animation                video (MP4/WebM) or animated WebP
Open Graph / social card JPEG or PNG at 1200 × 630

Converting a PNG with transparency to JPEG fills the transparent areas — the converter on this site uses white. Converting a JPEG to PNG never improves quality; it only preserves the existing artefacts in a bigger file.

Getting the pixel size right

Serve images at the size they are displayed, times the device pixel ratio. An image shown 800 CSS pixels wide needs about 1600 pixels for sharp results on 2× screens; uploading a 6000-pixel camera original wastes bandwidth on every visit. With srcset and sizes, the browser picks a suitable file:

<img
  src="photo-800.jpg"
  srcset="photo-800.jpg 800w, photo-1600.jpg 1600w, photo-2400.jpg 2400w"
  sizes="(max-width: 840px) 100vw, 800px"
  width="800" height="533"
  alt="Describe what the photo shows"
  loading="lazy" decoding="async">

Serving modern formats with a fallback

<picture>
  <source srcset="hero.avif" type="image/avif">
  <source srcset="hero.webp" type="image/webp">
  <img src="hero.jpg" width="1600" height="900" alt="…" fetchpriority="high">
</picture>

The browser uses the first source it supports. Many image CDNs and frameworks (for example the Next.js Image component) do this automatically based on the request’s Accept header.

Loading performance checklist

• Always set width and height (or a CSS aspect-ratio) so the layout does not jump while images load.
• Lazy-load images below the fold with loading="lazy" — but never the main hero image, which should load immediately and can use fetchpriority="high".
• Compress before upload: quality 70–80 for JPEG or WebP is usually indistinguishable from the original at normal viewing size.
• Strip metadata: EXIF data adds weight and can reveal the GPS location where a photo was taken. Re-encoding in the browser, as the tools here do, removes it.
• Write useful alt text: describe what the image shows for people using screen readers; use alt="" for purely decorative images.

Suggested compression settings

Use                       Format   Quality   Longest edge
Hero / full-width photo   AVIF     50–60     2400 px
                          WebP     70–80     2400 px
Article photo             WebP     70–80     1600 px
Thumbnail                 WebP     65–75      600 px
Screenshot with text      PNG      lossless  actual size
Product photo, white bg   JPEG     80–85     2000 px

AVIF quality numbers are not comparable to JPEG ones — AVIF at 50–60 typically looks like JPEG at 75–85. Always compare the output visually at the size it will be displayed.

Caching and delivery

• Give image files content-based names (hero.3f9a1c.webp) and serve them with a long Cache-Control lifetime and immutable, so returning visitors never download them twice.
• Serve images from a CDN close to visitors; many CDNs can also resize and convert formats on the fly.
• Descriptive file names and alt text help image search understand the picture; an image sitemap helps search engines find images loaded by JavaScript.

Transparency, backgrounds and dark mode

Logos and product cut-outs often need a transparent background so they sit on any colour. PNG, WebP, AVIF and SVG all support transparency; JPEG does not, and converting a transparent image to JPEG fills the background with a solid colour. With dark mode, check that dark logos stay visible on dark backgrounds — an SVG can switch colours with a CSS media query, or you can serve a separate dark-mode image with a picture element and the prefers-color-scheme media feature.

Images and Core Web Vitals

Largest Contentful Paint (LCP), one of Google’s Core Web Vitals, is very often an image: the hero photo or a product shot. Make that image small, give it fetchpriority="high", do not lazy-load it, and serve it from the same origin or a fast CDN. Cumulative Layout Shift (CLS) is often caused by images without dimensions pushing content down as they load, which width and height attributes prevent. Measuring a page with Lighthouse or PageSpeed Insights before and after optimising images usually shows the biggest improvement of any single change.

Animations and screenshots

• Animated GIFs are often several megabytes; the same clip as a short muted MP4 or WebM video is commonly ten times smaller and plays smoothly with autoplay, muted, loop and playsinline attributes.
• For documentation screenshots, crop to the relevant part of the screen, keep text at its original pixel size, and save as PNG or lossless WebP so text stays sharp.
• Avoid putting important text only inside images: it cannot be translated, searched or read by screen readers.