How to Save a Web Page as AVIF

To save a web page as AVIF, first identify what you need:

One image already shown on the page: right-click the image and choose Save image as…. If the site serves that resource as AVIF and the browser preserves the format, save it with an .avif extension.
A PNG or JPEG image converted to AVIF: use Squoosh or the avifenc command-line tool.
The entire rendered page as one AVIF picture: take a full-page screenshot first, then convert that screenshot to AVIF. Saving an image from the context menu does not save the whole page.

AVIF is an image format built from AV1 bitstreams in the HEIF container. A webpage is a document that may contain AVIF image resources; it is not itself an AVIF file. MDN’s image-format guide explains this distinction and the fallback behavior available through <picture>.

Save an AVIF image that is already on a webpage

Open the page in your browser.
Right-click the specific image you want.
Choose Save image as….
In the save dialog, check the filename and extension. Use .avif when the downloaded resource is AVIF.
Verify the result locally before processing or uploading it.

The web.dev AVIF guide demonstrates this workflow for an image served as AVIF. Exact menus and filename behavior vary by browser, operating system, site configuration and browser version.

Confirm that the file really is AVIF

Do not rely only on the filename. A site can return another format while using an image URL that looks like AVIF, and a browser can rename a download.

Check that the filename ends in .avif.
Open the file in an image viewer that supports AVIF.
On systems with the file utility, run file image.avif.
For a network-level check, inspect the response’s Content-Type. The AVIF media type is image/avif; MDN notes that media-type support varies by browser and version. See MDN’s MIME-type guide.

Convert a PNG or JPEG to AVIF

When the page provides a PNG or JPEG, save that source image and convert it. The web.dev workflow names both Squoosh and avifenc.

Option 1: Squoosh

Open Squoosh.
Drop in the PNG or JPEG.
Choose the AVIF codec in the output settings.
Adjust the available quality and size controls for your use case.
Download the generated .avif file.

Squoosh is convenient when you want a visual comparison. Keep the original until you have checked text, gradients, transparency and fine detail in the converted file.

Option 2: avifenc

avifenc is a command-line encoder from the libavif project. The web.dev guide describes it as accepting PNG and JPEG inputs and using libavif to encode AVIF.

avifenc input.png output.avif
avifenc input.jpg output.avif

Use a separate output filename so the source is not overwritten. The precise quality and speed flags depend on the installed avifenc version; run avifenc --help on your machine and select settings appropriate to your size, quality and processing-time requirements.

Save the entire rendered webpage as AVIF

A browser’s Save image as… command applies to one image resource. It does not create a picture of the page’s text, layout, menus and other rendered elements. For a whole-page AVIF, use this two-stage process:

Capture the rendered page as a full-page screenshot in PNG or another format your capture tool supports.
Convert that screenshot to AVIF with Squoosh or avifenc.

The reviewed AVIF guidance does not establish a universal built-in browser command that directly exports a whole webpage to AVIF. Treat full-page capture and AVIF encoding as separate operations.

Capture considerations

Dynamic content: wait for the page to finish loading before capture. A screenshot can otherwise contain skeletons, missing images or partial data.
Lazy-loaded images: scroll through the page or use a capture tool that explicitly loads lazy images.
Cookie banners and overlays: dismiss them before capture, or they will become part of the image.
Very tall pages: confirm that your capture tool can stitch the complete document without clipping fixed headers or repeating elements.
Responsive layout: set the viewport width and device scale before capture so the result matches the layout you need.

Or skip the browser setup

ScreenshotNeo captures a rendered URL with one request. It returns PNG, JPEG or WebP, so convert the returned image to AVIF afterward with Squoosh or avifenc when AVIF is your required delivery format. Read the ScreenshotNeo API documentation for the available options.

cURL

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

avifenc shot.webp shot.avif

Python

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)

