Modern Image Formats Explained: How to Choose the Best Format for the Web

There is no single best image format for every website image. Use SVG for scalable vector artwork, JPEG for many still photographs, and PNG when exact pixels or transparency matter. Consider WebP or AVIF for modern raster images, and use GIF mainly when a legacy animation requires it. Choose by comparing the result at the size and quality your page needs, checking browser support for your audience, and adding fallbacks where necessary.

For a quick decision: use a lossy format when its visual tradeoff is acceptable; choose lossless compression when artifacts would damage text or sharp edges. Use the HTML <picture> element to offer modern formats with a fallback. MDN advises weighing compression, quality, browser support, and format features together; Google’s performance guidance also emphasizes responsive sizing and stable layout. MDN’s image format guide · Google image optimization guidance.

1. Choose by image content and requirements

Format	Good fit	Tradeoffs
SVG	Icons, diagrams, interface graphics, and other vector artwork that should stay accurate at different sizes.	Vector artwork, not a general photographic raster format. Use it when the source is vector artwork.
JPEG	Still photographs where lossy compression gives an acceptable visual result.	Judge quality at the delivered size. JPEG does not offer the same transparency and animation feature set described for WebP.
PNG	Lossless raster images, transparency, exact graphics, screenshots, diagrams, logos, and line art.	Compare file size with modern raster choices, while preserving crisp edges and legible text.
WebP	Still or animated raster images; supports lossy and lossless compression, transparency, and animation.	Check browser support for your audience and compare actual encoded results.
AVIF	A modern raster option; MDN describes its compression as slightly better than WebP.	MDN notes narrower browser support than WebP and no progressive rendering. Offer a fallback when needed.
GIF	Existing or legacy animations when compatibility or the asset itself calls for GIF.	Compare modern animated-image choices and their browser reach; do not assume GIF is the smallest.

There is no format that wins independently of image content and encoder settings. Compare the real output rather than relying on a universal file-size savings percentage; the cited guidance does not establish a controlled benchmark that supports one.

2. Decide between lossy and lossless compression

Lossy encoding discards image data to reduce size. It can work well for photographs if the result still looks acceptable at the displayed dimensions. Lossless encoding preserves the image exactly. Prefer lossless for screenshots, diagrams, logos, and line art: blur and colored fringes around text or sharp edges are especially noticeable. MDN explains these compression tradeoffs.

Start with the source asset and its purpose.
Encode a candidate in the formats supported by your delivery plan.
Compare each at the intended rendered size, looking closely at text, edges, gradients, and transparency.
Choose the smallest result that preserves the visual quality and features you need.

3. Serve modern formats with a fallback

Use <picture> when you want the browser to choose among supported sources. Put preferred sources first and a broadly compatible fallback in an <img>. The fallback image also supplies the alternative text.

<picture>
  <source srcset="/images/product.avif" type="image/avif">
  <source srcset="/images/product.webp" type="image/webp">
  <img
    src="/images/product.jpg"
    alt="A person using the product"
    width="1200"
    height="800"
  >
</picture>

Replace the sample paths and alternative text with your own assets and a meaningful description. If the image is decorative, use an empty alt value. Confirm that each URL serves the corresponding file and that your server returns the right image media type; MDN lists image media types in its MIME types guide.

Responsive sources for different display sizes

Format selection and responsive sizing solve related but different problems. <picture> can offer formats; srcset and sizes can let the browser select a suitable image width for the layout.

<picture>
  <source
    type="image/avif"
    srcset="/images/landscape-640.avif 640w, /images/landscape-1280.avif 1280w"
    sizes="(max-width: 700px) 100vw, 700px"
  >
  <source
    type="image/webp"
    srcset="/images/landscape-640.webp 640w, /images/landscape-1280.webp 1280w"
    sizes="(max-width: 700px) 100vw, 700px"
  >
  <img
    src="/images/landscape-1280.jpg"
    srcset="/images/landscape-640.jpg 640w, /images/landscape-1280.jpg 1280w"
    sizes="(max-width: 700px) 100vw, 700px"
    width="1280"
    height="853"
    alt="Mountain landscape"
  >
</picture>

Provide files whose dimensions match the width descriptors. Set width and height so the browser can reserve the image’s space while it loads. Google’s guidance includes responsive sizing and layout stabilization as part of image optimization.

4. Check browser support and delivery behavior

Browser support changes over time, and support is not universal for every modern format. Check current browser data against your site’s audience before removing fallbacks. This is especially relevant when choosing AVIF, which MDN describes as having narrower browser support than WebP. A fallback in <picture> lets browsers that cannot use an offered source continue to the next option.

