Implementing AVIF at Vivo: Next‑Gen Image Format in Practice

Background

Vivo’s community platform serves a large amount of image and video traffic. Under weak network conditions the first‑screen image load slows LCP and FCP, reducing user depth and retention. WebP already cut image size by roughly 50%, but the team pursued a second round of size reduction by evaluating AVIF, whose browser support has matured.

Technical research: why AVIF?

Compression efficiency : AVIF, built on the AV1 video codec, can reduce file size by more than 60% compared with JPEG at comparable subjective quality, and its PSNR and SSIM scores exceed those of WebP at the same bitrate.

Ecosystem support : Chrome, Firefox, Edge and Safari 16+ fully support AVIF; mobile coverage exceeds 90%. Major CDNs (e.g., Cloudflare, Alibaba Cloud) provide transcoding, and open‑source toolchains are maturing.

Target benefit : The team set a goal of ≥35 dB PSNR while achieving at least a 20% size reduction versus WebP. Research data confirmed feasibility.

Design – smooth, controllable degradation strategy

The core principle is to deliver the optimal AVIF experience to supported clients, provide seamless fallback for unsupported browsers, and keep server stability.

Front‑end detects AVIF support and requests AVIF images.

CDN edge cache stores converted AVIF files; each source image is transcoded only once.

Server performs asynchronous transcoding on the first AVIF request, returns 404 and triggers a background job while the front‑end falls back to WebP.

Any failure at any stage automatically degrades to WebP, ensuring page functionality.

Front‑end implementation: smart format selection and degradation

The implementation follows three steps:

Capability detection : Use an Image object with a minimal AVIF data URI to asynchronously determine support.

URL assembly : Based on the detection result, construct the image URL with the appropriate extension (avif or fallback format).

Automatic fallback : If an image fails to load (e.g., AVIF not yet generated), switch the src to WebP, and if WebP also fails, fall back to JPEG.

/**
 * 检测浏览器是否支持 AVIF 图片格式
 * @returns {Promise<boolean>}
 */
async function checkAvifSupport(){
  // 创建一个 Image 对象，并设置 src 为一个最小的、有效的 AVIF 图片数据
  return new Promise((resolve) => {
    const image = new Image();
    image.onload = image.onerror = () => {
      resolve(image.height === 2);
    };
    image.src = "data:image/avif;base64,AAAAIGZ0eXBhdmlmAAAAAGF2aWZtaWYxbWlhZk1BMUIAAADybWV0YQAAAAAAAAAoaGRscgAAAAAAAAAAcGljdAAAAAAAAAAAAAAAAGxpYmF2aWYAAAAADnBpdG0AAAAAAAEAAAAeaWxvYwAAAABEAAABAAEAAAABAAABGgAAAB0AAAAoaWluZgAAAAAAAQAAABppbmZlAgAAAAABAABhdjAxQ29sb3IAAAAAamlwcnAAAABLaXBjbwAAABRpc3BlAAAAAAAAAAIAAAACAAAAEHBpeGkAAAAAAwgICAAAAAxhdjFDgQ0MAAAAABNjb2xybmNseAACAAIAAYAAAAAXaXBtYQAAAAAAAAABAAEEAQKDBAAAACVtZGF0EgAKCBgANogQEAwgMg8f8D///8WfhwB8+ErK42A=";
  });
}
let isAvifSupported = false;
(async () => {
  isAvifSupported = await checkAvifSupport();
})();

/**
 * 根据浏览器支持情况，生成最优格式的图片 URL
 * @param {string} imageId 图片的唯一标识符
 * @param {string} defaultFormat 默认格式，如 'webp'
 * @returns {string}
 */
function getOptimizedImageUrl(imageId, defaultFormat = "webp"){
  const format = isAvifSupported ? "avif" : defaultFormat;
  return `https://cdn.example.com/images/${imageId}.${format}`;
}

<img :src="getOptimizedImageUrl(imageId)" />
<script>
const img = document.querySelector('img');
// 设置降级逻辑
img.onerror = function(){
  const currentSrc = this.src;
  const baseUrl = currentSrc.substring(0, currentSrc.lastIndexOf('.'));
  if (currentSrc.endsWith('.avif')) {
    this.src = baseUrl + '.webp';
  } else if (currentSrc.endsWith('.webp')) {
    this.src = baseUrl + '.jpg';
  }
};
</script>

Validation – data‑driven optimization iteration

Objective metrics: size reduction, PSNR ≥35 dB, SSIM ≥0.95. Subjective blind tests were also performed. Test conditions used a Mac with Chrome incognito, consistent network, WebP baseline set to Q=75%, and sample groups of PNG/JPG images under 1 MB, 1‑5 MB, and >5 MB.

AVIF reduced size versus JPG by 77‑90% and achieved an additional 30‑40% reduction compared with WebP.

Large images (>5 MB) showed the greatest absolute savings.

CRF 35 offered better size savings than CRF 32, with a slight PSNR drop.

Rendering tests on portrait and poster images showed no visible quality loss; poster text remained crisp.

Online impact

LCP improved by 15‑25%.

First‑screen image load speed increased by over 30%.

Total page bandwidth consumption dropped more than 30%.

Challenges and reflections

PNG → AVIF vs. WebP : Both achieve >90% compression on lossless PNGs, so absolute size differences are small, though AVIF retains more texture at the same bitrate and offers >30% bitrate reduction versus VP9.

Transcoding cost : AVIF encoding is slower than WebP, leading the team to abandon real‑time transcoding in favor of asynchronous background jobs, which removes encoding latency from the request path. Decoding overhead in modern browsers is negligible compared with the loading gains.

Conclusion

By introducing AVIF with a robust degradation plan, the platform achieved significant bandwidth savings and performance improvements without sacrificing compatibility or visual quality, confirming the practical value of AVIF for large‑scale content delivery.

References

https://jakearchibald.com/2020/avif-has-landed/

https://www.ctrl.blog/entry/webp-avif-comparison.html

https://reachlightspeed.com/blog/using-the-new-high-performance-avif-image-format-on-the-web-today/

https://netflixtechblog.com/avif-for-next-generation-image-coding-b1d75675fe4

https://arxiv.org/pdf/2008.06091