For most website photographs, compare AVIF and WebP with JPEG at a visually acceptable quality, then serve the smallest file that still looks right for your audience. AVIF and WebP can reduce download size, while JPEG remains a dependable compatibility fallback. There is no single best format for every image: screenshots, logos, diagrams, transparent artwork and vectors have different requirements.
The practical choice is therefore based on image content, visual quality, file size, transparency, animation, browser compatibility and the complexity of your delivery setup. This guide gives you a repeatable way to choose, encode and serve the right format.
Quick decision guide
| Asset | Best starting point | Important trade-off |
|---|---|---|
| Photographs | Compare lossy AVIF, WebP and JPEG | Inspect each result at the display size; encoder settings and browser support affect the decision. |
| Screenshots, diagrams, line art and logos | PNG or lossless WebP/AVIF | Lossy compression can make text and sharp edges look dirty or blurry. |
| Images with transparency | PNG, WebP or AVIF | JPEG has no alpha channel, so it cannot preserve transparent pixels. |
| Scalable vector artwork | SVG | SVG is appropriate for vector artwork, not complex photographs. |
| Animation | WebP, AVIF or APNG, subject to audience support | GIF is widely recognized but is often less efficient; confirm that animation is necessary. |
Choose by what the image contains
Photographs: test AVIF, WebP and JPEG
Photographs contain continuous tones, subtle gradients and texture. Lossy compression is usually acceptable when artifacts are not visible at the size visitors see. Export the same photo as AVIF, WebP and JPEG, using comparable visual quality, and compare both appearance and byte size.
AVIF and WebP are modern candidates when they produce a useful reduction for your images and your audience can receive them. JPEG remains a broad-compatibility option and is a sensible fallback for photographic content. Do not assume that one encoder setting wins for every image: skies, foliage, faces, fine fabric and night scenes stress codecs differently.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
#1 Best Overall
Google’s WebP documentation publishes two useful comparisons: WebP lossless images are reported as 26% smaller than PNGs, and WebP lossy images as 25–34% smaller than comparable JPEGs at equivalent quality. Those are published comparisons, not a promise for your files; content, encoder, settings and the quality target determine the result.
Screenshots, diagrams and logos: protect edges and text
Interface screenshots, charts, diagrams and logos contain hard boundaries, small type and flat-color regions. Lossy artifacts that are barely visible in a photo can appear as halos around letters or ringing along lines. Start with PNG, or test lossless WebP or AVIF when your delivery audience supports them. Inspect the actual image at its intended display size, not only zoomed in or in a thumbnail.
If a screenshot includes photographic content as well as text, treat the text and edges as the deciding factor. A slightly larger lossless file is preferable to an unreadable label or a distorted icon.
Transparency: JPEG is not an option
JPEG does not carry an alpha channel. If an image must blend into an arbitrary background, use PNG, WebP or AVIF. Choose among them by measuring the encoded size and checking the visual result. Keep a fallback when the site’s browser audience requires one.
SVG: use it for real vectors
SVG is a vector format, so lines and shapes can scale cleanly across display sizes. It is a strong choice for logos, icons and diagrams created as vectors. It is not a practical replacement for a complex, photorealistic scene. Exporting a photograph as SVG does not provide the same kind of compact photographic encoding as AVIF, WebP or JPEG.
Animation: confirm that motion is needed
For animated artwork, consider WebP, AVIF or APNG according to the browser support and quality requirements of the audience. GIF is widely recognized, but it is often less efficient. If the visual does not need to move, a still image is usually easier to optimize and deliver.
A repeatable format-selection workflow
- Classify the asset. Mark it as a photograph, screenshot, diagram, logo, vector drawing, transparent image or animation. If an asset has several roles, use the most demanding requirement: text sharpness and transparency generally matter more than a small additional reduction.
- Set the display dimensions. Create an image close to the largest size at which it will actually be shown. Format conversion cannot compensate for sending a needlessly huge source image.
- Generate candidates. For a photo, produce AVIF, WebP and JPEG versions. For graphics, produce PNG and lossless WebP or AVIF candidates. Keep the source and encoder settings recorded so you can reproduce the result.
- Compare at a realistic size. Check faces, gradients, foliage, text, thin lines and transparent edges on the devices and backgrounds your site uses. For a photograph, select the smallest file that meets your visual threshold. For a graphic, reject any candidate that damages legibility.
- Check delivery requirements. Confirm that the format can be decoded by the browsers your audience actually uses. If compatibility is uncertain, provide a fallback with
<picture>or use correctly configured server negotiation. - Measure in the page. Confirm that the selected source is requested, cached and decoded as expected. Look at realistic loading conditions rather than assuming that a conversion alone will improve performance.
Serve modern formats with a fallback
The HTML picture element lets the browser choose among sources and then use the nested img as a fallback. Use a photographic fallback for a photograph and a graphic fallback for a screenshot or logo.
<picture>
<source srcset="hero.avif" type="image/avif">
<source srcset="hero.webp" type="image/webp">
<img src="hero.jpg" alt="A cyclist riding beside the sea" width="1600" height="900">
</picture>The order communicates preference: a browser that supports AVIF can use it; one that does not can try WebP; the img source remains the final fallback. For a transparent graphic, use a PNG fallback instead of JPEG:
<picture>
<source srcset="mark.avif" type="image/avif">
<source srcset="mark.webp" type="image/webp">
<img src="mark.png" alt="Company mark" width="320" height="80">
</picture>Alternatively, a server or image service can inspect the request’s Accept header and negotiate a format. This keeps markup simpler, but the infrastructure must vary and cache responses correctly. Verify the actual response format and caching behavior instead of assuming negotiation is configured.
Quality, dimensions and performance
File size helps, but it is not a ranking guarantee
Smaller files generally take less time to download. web.dev notes that images can be Largest Contentful Paint candidates, so an oversized hero image can affect loading. That does not mean changing JPEG to AVIF automatically improves search rankings. Format conversion is only one part of delivery; dimensions, compression, caching, network conditions and page layout also matter.
Do not trade away the subject
Choose quality by looking at the rendered image. Increase quality when faces, text or important edges show visible artifacts. Decrease it when the image remains convincing at its real display size. A visually poor small file is not an optimization success.
Keep intrinsic dimensions known
Provide the image’s width and height, or an equivalent aspect-ratio rule, so the browser can reserve space before the file arrives. This is a layout concern separate from the codec, but it affects the visitor’s experience when images load.
Recommended Free Tools
Browser compatibility and fallback decisions
Browser support changes over time and differs across the audience you serve. Do not select a format from a generic compatibility assumption. Check your analytics, required editions and embedded-browser constraints, then choose a fallback for the visitors who cannot use your preferred source.
- Use
<picture>when you want explicit, per-image source selection. - Use server negotiation when your image service can reliably vary responses by
Acceptand cache each variant correctly. - Keep the fallback appropriate to the asset: JPEG for a photographic fallback when transparency is not needed, PNG for a sharp or transparent graphic.
- Test an actual production URL, including cached responses, rather than testing only local files.
Common mistakes and fixes
Every image is converted to one format
Symptom: Photos, logos and screenshots all use the same extension. Fix: classify assets first. Use photographic candidates for photos and lossless or vector approaches for sharp graphics.
A tiny JPEG logo looks fuzzy
Cause: lossy compression has damaged hard edges and text. Fix: use the original vector as SVG, or a lossless PNG, WebP or AVIF export.
Rank #4
A transparent image displays with a solid box
Cause: a JPEG fallback or an encoder that discarded alpha was selected. Fix: use PNG, WebP or AVIF and verify the delivered file’s transparency.
Do these 3 things before closing this tab:
1Fix the driver behind crashes, sound loss and screen glitches2Repair Windows errors before they cause bigger problems3Scan for outdated or missing drivers - takes under a minuteThe modern source never appears in production
Cause: the type declaration, URL, MIME type, cache key or server negotiation is wrong. Fix: inspect the network response, confirm the response’s Content-Type, purge stale variants and verify that the fallback still works.
The page is still slow after conversion
Cause: the image may still be too large in dimensions, may be a late-loaded LCP candidate, or may be blocked by delivery and caching issues. Fix: measure the real page, resize to the largest needed display size, inspect caching and check which resource is actually the LCP candidate.
Text in a screenshot is unreadable
Cause: an aggressive lossy setting or an image displayed larger than its source dimensions. Fix: switch to PNG or a lossless modern format, export at the intended resolution and inspect labels at normal reading size.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Capturing screenshots in a format your site can use
If you are generating website screenshots for documentation, reports or previews, choose the output according to the same rules: PNG is a safe starting point for text-heavy captures, while WebP or JPEG can be appropriate when the capture is photographic and the receiving browser supports the format. A screenshot service should also let you control viewport, device scale and whether the page is captured after dynamic content settles.
Best Value
Or skip the browser setup
ScreenshotNeo is a website screenshot API and MCP server. One GET request returns a PNG, JPEG, WebP or PDF, so you can select an output that matches your page’s delivery needs without maintaining browser automation.
Example with cURL (see the ScreenshotNeo documentation for parameters):
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpPython:
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)Node.js:
const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://stripe.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);Before capture, ScreenshotNeo accepts cookie and consent banners and removes more than 60 known consent platforms, newsletter popups and chat widgets; each cleanup step can be turned off. Bot checks and CAPTCHAs, blank pages, timeouts, failed loads and cache hits are not billed, and the response reports the result through X-Page-Verdict and X-Billed headers. An MCP server provides take_screenshot, get_page_info and capture_pdf tools for Claude, Cursor and other MCP clients.
Every feature is included on every plan. The Free plan includes 1,000 screenshots per month with no card; paid plans start at $5 for 3,000 screenshots. You can sign up for the free plan and test your format workflow without a card.
Windows Errors? Fix Them Before They Spread
Repair common Windows errors and clear accumulated junk for a smoother, more stable PC - no reinstall needed.Free scan · no reinstallOutdated Drivers Are Slowing You Down
One free scan finds every outdated or missing driver and matches the right update for your exact hardware.Free scan · exact hardware matchA practical checklist
- Identify whether the asset is a photo, sharp graphic, transparent image, vector or animation.
- Generate candidates appropriate to that category.
- Compare visual quality at the real display size.
- Measure encoded bytes rather than relying on a published average.
- Provide a fallback when the audience or embedded browser requires one.
- Verify MIME type, caching, dimensions and the actual format delivered.
- Measure page loading after deployment; do not promise an SEO gain from format conversion alone.
Frequently Asked Questions
Should a website use AVIF everywhere if it is the smallest file in one test?
No. A result for one image does not predict every asset, and sharp graphics, transparency and audience compatibility can outweigh a smaller file. Keep a per-asset rule and validate the delivered fallback.
Is WebP always better than JPEG for photographs?
No. WebP can be smaller at an equivalent quality, but the published comparison is not a guarantee for every encoder or image. JPEG remains useful when broad compatibility is the priority.
Can I use SVG for a camera photo?
SVG is intended for vector artwork. Use a photographic raster format such as AVIF, WebP or JPEG for a complex photo.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