# Convert shot.webp to AVIF with avifenc:
# avifenc shot.webp shot.avif

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}`);

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));
// Convert shot.webp to AVIF with avifenc:
// avifenc shot.webp shot.avif

Before the capture, ScreenshotNeo can accept cookie or consent banners and remove more than 60 known consent platforms, newsletter popups and chat widgets; each step can be turned off. Bot checks and CAPTCHAs, blank pages, timeouts, failed loads and cache hits are not billed, and the response identifies the result with X-Page-Verdict and X-Billed headers. Its MCP server provides take_screenshot, get_page_info and capture_pdf tools for Claude, Cursor and other MCP clients. You get 1,000 screenshots per month free with no card; paid plans start at $5 for 3,000 shots. Create a free ScreenshotNeo account.

Useful capture and conversion options

Need	Recommended path	Check
One image already delivered as AVIF	Browser context menu → Save image as…	Confirm the saved file is actually `.avif`.
PNG or JPEG source	Squoosh or `avifenc`	Review quality, transparency and dimensions.
Whole rendered page	Full-page screenshot, then AVIF conversion	Wait for dynamic and lazy content; remove overlays.
Repeatable automated captures	Screenshot API, then encoder	Handle HTTP errors, timeouts and output validation.
Offline reading or archiving	Use a webpage archive or document format	AVIF stores pixels, not page semantics or links.

Troubleshooting

The saved file is JPG or PNG

The page may be serving a fallback format, or the browser may have converted or renamed the download. Inspect the response media type and save the original resource URL. If it is not AVIF, convert the downloaded image with Squoosh or avifenc.

Right-click saves only one picture

That is expected. The context-menu command saves the selected image resource, not the rendered webpage. Capture the whole page first, then encode the screenshot as AVIF.

The page is missing images in the screenshot

Images may be lazy-loaded, blocked, or still loading. Wait longer, scroll through the document before capture, check network access, and use a capture workflow that supports lazy images.

Dismiss or hide overlays before capture. For automated work, configure the capture process to accept consent and hide known overlays; otherwise those elements are pixels in the final AVIF.

The AVIF will not open

Check the encoder output and file signature, then try a current viewer or browser. Browser and application support is version-dependent; consult the current Can I Use AVIF compatibility table for the target environment.

The conversion is too slow or the file is too large

Start with a smaller screenshot, use the encoder’s documented speed or quality controls, and avoid encoding a page at a needlessly high device scale. Keep the source image so you can produce another AVIF without recapturing the page.

An automated request fails

Check the URL encoding, API key, response status and timeout. Save the response body when an API returns an error instead of treating every response as image bytes. With ScreenshotNeo, inspect X-Page-Verdict and X-Billed to distinguish a clean capture from a blocked, blank, timed-out or cached result.

Performance, reliability and cost

Capture cost: a full-page screenshot uses more browser work than saving one existing image. Capture only the page area you need.
Encoding cost: AVIF conversion adds CPU time after capture. Batch conversions and choose quality settings that match the delivery requirement.
Reliability: dynamic pages can change between runs. Fix the viewport, wait condition, timezone and other relevant inputs when reproducibility matters.
Validation: verify dimensions, media type and decodability before publishing or caching the output.
Billing with ScreenshotNeo: clean shots are billed; bot checks, CAPTCHAs, blank pages, timeouts, failed loads and cache hits cost nothing. Caching with a TTL you choose can avoid repeated captures.
Format support: ScreenshotNeo’s capture response is PNG, JPEG or WebP. Use a second AVIF encoding step when your downstream system specifically requires AVIF.

FAQ

Can I save HTML as AVIF?

No. AVIF is an image format. Render the HTML, capture the result as an image, and then encode that image as AVIF.

Does changing a file extension convert an image?

No. Renaming .png to .avif does not change the encoded data. Use an AVIF encoder.

No. Browser support and exact save behavior vary by browser and version. Check the downloaded file and the target browser’s current compatibility information.

Is AVIF suitable for an offline copy of a website?

Only as a flattened picture. It does not preserve selectable text, links, scripts, document structure or page navigation.

Can ScreenshotNeo return AVIF directly?

ScreenshotNeo returns PNG, JPEG or WebP. Capture the page with the API and encode the result to AVIF with Squoosh or avifenc.