Which Image Format Should You Use?

Choose the format that matches the image and how it will be delivered. Use WebP or AVIF as modern raster options for many web images, JPEG for photographs when broad compatibility or an existing workflow matters, PNG for lossless pixels or transparency, and SVG for artwork that is genuinely vector. For animation, compare WebP, AVIF and APNG; use GIF mainly when a legacy workflow requires it. If your audience or application support is uncertain, provide a fallback.

There is no universal best format. File size depends on the source image, encoder, quality setting and target dimensions. Compare the actual exports at the visual quality you need instead of relying on a single compression percentage. The MDN image format guide is a useful reference for browser-oriented format capabilities.

Quick decision table

Image or requirement	Good starting point	What to check
Photograph on a website	WebP or AVIF	Visual quality, encoded size and fallback needs
Photograph in an established or very broad compatibility workflow	JPEG	Whether the loss from compression is acceptable
Screenshot, chart or line art	PNG, or lossless WebP/AVIF	Text and sharp edges can expose lossy artifacts
Transparent raster image	PNG, WebP or AVIF	JPEG has no alpha channel
Logo, icon or diagram that must scale	SVG	The source must be vector artwork, not a raster image placed in an SVG wrapper
Animated image	WebP, AVIF or APNG	Decoder support, frame size and whether video is more suitable
Unknown or legacy clients	JPEG or PNG with a modern-format source first	Use an HTML `<picture>` fallback

Raster and vector formats are different

JPEG, PNG, WebP and AVIF store raster pixels. Enlarging a raster image beyond its useful resolution can make edges soft or reveal compression artifacts. SVG stores vector instructions for shapes and paths, so a logo or diagram can remain sharp at different sizes. SVG is not a drop-in replacement for a photograph; photographic content should normally remain raster.

Lossy versus lossless compression

Lossy encoding discards image information to reduce bytes. JPEG is lossy. WebP and AVIF can be encoded either lossy or lossless. Lossless encoding preserves the decoded image exactly, which is useful for screenshots, diagrams, text-heavy graphics and assets that will be edited again. PNG is lossless.

Lossless does not mean smallest. A simple illustration may compress extremely well as PNG, while a detailed photograph may be much smaller as a carefully tuned lossy WebP or AVIF. Judge the result at the dimensions and quality your users will receive.

Format-by-format guidance

JPEG (JPG)

Use for photographs and other continuous-tone images when lossy compression is acceptable.
It has broad historical support and fits existing photo pipelines.
It does not support an alpha channel, so it cannot represent transparent pixels.
Repeatedly opening and re-saving a JPEG can accumulate additional loss. Keep an original master and export from it.
Text, UI screenshots and hard-edged diagrams can show ringing or block artifacts at aggressive quality settings.

PNG

Use when you need lossless reproduction, crisp text and lines, or transparency.
It is a practical choice for screenshots, charts, diagrams and interface assets with flat colors.
For large photographs, PNG is often much larger than a suitable lossy export.
Check whether your PNG contains unnecessary metadata or an oversized canvas before delivery.

WebP

WebP supports lossy and lossless compression and can support transparency and animation.
It is a strong default for many web raster images when your target clients support it.
Google’s WebP documentation describes the format and its encoding options.
Keep a fallback when you cannot assume support in every consuming application.

AVIF

AVIF supports lossy and lossless modes, transparency and animation.
It can produce very small files at a chosen visual quality, but encoding time and decoder support are part of the tradeoff.
MDN gives an illustrative case where lossy AVIF images are around 50% smaller than JPEG at visually similar compression levels. Treat that as an example, not a promise: source image, encoder and settings change the result.
Measure your own assets and retain a fallback if the audience includes clients without the required support.

SVG

Use for vector logos, icons, diagrams and illustrations that must scale cleanly.
It can be embedded as an image or used inline when you need styling or scripting control.
Do not convert a photographic bitmap to SVG and expect it to become a small, scalable vector asset; the underlying content is still raster-like.
Sanitize SVG files from untrusted sources and follow your application’s rules for active content.

APNG and GIF

