AVIF Conversion Playbook: Choose JPG, PNG, WebP, GIF, PDF
AVIF is powerful: smaller files than JPG, quality competitive with HEIF/HEVC, support for HDR, alpha, and animation. But practical projects—web pages, email, print, portfolios—still often require JPG, PNG, WebP, GIF, or PDF. This playbook helps you convert AVIF to the right target format for each use case, with real-world encoder tips, troubleshooting, and automation patterns I use as a product builder and CTO.
I'm Alexander Georges, Co‑Founder & CTO of Craftle and creator of AVIF2Anything.com. I built tools and production pipelines that handle tens of thousands of images daily. In this guide I share concrete presets, command-line recipes, and the rules I follow when converting AVIF to JPG, PNG, WebP, GIF, and PDF so you can deliver predictable quality across devices and media.
Why convert AVIF at all (and what you lose or gain)
AVIF (AV1 Image File Format) offers excellent compression and modern features, but it’s not always the right end format. Reasons to convert include compatibility (older browsers, apps, or print workflows), feature mismatch (PDF print requirements, legacy email clients), or workflow constraints (CMSes, vector-only formats, or delivery via services that don't support AVIF). Conversions should be deliberate: know the trade-offs in color, alpha handling, and metadata.
Browser and ecosystem support is improving but still varies; check current coverage before relying on AVIF-only delivery:
Core considerations before converting
Every conversion should start with these checks:
- Color profile: does the AVIF include an ICC/EXIF profile (sRGB, Display P3)? Decide whether you need to preserve or convert to a destination profile (sRGB for web, CMYK for print).
- Alpha (transparency): AVIF supports alpha; make sure your target format supports it (PNG, WebP) or that you plan to flatten with a matte color.
- Animation: animated AVIFs become animated GIF or animated WebP if you want to preserve motion; otherwise export a representative frame.
- Metadata: preserve EXIF/ICC if needed for print/photography; strip for privacy and smaller files for web and email.
- Quality mapping: AVIF quality settings don’t map 1:1 to JPEG quality numbers—expect experimentation to hit similar visual quality.
Format-by-format playbook
Below I cover when to choose each target format, the technical gotchas, and practical encoder settings I use in production.
Convert AVIF to JPG — When to choose JPG
Choose JPG when you need maximum compatibility (older browsers, legacy apps), when photos will be printed by services that accept JPEG, or when alpha is not required. JPG is lossy, works best for continuous-tone images, and remains the lingua franca for email and many CMSs.
Key considerations:
- Color profile: Convert to sRGB for the web; embed ICC for print or photographers demanding color fidelity.
- Progressive vs baseline: Progressive JPGs improve perceived load times; choose progressive for web delivery.
- Quality mapping: libavif's quality scale differs—run visual comparisons at q=50–70 in libavif and map to JPEG 75–90 depending on desired size/quality.
Recommended commands (examples):
# Using ImageMagick (modern builds with libavif)
magick input.avif -colorspace sRGB -quality 85 -sampling-factor 4:2:0 -strip output.jpg
# Using ffmpeg (fast, useful for batch):
ffmpeg -i input.avif -vf scale=iw:-1 -q:v 3 -pix_fmt yuvj420p output.jpg
Convert AVIF to PNG — AVIF to PNG transparency handling
Choose PNG when you need lossless compression or full alpha/transparency. Typical use cases: UI assets, icons, screenshots with text, and any image requiring exact pixel preservation. PNG supports transparency and is widely supported across platforms.
Transparency gotchas and their fixes:
- Premultiplied alpha vs straight alpha: Some decoders produce premultiplied alpha. When flattening, use a matte color (often white or page background) and ensure the tool understands alpha type.
- Matte color selection: Avoid black mattes on semi-transparent edges—use the actual page background or neutral gray if you must flatten.
- Gamma and color shifts: Preserve or convert ICC profiles to avoid midtone shifts; ImageMagick's -colorspace changes can sometimes cause visible shifts—prefer explicit ICC transforms when color-critical.
Commands and tips:
# Preserve alpha, preserve ICC where possible:
magick input.avif -alpha on -strip output.png
# Flatten to white matte (if target doesn't support alpha):
magick input.avif -background white -flatten -quality 100 output.png
# With pngquant for smaller file (converts to palette, may harm gradients):
magick input.avif -alpha on png:- | pngquant --quality=65-80 - > output-quant.png
Convert AVIF to WebP — AVIF to WebP quality settings
WebP is a strong choice for the web: good compression, support for transparency and animation (animated WebP), and faster decode on some platforms. Choose WebP when you need both compatibility and alpha/animation with smaller sizes than PNG/GIF.
Quality mapping and tips:
- Lossy WebP quality is set with -q (0–100). A visual-equivalence rule of thumb: libavif at q=50–60 often maps roughly to WebP q=65–80 depending on content. Always run pixel/visual checks.
- For near-lossless or high-quality photography, use WebP q=85–95 for web; for thumbnails q=60–75.
- Animated AVIF → animated WebP: use ffmpeg or gif2webp-like tools; preserve frame durations and disposal behavior to avoid visual glitches.
Commands:
# Single-frame conversion with cwebp (libwebp):
cwebp -q 80 input.png -o output.webp
# From AVIF directly via ffmpeg:
ffmpeg -i input.avif -qscale:v 75 output.webp
# Animated AVIF to animated WebP (ffmpeg preserves frames):
ffmpeg -i animated.avif -c:v libwebp -lossless 0 -q:v 60 -loop 0 output_anim.webp
Convert AVIF to GIF — When GIF still makes sense
GIF is limited: 256-color palette and poor compression for photo-like frames. Use GIF only for legacy support, very simple animations, or when the environment only supports GIF. Otherwise prefer animated WebP or MP4 for motion.
Notes and tips:
- Reduce color banding by optimizing the palette (floyd-steinberg dithering). Tools like gifsicle or ImageMagick can help.
- For long animations, GIFs balloon in size quickly—consider converting to WebP/MP4 and using a GIF fallback only when necessary.
Commands:
# Convert animated AVIF to GIF via ffmpeg (then optimize with gifsicle)
ffmpeg -i animated.avif -vf "fps=15,scale=800:-1:flags=lanczos" -gifflags -transdiff -y temp.gif
gifsicle -O3 temp.gif -o output.gif
Convert AVIF to PDF — Convert AVIF to PDF for print
Exporting to PDF is a different class of problem: print requires color accuracy, high DPI, and embedded profiles. Use PDF when you need a print-ready deliverable, contact sheets, or distribution-ready artwork. PDF is raster (images embedded) or vector (graphics); AVIF → PDF embeds raster images in a PDF container.
Critical steps for print-ready PDFs:
- Resolution: ensure at least 300 DPI for photographic prints. Calculate pixel dimensions required for the physical print size.
- Color space: convert to the printer's required color space (often CMYK). Converting sRGB→CMYK requires a good ICC profile and quality color management to avoid dullness.
- Embed ICC profile: printers expect embedded profiles to manage colors accurately.
- Compression: use lossless or high-quality JPEG inside the PDF; avoid heavy lossy compression unless file size is constrained.
Recommended workflow (ImageMagick + Ghostscript for reliable PDFs):
# Convert AVIF to high-res TIFF with embedded ICC, then to PDF
magick input.avif -colorspace sRGB -density 300 -units PixelsPerInch -quality 100 -profile /path/to/sRGB.icc temp.tiff
# Optionally convert to CMYK using a good CMYK profile
magick temp.tiff -profile /path/to/CMYK.icc temp_cmyk.tiff
# Convert to PDF (lossless or high-quality JPEG inside)
magick temp.tiff -compress jpeg -quality 95 output.pdf
Why two steps? Some print workflows prefer TIFF as an intermediate because it preserves metadata, ICC, and resolution reliably. Many RIPs (raster image processors) accept TIFF/PDF equally; use what your print vendor requests.
Quick reference: format trade-offs
Use this table to quickly match use cases to formats. It summarizes common trade-offs I evaluate when choosing a conversion target.
| Format | Best for | Alpha | Animation | Typical use | Preserves color/ICC |
|---|---|---|---|---|---|
| JPG | Photos, widest compatibility | No (flatten) | No | Web, email, general photography | Can embed ICC |
| PNG | Lossless, UI assets, transparency | Yes | No | UI, icons, screenshots | Can embed ICC |
| WebP | Web with alpha/animation | Yes | Yes | Web delivery, animated assets | Can embed ICC (partial) |
| GIF | Legacy simple animations | Limited (binary transparency) | Yes | Legacy banners, micro-animations | No |
| Print-ready deliverables | Yes (flatten or embed) | No (unless embedding video) | Print, distribution, portfolios | Yes (embed ICC) |
Practical workflows and automation recipes
Below are production-ready recipes for common real-world scenarios I implement for clients and Craftle.
1) Photographer: Master AVIF → web JPEGs, print PDFs, and PNGs for UI
Goals: keep a master AVIF (or RAW) and export derivatives:
- Web JPEGs: sRGB, progressive, quality 80, strip metadata for privacy.
- Print PDFs: 300 DPI, convert to CMYK with embedded profile.
- UI/retouch deliverables: PNG with preserved alpha and ICC.
Script snippet (bash):
# web jpg
magick input.avif -colorspace sRGB -resize 2000x -strip -interlace Plane -quality 80 output-web.jpg
# print pdf
magick input.avif -density 300 -units PixelsPerInch -profile /path/sRGB.icc -profile /path/CMYK.icc temp_cmyk.tiff
magick temp_cmyk.tiff -compress jpeg -quality 95 output-print.pdf
# ui png
magick input.avif -alpha on -strip output-ui.png
2) Web developer: responsive images and CDN fallback
Goals: serve AVIF where supported, fallback to WebP/JPG, create responsive srcset sets. Use a build step that outputs multiple sizes and formats.
Build step outline:
- Generate sizes (e.g., 320, 640, 1024, 1600) in AVIF and WebP. Keep a JPG fallback for email or very old clients.
- Use the
element to serve AVIF, then WebP, then JPG. (Refer to WHATWG image docs for syntax.) - Deliver via a CDN that supports content negotiation or extension-based caching and correct content-type headers.
Tools: ffmpeg, magick, or specialized node-based image pipelines (sharp). Example with sharp (Node.js):
// pseudo-code: sharp pipeline
sharp('input.avif')
.resize(1024)
.toFormat('webp', {quality: 80})
.toFile('image-1024.webp');
sharp('input.avif')
.resize(1024)
.jpeg({quality: 80, progressive: true})
.toFile('image-1024.jpg');
3) Batch conversion for email marketing
Email clients often don't support WebP/AVIF. For email campaigns, produce JPEG at smaller sizes, consider color profile stripping to reduce size, and use progressive JPEGs for perceived load speed. Keep file sizes under common client thresholds (typically <200 KB for hero images).
Command example (batch):
for f in *.avif; do
magick "$f" -colorspace sRGB -resize 1200x -strip -interlace Plane -quality 70 "email/${f%.*}.jpg"
done
Troubleshooting: common conversion issues and fixes
Below are frequent problems I encounter and how to fix them quickly.
Issue: Transparent AVIF turns black or shows fringes when converted to PNG/JPG
Cause: Premultiplied alpha or tool misinterpreting alpha; flattening without proper matte color.
Fixes:
- Use conversion tools that preserve straight alpha (ImageMagick with -alpha on). If flattening, supply the correct background color: -background "#RRGGBB" -flatten.
- If fringes remain, recompose edges with a slightly expanded alpha channel and apply a feather to reduce hard edges before flattening.
Issue: Color shifts after conversion (dull or too warm)
Cause: Missing/changed ICC profile, or implicit colorspace conversions.
Fixes:
- Always inspect input ICC profile. Use ImageMagick's -profile to embed or convert explicitly: -profile sRGB.icc.
- For print, convert to the printer's CMYK profile and soft-proof before final export.
Issue: Animated AVIF converted to static image or broken animation
Cause: Using single-frame decoders or a converter that doesn't support animated AVIF as multi-frame.
Fixes:
- Use ffmpeg (modern builds) or imageio libraries that support multi-frame AVIF. Example: ffmpeg -i animated.avif -c:v libwebp ...
- Check frame durations and disposal methods; preserve them explicitly during conversion and optimization passes.
Issue: Very large files after conversion to JPG or WebP
Cause: High quality settings, inappropriate sampling, or upscaling. Also converting to CMYK without recompression can massively increase size.
Fixes:
- Re-evaluate quality: lower JPEG quality 75–85 for web. Use chroma subsampling 4:2:0 for photos (ImageMagick -sampling-factor 4:2:0).
- Run lossy WebP with q=70–80 for responsive images. For thumbnails, go lower.
Comparison: export presets (web, print, email)
Below is a practical set of presets I use as starting points for different delivery channels. These should be tuned to your content (complexity, noise, detail).
| Channel | Format | Profile | Quality / Settings | Other |
|---|---|---|---|---|
| Web (hero images) | AVIF / WebP fallback / JPG final fallback | sRGB | AVIF q=50–60; WebP q=75–85; JPG q=80 progressive | Responsive sizes 320–2000px, strip meta |
| JPG | sRGB | JPG q=65–75, progressive, strip metadata | Resize to max width 600–1200px depending on layout | |
| PDF (embedded TIFF/JPG) | Embed ICC (printer profile) | Lossless/intermediate TIFF or JPG q=95 inside PDF | 300 DPI, convert to CMYK as required | |
| UI / icons | PNG | sRGB | Lossless PNG, palette/pngquant if acceptable | Preserve alpha and exact pixels |
| Simple animation (legacy) | GIF | sRGB | Optimize with gifsicle -O3, limit fps & colors | Prefer WebP/MP4 where possible |
Online tools, services, and when to use them
For quick conversions, testing, and privacy-conscious one-off tasks, online tools are convenient. I built AVIF2Anything.com as a privacy-first converter that supports JPG, PNG, WebP, GIF, PDF and is handy for manual workflows and verification. It’s a good place to check how a particular AVIF decodes before putting a pipeline into production.
When to use online tools:
- Rapid manual testing and visual comparisons across formats.
- Converting a few assets when you don’t want or need a full build pipeline.
- Validating transparency and animation behavior across formats without installing libraries.
When to avoid online tools:
- Large batches — build an automated pipeline using ffmpeg, ImageMagick, or a Node service (sharp).
- Privacy-sensitive images — prefer local tools or trusted internal services.
For repeated conversions or integration into CI/CD, use libraries that scale: libavif bindings, ffmpeg, ImageMagick, or sharp. If you need a quick manual converter, AVIF2Anything.com is a straightforward option I've built to be lightweight, secure, and practical.
Advanced tips: mapping quality and testing for parity
There’s no single “quality” slider that maps across formats. To get visual parity:
- Pick a representative set of images (photos, gradients, UI screenshots).
- Export several candidates at different quality levels across formats.
- Use perceptual difference tools (PSNR/SSIM or human A/B testing) to pick thresholds. For many photos, SSIM > 0.95 is a good starting point.
- Automate the comparison and pick the smallest file that meets your perceptual threshold.
Example command to compute SSIM with ffmpeg:
ffmpeg -i original.png -i candidate.jpg -lavfi ssim="stats_file=ssim.log" -f null -
Developer notes: server-side serving and fallback
Serving strategy matters:
- Prefer Content Negotiation with Accept headers if your CDN supports it — serve AVIF when the client accepts it, otherwise fall back.
- Alternatively, use
with type attributes and multiple sources for explicit fallbacks. See the HTML picture element details in the living standard for correct usage: WHATWG — picture element. - Set correct MIME types (image/avif, image/webp) so browsers interpret images properly.
FAQ
Q: Should I always keep a master AVIF?
A: Yes. Keep a lossless original (RAW or a high-quality AVIF) as your master. It gives you a single source of truth for future exports and preserves more detail than repeatedly recompressing derivative JPGs/PNGs.
Q: How do I handle AVIF to PNG transparency handling without halos?
A: Preserve straight alpha if you can; if flattening, use the actual page background. If fringes occur, expand the alpha a few pixels and blur/feather slightly before flattening to blend edges into the chosen matte. Use tools that understand premultiplied alpha correctly.
Q: What WebP quality maps to AVIF settings?
A: There's no exact mapping. As a rule of thumb, libavif q≈50–60 can visually match WebP q≈75–85 for photographs. Test with SSIM/visual checks. For technical pipelines, automate visual comparisons.
Q: Can I convert animated AVIF to PDF?
A: PDFs are not suitable for animation in standard printing/publishing. If you need frames in a PDF, export the frames as separate pages or a contact sheet. For motion presentation, export to MP4 or animated WebP instead.
Q: What about metadata and privacy?
A: Strip metadata (Exif, GPS) for public web images unless you need them. Use -strip in ImageMagick or options in other tools. For print and photography, preserve metadata and ICC profiles where color fidelity is critical.
Q: Which tools should I use for batch conversion?
A: For reliability and scale, use ffmpeg, ImageMagick (ensure modern build with libavif), libavif CLI, or Node's sharp for JS-based pipelines. For quick manual conversion, AVIF2Anything.com is useful for ad-hoc work.
Conclusion
Converting AVIF to JPG, PNG, WebP, GIF, or PDF requires balancing compatibility, quality, and workflow constraints. Think of AVIF as your high-quality master and pick target formats based on the final medium: JPG for broad compatibility and email, PNG for lossless and alpha, WebP for modern web delivery with alpha/animation, GIF only for legacy animation, and PDF for print and polished deliverables.
In practice, build a minimal automation layer that produces AVIF and at least one widely compatible fallback (WebP or JPG) and validate color/alpha with a small test harness. Use the recommended encoder settings above as a starting point, but tune for your image set. For quick checks or one-off conversions, use a privacy-conscious web tool like AVIF2Anything.com, then standardize settings into your build pipeline.
If you need a starting script or a tuned preset for a specific content type (portraits, product shots, UI), let me know the details of your images (dimensions, color space, animated vs static) and I’ll provide a short recipe tuned to that content.
Further reading and references: