I'm building a CMS workflow that needs WebP and AVIF output, any recommendations?

Yes — for a CMS workflow, the best approach is usually to treat WebP and AVIF as generated delivery formats, not as the primary stored originals.

Recommended setup

1) Keep the original upload

Store the source file as-is, usually:

• JPEG / PNG / TIFF / PSD uploads from users
• or the original camera upload

This gives you:

• a lossless master
• future reprocessing if your settings change
• fallback for unsupported clients

2) Generate derivatives on upload

Create optimized renditions automatically, typically:

• AVIF: best compression, best for modern browsers
• WebP: very broad support, good fallback
• JPEG/PNG fallback if needed for legacy clients or email

A common pattern:

• Original
• AVIF
• WebP
• JPEG/PNG fallback

3) Use responsive variants too

If the CMS serves images in multiple sizes, generate each size in each format:

• 320w, 640w, 960w, 1280w, etc.
• AVIF/WebP/JPEG per size

Then deliver via:

• <picture> element
• or server-side content negotiation if your stack supports it well

---

Format recommendations

AVIF

Use when:

• you want maximum compression savings
• image quality at smaller file sizes matters
• your users are mostly on modern browsers

Pros:

• usually smallest files
• great for photographic content

Cons:

• slower encoding than WebP/JPEG
• some older environments may not support it

WebP

Use when:

• you want excellent support and strong savings
• you want a safe modern default alongside AVIF

Pros:

• widely supported
• smaller than JPEG/PNG in most cases
• supports alpha/transparency

Cons:

• not always as compact as AVIF

JPEG/PNG

Use as fallback only:

• JPEG for photos
• PNG for graphics needing lossless transparency/line art

---

Practical delivery strategy

If you control frontend markup, this is a solid pattern:

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

For responsive images, expand srcset with widths.

---

Encoding guidance

Quality settings

Reasonable starting points:

• AVIF: quality around 45–60
• WebP: quality around 70–85
• JPEG fallback: quality around 75–85

These are not universal, but they’re good defaults to test from.

Preserve metadata?

Usually:

• strip EXIF/IPTC unless needed
• keep orientation normalized
• retain copyright info only if your workflow requires it

Color space

Best practice:

• convert to sRGB for web delivery
• ensure consistent color rendering across browsers

---

Operational recommendations for a CMS

Use async background processing

Don’t block upload requests while encoding. Instead:

• accept upload
• store original
• queue image processing job
• generate derivatives in background

Cache aggressively

Images should be cache-friendly:

• immutable URLs for derivatives if possible
• long cache headers
• CDN in front if you can

Store derivative metadata

Track:

• source asset ID
• dimensions
• file format
• quality preset
• checksum/version

This makes regeneration easy.

Build a reprocessing pipeline

You’ll want the ability to:

• change AVIF/WebP settings later
• regenerate all assets from originals
• handle library upgrades or bug fixes

---

Tooling options

Depending on your stack:

Node.js

• sharp is the most common choice
• supports AVIF and WebP well
• fast and production-friendly

PHP

• Imagick if available
• or libraries/wrappers that support modern formats

Python

• Pillow + libavif/libwebp support, or image processing pipelines via external tools

CLI/server-side tools

• ImageMagick
• libvips
• ffmpeg is not for still images, but useful for animations/video posters

If you want performance, libvips (often via sharp) is usually the best choice.

---

If you want the simplest good default

A very common CMS setup is:

• Save original upload
• Generate:
  • AVIF
  • WebP
  • JPEG fallback
• Use responsive sizes
• Serve through a CDN
• Process asynchronously

That gives you:

• modern optimization
• broad compatibility
• future-proofing

If you want, I can also suggest:

1. a specific stack recommendation for Node/PHP/Python, or
2. a production-ready image pipeline design for your CMS.