osm2cdr.com

AVIF — AV1 Image File Format: 50% lighter than WebP for raster maps

2026-06-079 min read
AVIFAV1rasterwebcompressionimage
Export formats: AVIF

AVIF (AV1 Image File Format) is a raster image format built on the keyframe of the open AV1 video codec. The container is HEIF (the same one Apple uses for HEIC), and inside is an AV1 intra-frame. In practice this means 30–50% smaller file size compared to WebP at the same visual quality, 10- and 12-bit color support, HDR, transparency, and animation in a single format. For raster OpenStreetMap maps this is a chance to reduce mobile-user bandwidth by 1.5–2× without losing label or building-contour readability.

Map generation of Ekaterinburg city center
Ekaterinburg center, 200×200 m fragment. The PNG export from osm2cdr.ru weighs 180 KB; recompressed to AVIF at quality 60 — about 60 KB with no visible degradation of label crispness.

History: from AV1 video codec to a web image format

AVIF's history starts not with pictures but with video. In 2015 the Alliance for Open Media — a consortium of Google, Mozilla, Microsoft, Cisco, Netflix, Amazon, Intel, and others — set a goal: a next-generation open video codec without patent royalties, capable of replacing proprietary HEVC/H.265. By 2018 the alliance released AV1 — a codec with 30% better compression than HEVC and 50% better than VP9.

In 2019 it became clear that a single AV1 frame (intra-frame, IFrame) could be used as a standalone image. A working group in Alliance for Open Media formalized this as AVIF — a specification for static and animated images using the HEIF container (ISO/IEC 23008-12) with AV1 as the codec. First public spec: February 2019, the image/avif MIME type was registered with IANA.

By 2020 Chrome 85 and Opera 71 had enabled native decoding. Firefox added support in version 93 (October 2021). Safari caught up in iOS 16 / macOS 13 Ventura (September 2022). As of today — May 2026 — AVIF is supported by all major browsers in recent versions, covering roughly 96% of global traffic per Can I Use statistics.

In parallel AVIF appeared throughout the image-processing ecosystem: ImageMagick 7.1 (via libheif), Photoshop with a plugin, GIMP 2.10.30, Sharp for Node.js, Pillow-AVIF for Python. Mac Finder and Windows 11 Explorer show previews without third-party plugins.

What's inside an AVIF file

AVIF is a HEIF container — ISO Base Media File Format, the same container family as MP4 and HEIC. The file consists of boxes: ftyp declares file type, meta stores metadata, mdat contains encoded pixels as AV1 OBU (Open Bitstream Units). Transparency is stored as a separate alpha channel — a second AV1 stream — so AVIF handles partial transparency as well as PNG.

The AVIF color model supports YUV 4:2:0, 4:2:2, 4:4:4, and monochrome (for grayscale maps). Bit depth — 8, 10, or 12 bits per channel, important for HDR photography, while 8 bits suffices for raster maps. ICC profiles fit into the meta box in the standard way, as with JPEG.

Animation in AVIF is implemented through multiple frames in one mdat with a timeline script in meta. This is a replacement for GIF and animated WebP, but for static maps it has no practical use.

A distinctive AVIF property is encode/decode time asymmetry. Encoding through the reference libaom is 5–10× slower than JPEG and WebP: a 1000×1000-pixel quarter compresses in 5–15 seconds on a modern CPU. Decoding, by contrast, is faster than WebP thanks to optimized AV1 SIMD routines. This means AVIF is ideal for static assets compiled once and served millions of times — for example OG images for osm2cdr.ru landing pages or map previews.

Who needs AVIF: five roles

Web cartographer with mobile audience. Real-estate directory sites, travel guides, regional news outlets typically show a static map thumbnail next to a listing. A 200 KB PNG multiplied by hundreds of thousands of views is real money in bandwidth. Recompressing those thumbnails into AVIF at quality 65 yields 60–80 KB without visual degradation. On mobile plans this is immediately noticeable in page-load time.

SEO specialist. Google Core Web Vitals and the Largest Contentful Paint (LCP) metric penalize large hero-block images. If an osm2cdr.ru/formats/dxf/ landing page or a city SEO page osm2cdr.ru/map/moscow/ shows a map preview — AVIF cuts LCP by hundreds of milliseconds. That converts directly into Google rankings.

OG-image automation. Open Graph images for social networks (Facebook, LinkedIn, Telegram) usually weigh 100–300 KB as JPEG. For osm2cdr.ru city previews this means hundreds of thousands of unique files in Redis cache. Storage in AVIF cuts disk footprint 3–5×; meanwhile OG parsers of all major social networks have read AVIF since 2024 — fallback to JPEG is only needed for Twitter card v1 and old messenger in-app browsers.

District map on a print magazine cover. A designer takes a raster export of an OSM fragment, edits in Photoshop, posts an article preview on the website. Web preview in AVIF, source PNG for print. The same source provides a light web file and an uncompressed original when print quality is needed.

3D artist with map-based textures. In Unreal, Unity, Blender AVIF textures have been supported since 2023 via plugins. A ground texture with an OSM underlay in AVIF at quality 80 occupies 3× less disk than PNG and loads into VRAM faster than JPEG thanks to better compression.