Keep the server’s response type aligned with the file: for example, serve WebP as image/webp and SVG as image/svg+xml. Incorrect paths or media types can make a correctly encoded image fail to display. For format details and compatibility cautions, see MDN’s format guide and the WebP format specification.

5. A practical optimization checklist

Match the format to the content: vector artwork, photo, sharp graphic, transparency, or animation.
Compare lossy and lossless output where both are viable.
Inspect text and sharp edges for compression artifacts.
Serve dimensions appropriate to the rendered layout with responsive sources where useful.
Use width and height attributes to reserve layout space.
Provide a fallback when your audience’s browser support calls for one.
Verify the actual response URL and media type in your deployment.
Recheck browser support when audience requirements or format choices change.

Google’s guidance treats image optimization as a combination of format negotiation, responsive sizing, and layout stabilization—not simply choosing the newest extension. Read the guidance.

6. Troubleshooting

Symptom	Likely cause	What to check
Image does not appear in some browsers	The browser may not support the selected format, or the fallback is missing or malformed.	Offer another source and a valid `<img src>` fallback. Check current support for your audience.
Image URL returns an error or the wrong content	Wrong path, missing deployed asset, or incorrect server response.	Open the exact URL and check the response status and media type.
Text or logo edges look fuzzy	Lossy compression introduced visible artifacts.	Use a lossless encoding for this image or adjust the lossy result until edges remain clear.
Image is unexpectedly large	The chosen encoding, quality setting, or dimensions may not suit the asset.	Compare formats and encodings using the same source and rendered dimensions; do not upscale beyond the needed display size.
Page content shifts when an image loads	The browser did not have reserved image dimensions.	Set intrinsic `width` and `height` on the image and size it responsively in CSS.
Transparency appears with a solid background	The selected format or export does not preserve the transparency required.	Choose a format and encoding that support transparency, and inspect the exported asset.

7. Performance, reliability, and cost

Smaller appropriate images can reduce the bytes a page needs to deliver, but format names alone do not guarantee a smaller or better result. Compare actual encodings for the asset, deliver dimensions suited to the layout, and avoid sacrificing legibility on graphics with text. Responsive sources prevent sending one unnecessarily large image to every viewport. Explicit dimensions help keep layout stable as images load.

For reliability, retain a fallback when audience support warrants it, verify deployed asset URLs and media types, and check support again as browser usage changes. No fixed compression percentage applies to every image: results depend on the image and encoding choices. The sources cited here do not provide a like-for-like benchmark suitable for a universal savings claim. Format choice itself does not establish a separate price; delivery and processing costs depend on your own hosting or image service.

8. Inspect a page screenshot while checking image choices

A browser screenshot can help you review whether images look right in their actual page layout. For repeatable captures, ScreenshotNeo is a website screenshot API and MCP server from ScreenshotNeo. Its API can return PNG, JPEG, WebP, or PDF. Use your normal browser workflow when you need to inspect browser-specific behavior or verify fallback selection in a particular browser.

Or skip the browser setup

Send one GET request to capture a page as WebP. See the ScreenshotNeo API documentation for request options.

curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webp

import requests

r = requests.get(
    "https://api.screenshotneo.com/v1/shot",
    params={"access_key": "YOUR_API_KEY", "url": "https://stripe.com"},
    timeout=90,
)
open("shot.webp", "wb").write(r.content)

const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://stripe.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);

ScreenshotNeo accepts cookie and consent banners and removes more than 60 known consent platforms, newsletter popups, and chat widgets before capture; each step can be turned off. Bot checks, blank pages, timeouts, failed loads, and cache hits cost nothing, and responses say which outcome occurred. Its MCP server offers screenshot tools for AI agents, including Claude, Cursor, and other MCP clients. The free plan includes 1,000 screenshots a month with no card; paid plans start at $5 for 3,000 shots. Sign up for free.

FAQ

Which image format should I use for a website?

Choose by content and requirements: SVG for vector artwork, JPEG for many still photos, PNG for exact graphics or transparency, and WebP or AVIF as modern raster options. Add a fallback if browser support requires it.

Is AVIF always better than WebP?

No. MDN describes AVIF as offering slightly better compression, but also notes narrower browser support than WebP and no progressive rendering. Compare the actual result and provide a fallback where needed.

Should I convert every image to one format?

No. Photos, text-heavy graphics, vector illustrations, and animations have different needs. Choose and compare per asset type.

When should I avoid lossy compression?

Avoid it when its artifacts harm exact reproduction, especially around text, logos, diagrams, and sharp line art. Lossless encoding preserves the image exactly.