APNG provides lossless animated PNG-style frames and transparency.
WebP and AVIF can also animate and may be more efficient depending on the content and clients.
GIF remains useful for legacy compatibility and existing tools, but it is limited and inefficient for many modern animations.
For long, photographic or high-frame-rate motion, use video rather than an animated image. Google’s guidance on diagrams and images recommends avoiding animated GIF when video is a better delivery format: Google image guidance.

Transparency and alpha channels

Transparency is required for a logo placed over changing backgrounds, a cutout product image or an overlay graphic. JPEG cannot store transparent pixels. PNG, WebP and AVIF can. Before exporting, confirm whether your tool preserves the alpha channel and whether the consuming application decodes it correctly.

A common failure is a transparent source exported onto a white matte. The resulting JPEG may look correct on white but show an unwanted box on a dark page. Export to PNG, WebP or AVIF when the background must remain transparent.

Animation: image or video?

Choose an animated image for a short, self-contained visual that should behave like an image. Compare WebP, AVIF and APNG with the actual frame dimensions, duration and loop behavior. Use video when the animation is long, photographic, high frame rate or large enough that a video codec can deliver it more efficiently. Check autoplay, looping, accessibility and reduced-motion requirements either way.

Use fallbacks with HTML `<picture>`

The <picture> element lets the browser select a preferred source and fall back to an ordinary <img>. Put the most preferred supported source first, then finish with a fallback image.

<picture>
  <source srcset='/images/hero.avif' type='image/avif'>
  <source srcset='/images/hero.webp' type='image/webp'>
  <img
    src='/images/hero.jpg'
    width='1600'
    height='900'
    alt='A mountain lake at sunrise'
    loading='lazy'
    decoding='async'
  >
</picture>

Keep meaningful alternative text and intrinsic dimensions on the fallback <img>. Dimensions help the browser reserve layout space. Use loading='lazy' for below-the-fold images, but do not lazy-load the main above-the-fold image without a reason.

Responsive images and art direction

Format selection and size selection are separate decisions. Use srcset and sizes when the same composition is delivered at multiple widths. Use separate <source media='...'>\ entries when mobile needs a different crop or composition.

<picture>
  <source
    media='(max-width: 600px)'
    srcset='/images/card-small.avif 480w, /images/card-medium.avif 800w'
    sizes='100vw'
    type='image/avif'
  >
  <source
    srcset='/images/card.avif 800w, /images/card-large.avif 1600w'
    sizes='(max-width: 900px) 90vw, 800px'
    type='image/avif'
  >
  <img src='/images/card.jpg' width='1600' height='900' alt='Product dashboard'>
</picture>

Generate only the widths you actually serve. An enormous original sent to a small phone wastes bandwidth regardless of whether it is JPEG, WebP or AVIF.

A repeatable selection workflow

Identify the content. Separate photographs, screenshots, flat illustrations, logos and animation.
List required features. Record transparency, animation, vector scaling, editing needs and any lossless requirement.
List clients. Include browsers, native apps, email clients, document systems and older integrations, not just your primary browser.
Export candidates. Produce realistic JPEG, PNG, WebP and AVIF variants at the final dimensions.
Compare visually. Inspect text, edges, gradients, skin tones and transparency against the source.
Compare delivery cost. Measure bytes, encoding time, decode time and cache behavior for real traffic patterns.
Add a fallback. Use <picture> or an application-level negotiation path when support is uncertain.
Document the rule. Record the format, quality setting, dimensions and fallback so future exports stay consistent.

Capturing screenshots in the format you need

If your source is a web page rather than an existing image, the capture format is part of the same decision. A screenshot with small text or sharp lines may need PNG or lossless WebP/AVIF. A photographic page may be smaller as JPEG, WebP or AVIF. Transparency requires a format with alpha support and a capture method that preserves it.

You can run a browser yourself with Playwright or Puppeteer, wait for the page, set a viewport, hide overlays and write the resulting bytes. That gives control, but you must maintain browsers, consent handling, retries, blocked resources and deployment environments.

Or skip the browser setup

ScreenshotNeo is a website screenshot API and MCP server. One GET request returns PNG, JPEG, WebP or PDF. Before capture it accepts cookie or consent banners like a visitor and removes more than 60 known consent platforms, newsletter popups and chat widgets; each step can be turned off. Bot checks or CAPTCHAs, blank pages, timeouts, failed loads and cache hits cost nothing, and the response identifies the result with X-Page-Verdict and X-Billed headers.

