AVIF Frontend Processing Solutions

The Origin: Those Frustrating Days with Online Tools

Some time ago, I needed to convert some images into different formats, especially the AVIF format. At that time, I first searched for online conversion tools.

The result? Most tools I found were server-side conversions, either painfully slow upload/download speeds that made me question life, or daily conversion limits. The most frustrating part was that some tools required registration and login — basically testing our patience!

Until one day I suddenly realized: since AI coding has become so convenient, why not build one myself? Thus began today’s tech selection journey, and eventually the birth of avif-to-png.app.

Technical Solutions Comparison: Five Major “Contestants”

During my deep dive into frontend image conversion, I primarily compared five technical approaches. Each has its own characteristics and use cases, so let’s examine them one by one.

1. Native Browser Canvas API

Core Principle: The Canvas.toBlob() method can convert canvas content to Blob objects, supporting PNG, JPEG, WebP, and other formats.

const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');

// Draw image to canvas
ctx.drawImage(img, 0, 0);

// Convert to blob
canvas.toBlob((blob) => {
  // Process blob data
  const url = URL.createObjectURL(blob);
  console.log('Conversion complete:', url);
}, 'image/png', 0.9);

Advantages Analysis:

• Excellent Compatibility: Widely supported by browsers since January 2020
• Zero Dependencies: No need to introduce any third-party libraries
• Superior Performance: Direct calls to browser’s underlying APIs, very fast
• Small Size: Minimal code, won’t increase bundle size

Disadvantages Analysis:

• Format Limitations: Currently no browsers support creating AVIF format directly from Canvas
• Single Function: Can only do basic format conversion, no advanced image processing

From a community maintenance perspective, this is a browser standard API with top-tier stability and maintainability. But for new formats like AVIF, we need alternative solutions.

2. avif.js: Elegant Polyfill Solution

Core Principle: Intercepts AVIF requests through Service Worker, repackaging AVIF as single-frame AV1 video for decoding.

// Register Service Worker
require("avif.js").register("/avif-sw.js");

// Now you can use AVIF directly
<img src="image.avif">
<div style="background: url(https://medium.com/image2.avif)">content</div>

Technical Features:

• Transparent Integration: Intercepts all AVIF requests, works with any complex image embedding scenarios
• Size Control: Less than 4KB compressed, minimal project impact
• Good Compatibility: Leverages existing AV1 video decoding capabilities

Limitations Analysis:

• One-way Conversion: Mainly for AVIF decoding/display, doesn’t support encoding
• Dependency Constraints: Requires browser support for AV1 video decoding
• Maintenance Status: Relatively less community maintenance, infrequent updates

This solution works well for pure display scenarios, but isn’t sufficient for the bidirectional conversion we need.

3. sharp-wasm: Node.js Giant’s Browser Expansion

Sharp is the most well-known image processing library in the Node.js ecosystem, and sharp-wasm is Sharp’s port to WebAssembly and browser environments.

import sharp from 'sharp-wasm';

// Initialize WASM module
await sharp.init();

// Convert image
const avifBuffer = await sharp(inputBuffer)
  .avif({ quality: 80 })
  .toBuffer();

Technical Advantages:

• Comprehensive Features: Supports AVIF, SVG, and many other formats, including previously missing format support
• Strong Performance: Based on libvips, very fast processing
• API Consistency: Maintains the same API design as the Node.js version

Challenges and Limitations:

• Large Size: Complete libvips port, WASM file size is substantial
• High Complexity: Encountered technical challenges like synchronous compilation and thread pools during porting
• Compatibility Requirements: Higher requirements for WebAssembly support

Although powerful, it feels like “using a sledgehammer to crack a nut” for lightweight image conversion tools.

4. wasm-vips: Direct Exposure of Underlying Technology

wasm-vips is a JavaScript/WebAssembly wrapper for libvips, capable of running in browsers, and is the underlying dependency of sharp-wasm.

import Vips from 'wasm-vips';

const vips = await Vips();
const image = vips.Image.newFromBuffer(inputBuffer);
const avifBuffer = image.avifsave_buffer({ Q: 80 });

Technical Analysis:

• Low-level Control: Direct access to all libvips functionality
• High Flexibility: Can perform complex image processing operations
• Strong Extensibility: Supports plugins and custom processing pipelines

Usage Barriers:

• Learning Curve: Need to understand libvips API design
• Documentation Limitations: Fewer docs and examples compared to high-level wrappers
• Stability: As an underlying library, relatively higher risk of API changes

This solution is more suitable for scenarios with deep image processing needs, too complex for simple format conversion.

5. Squoosh: Google’s Open Source Gift

Squoosh is an open-source browser image optimization tool developed by Google Chrome Labs, utilizing WebAssembly to run various image codecs.

import { decode } from '@jsquash/avif';
import { encode } from '@jsquash/png';

// Decode AVIF
const imageData = await decode(avifBuffer);

// Encode to PNG
const pngBuffer = await encode(imageData);

Technical Highlights:

• Google Backing: Maintained by Google Chrome Labs team, solid technical foundation
• Modular Design: Each format packaged independently, import on demand, supports Web Worker environment
• Performance Optimization: Supports multi-threading, AVIF processing speed improved by 29%, OxiPNG by 61%
• Production Ready: Thoroughly tested by numerous users on Squoosh.app

Ecosystem Status:

• Active Community: @jsquash/avif has 9 related projects using it on npm
• Continuous Updates: Updated as recently as 2 months ago, good maintenance status
• Complete Documentation: Provides detailed usage examples and configuration options

What impressed me was that Next.js even removed built-in Squoosh support in favor of Sharp as an optional dependency, indicating that Sharp indeed has advantages in server-side scenarios, but Squoosh remains an excellent choice for browser environments.

Final Selection: Native + Squoosh Combination

After thorough technical research and testing, I ultimately chose the Native Browser Canvas API + Squoosh combination approach.

Get Rugan’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

Selection Logic:

1. Choose as Needed: For formats natively supported by browsers (PNG, JPEG, WebP), use Canvas API directly — fast and small
2. Capability Enhancement: For new formats like AVIF, use @jsquash/avif for processing
3. Optimal Balance: Found the best balance between feature completeness, performance, and maintenance cost

Implementation Example:

async function convertImage(file, targetFormat) {
  const img = await loadImage(file);
  const canvas = createCanvas(img);
  
  if (['png', 'jpeg', 'webp'].includes(targetFormat)) {
    // Use native API
    return new Promise(resolve => {
      canvas.toBlob(resolve, `image/${targetFormat}`, 0.9);
    });
  } else if (targetFormat === 'avif') {
    // Use Squoosh
    const imageData = getImageData(canvas);
    const { encode } = await import('@jsquash/avif');
    return await encode(imageData);
  }
}

This solution runs beautifully on my avif-to-png.app, with fast conversion speeds, smooth user experience, and complete browser-side processing without privacy concerns.

Summary and Outlook

Through this technical selection process, I deeply appreciate the rapid development of frontend image processing technology. The popularization of WebAssembly allows us to run complex image processing algorithms in browsers without relying on servers.

Selection Recommendations Summary:

• Lightweight Needs: Native browser API + on-demand WASM codecs
• Heavy Image Processing: sharp-wasm or wasm-vips
• Display-focused: avif.js polyfill
• Ultimate Performance: Direct use of Squoosh modules

In the future, as browsers improve support for new formats, frontend image processing capabilities will continue to advance. Pure frontend tools like avif-to-png.app will become the choice of more and more developers.