Software for AVIF: seven programs

Browser. Any modern browser opens AVIF with a double-click. The fastest preview path.

Photoshop 2024. Adobe Photoshop since version 24.0 (October 2022) supports AVIF natively via File → Open and File → Save As → AVIF. Quality slider, lossless mode, 10-bit depth available. adobe.com/products/photoshop

GIMP 2.10.30+. Open alternative to Photoshop. AVIF reads and writes through the built-in libheif plugin. Free. gimp.org

Sharp (Node.js). npm install sharp — the main server-side image tool. sharp(input).avif({ quality: 60 }).toFile(output). Used in Next.js Image, Cloudinary, imgproxy. sharp.pixelplumbing.com

Pillow-AVIF (Python). pip install pillow-avif-plugin extends Pillow. After import PIL.Image.open('map.avif') works transparently like JPEG. Convenient for batch scripts and django-imagekit integration. github.com/fdintino/pillow-avif-plugin

ImageMagick 7.1. magick map.png -quality 60 map.avif — single-line conversion. Via libheif. Free, cross-platform. imagemagick.org

Squoosh (web). Open web app from Google for interactive in-browser compression. Compares source and AVIF side-by-side, shows file size in real time, lets you slide the quality slider. Ideal for one-off files. squoosh.app

Pitfalls and tips

Quality 60 — sweet spot for maps. On photographic images AVIF at quality 50 looks indistinguishable from the original. On line-art maps with thin 1–2 pixel strokes, fine label text, and sharp color transitions, recommend quality 60–70. Below 50 — label edges start showing slight blur.

Lossless mode. AVIF supports true lossless encoding. Files come out 10–20% smaller than PNG, which can matter for raster-map archives. Lossless encoding is ~2× slower than lossy quality 90. Use via lossless flag in Sharp or -lossless 1 in avifenc.

4:4:4 subsampling for line art. By default AVIF uses 4:2:0 chroma subsampling — better compression but light bleed on sharp color borders. For maps with bright POI markers or contrasting layers, force 4:4:4 (chromaSubsampling: '4:4:4' in Sharp).

Encoding is slow. A single 1200×900 pixel file at quality 60 takes 5–8 seconds on one modern CPU core. For batch processing of thousands of city previews, run Sharp with a worker-thread pool (sharp.concurrency()), or use avifenc -j 4 for intra-file parallelism. On AWS Lambda with 1 GB RAM one AVIF takes about 2–4 seconds.

Fallback for older clients. About 4% of global traffic is IE11, older Safari (pre-16), some messenger in-app browsers. Standard pattern via <picture>:

<picture>
  <source srcset="/map.avif" type="image/avif">
  <source srcset="/map.webp" type="image/webp">
  <img src="/map.jpg" alt="OSM map of Moscow">
</picture>

The browser picks the first format it can decode. No server logic needed — everything is client-side.

Transparency works but not everywhere. AVIF supports transparency via a separate alpha channel. Sharp and Photoshop write it correctly. Some older decoders (Firefox pre-100) showed alpha as black background. Today the issue is resolved in all current browsers.

HDR maps — niche case. AVIF supports 10/12-bit, which theoretically opens HDR elevation maps through color encoding. In practice I haven't seen real open-source cases yet. If you do scientific terrain visualization, AVIF 10-bit could replace 16-bit PNG with 2× size savings.

How to make an AVIF map via osm2cdr.ru

Direct AVIF export is not in the standard osm2cdr.ru format list, but a reliable two-step pipeline exists through PNG export + recompression.

Step 1. On osm2cdr.ru outline the desired map fragment — from neighborhood to district. For web previews the optimal map resolution is 1200×800 pixels. Step 2. In the format dropdown choose PNG (or JPEG for an already-compressed source). Step 3. Download. Step 4. Recompress to AVIF via Sharp:

const sharp = require('sharp');
sharp('map.png')
  .avif({ quality: 65, chromaSubsampling: '4:4:4' })
  .toFile('map.avif')
  .then(info => console.log(`AVIF: ${info.size} bytes`));

Or via Pillow-AVIF in Python:

from PIL import Image
import pillow_avif  # noqa: F401  -- registers AVIF in Pillow

img = Image.open('map.png')
img.save('map.avif', quality=65, subsampling=0)  # subsampling=0 = 4:4:4

Or one-liner via ImageMagick:

magick map.png -quality 65 -define avif:chroma-subsampling=4:4:4 map.avif

In a typical case a 200–500 KB osm2cdr.ru PNG export recompresses to 60–150 KB AVIF without visual degradation. On landing pages with dozens of such previews this saves megabytes of bandwidth.

Sources

Related articles

WebP: Google's Open Raster Format for the Modern WebJPEG XL: Modern Successor to JPEG for High-Quality Raster ImagesPNG — Complete Guide: W3C History 1994-2026, How to Open, How to Make an OSM PNG MapJPEG — Complete Guide: 30 Years of History, How to Open, How to Make a JPG OSM MapJPEG 2000: Wavelet-Based Compression for Medical, Cinema & Satellite Imagery
← All articles