Choose the output with the API’s format option and use the other capture controls when needed: full-page capture with lazy images loaded, a CSS element selector, dark mode, device presets or a custom viewport, retina scale, custom CSS and JavaScript, click actions, selector or network-idle waits, blocked ads and resource types, custom headers and cookies, timezone and geolocation, transparent backgrounds, resizing, a chosen cache TTL, signed links, asynchronous jobs with signed webhooks, bulk capture for up to 100 URLs, usage information and an OpenAPI specification. The parameter names used by other screenshot APIs also work, which simplifies migration. See the ScreenshotNeo API documentation for the current 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,
)
r.raise_for_status()
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}`);
if (!res.ok) throw new Error(`Screenshot failed: ${res.status}`);
const bytes = Buffer.from(await res.arrayBuffer());
await import('node:fs/promises').then(fs => fs.writeFile('shot.webp', bytes));

The MCP server exposes take_screenshot, get_page_info and capture_pdf for Claude, Cursor and other MCP clients. The Free plan includes 1,000 shots per month with no card; paid plans start at $5 for 3,000 shots. Create a free ScreenshotNeo account.

Troubleshooting

Symptom	Likely cause	Fix
Transparent image has a solid background	Exported as JPEG or composited onto a matte	Export PNG, WebP or AVIF and verify alpha in the target viewer
Text in a screenshot looks smeared	Lossy compression or an undersized source	Use PNG or lossless WebP/AVIF, increase dimensions or raise quality
AVIF or WebP does not display	Consumer does not support that format or the MIME type is wrong	Serve the correct `Content-Type` and add a JPEG or PNG fallback with `<picture>`
SVG looks blurry	The SVG contains an embedded low-resolution bitmap	Use real vector paths or serve an appropriately sized raster image
Animated image is huge	Too many frames, large dimensions or a photographic sequence	Reduce dimensions and frame rate, try another animated format or encode as video
Screenshot contains a cookie banner or chat bubble	A self-managed browser did not dismiss or hide it	Wait for the element, click the consent control, hide the selector or use ScreenshotNeo’s cleanup steps
Screenshot request returns an unexpected page	Bot check, blank load, timeout or application state was not ready	Inspect response headers, add a selector or network-idle wait, and retry with bounded backoff

Performance, reliability and cost

Bytes: Resize to the largest displayed size and compare encoded candidates at that size. Format alone cannot compensate for an oversized canvas.
Quality: Set a quality target per image class. A setting that works for a photograph may damage small text or line art.
Encoding: AVIF can trade smaller output for more encoding work. Account for build or request latency if images are generated dynamically.
Caching: Cache immutable derivatives with long-lived URLs. For generated screenshots, choose a cache TTL that matches how often the source changes.
Fallbacks: Test the fallback path, MIME types and CDN transformations in the same environments as your users.
Screenshot reliability: Wait for a meaningful selector or network idle when the page is dynamic, block unnecessary resources when appropriate, and use async jobs or webhooks for long or bulk captures.
Screenshot cost: With ScreenshotNeo, clean shots are billed while bot checks, blank pages, timeouts, failed loads and cache hits are not billed. The response headers report the verdict and billing result, so your application can record what happened.

FAQ

Should I use JPG or PNG?

Use JPG for photographs when lossy compression and broad compatibility are acceptable. Use PNG for transparency, screenshots, diagrams and text-heavy graphics where lossless edges matter.

Is WebP better than AVIF?

Neither wins for every image. Encode both for representative assets, compare visual quality and bytes, then keep the fallback your clients require.

Can SVG replace PNG for every logo?

Use SVG when the logo is vector artwork. A raster logo or photo does not become truly scalable merely by putting it inside an SVG file.

What format supports transparency?

PNG, WebP and AVIF support transparency. JPEG does not.

What should I use for an animated screenshot?

Compare animated WebP, AVIF and APNG for short image-like motion. For longer or photographic motion, evaluate video.

Do I need multiple formats?

Use multiple sources when client support is uncertain or when a modern format materially improves delivery. The <picture> element provides a straightforward fallback.