Iteration Layer
Products
Blog
Docs
Recipes
All Recipes E-Commerce Education Finance & Accounting Healthcare Human Resources Legal Logistics & Shipping Manufacturing Marketing Publishing Real Estate Technology
Pricing
Login Get Started

Slash Page Load Times: Convert Images to WebP and AVIF with One API Call

7 min read Image Transformation

Images Are Your Biggest Performance Problem

The average web page loads over 2 MB of images. If those images are JPEG or PNG — formats designed in the 1990s — they’re likely 30-50% larger than they need to be. Modern formats like WebP and AVIF deliver the same visual quality at significantly smaller file sizes.

Google’s own data: WebP images are 25-34% smaller than comparable JPEGs. AVIF goes further — 50% smaller than JPEG in many cases. That translates directly to faster page loads, better Core Web Vitals scores, and lower bandwidth costs.

The catch? Converting images to modern formats requires tooling. Sharp, ImageMagick, cwebp, avifenc — all need to be installed, configured, and maintained. In production, that means a server running image processing software that you have to scale and patch.

The Image Transformation API converts images to WebP and AVIF with one API call. No tooling, no server, no maintenance.

Convert to WebP

import { IterationLayer } from "iterationlayer";

const client = new IterationLayer({ apiKey: "YOUR_API_KEY" });

const { data: { buffer: webpBase64 } } = await client.transform({
  file: { type: "url", name: "hero.jpg", url: "https://example.com/hero.jpg" },
  operations: [
    { type: "convert", format: "webp", quality: 85 },
  ],
});

const webpBuffer = Buffer.from(webpBase64, "base64");

The quality parameter (1-100) controls the compression-quality tradeoff. For most web images, 80-85 delivers excellent quality with significant size reduction.

Convert to AVIF

const operations = [
  { type: "convert", format: "avif", quality: 75 },
];

AVIF supports lower quality values before visible degradation becomes noticeable. A quality of 65-75 typically produces sharp images at dramatically smaller file sizes than JPEG or even WebP.

Format Comparison: When to Use What

Each format has a different compression profile, and the right choice depends on the image content, your audience, and your performance goals.

WebP — broad browser support (97%+ of users). Safe choice for all web images. Good compression, fast encoding and decoding. WebP handles both lossy and lossless modes, so it can replace both JPEG and PNG in most cases. Encoding is fast, which matters if you’re converting on the fly or processing large batches.

AVIF — better compression than WebP, but slower to encode and slightly less browser support (92%+). Best for hero images, product photos, and any image where file size reduction matters most. AVIF also supports HDR and wide color gamut, which matters for photography sites and media-heavy applications. The encoding penalty is significant — AVIF can take 5-10x longer to encode than WebP — so it’s better suited for pre-processed assets than real-time conversion.

JPEG — still useful for email attachments, legacy systems, and contexts where universal support matters. The API supports JPEG output with quality control too. JPEG is the only format guaranteed to render in every email client, every legacy browser, and every third-party platform that accepts image uploads.

PNG — use when you need lossless quality or transparency. The convert operation handles PNG output as well. PNG files are larger than lossy formats, but they guarantee pixel-perfect reproduction. Screenshots, technical diagrams, and UI elements with sharp edges are better served as PNG than as lossy WebP or AVIF.

To put the size differences in perspective, consider a typical 1200x800 product photo:

  • JPEG at quality 85: ~180 KB
  • WebP at quality 85: ~130 KB (28% smaller)
  • AVIF at quality 75: ~95 KB (47% smaller)

The savings compound across a page with multiple images and across a site with thousands of pages.

Quality Settings by Format

The quality parameter means different things for different formats. The same quality number doesn’t produce the same visual result across formats.

WebP quality guidelines:

  • 90-95: near-lossless, large files. Use for archival or when file size doesn’t matter.
  • 80-85: the sweet spot for most web images. Visually indistinguishable from the original on most monitors.
  • 70-75: noticeable compression on close inspection, but fine for thumbnails and background images.
  • Below 65: visible artifacts. Only use for very small thumbnails where detail doesn’t matter.

AVIF quality guidelines:

  • 80-90: high quality, still smaller than WebP at the same visual fidelity.
  • 65-75: the sweet spot. AVIF’s compression algorithm handles these values better than WebP or JPEG.
  • 50-60: acceptable for thumbnails and low-priority images.
  • Below 50: visible blurring, especially on text and sharp edges.

JPEG quality guidelines:

  • 90-95: high quality, but diminishing returns. Quality 95 is nearly indistinguishable from 100, but 100 is often 3x the file size.
  • 80-85: standard web quality. Good for product photos and editorial images.
  • 70-80: slightly softer, acceptable for most use cases.
  • Below 70: visible compression artifacts, especially in gradients and sky areas.

A practical approach: serve AVIF with a WebP fallback using the <picture> element:

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

Generate all three variants from the same source image — three API calls with different format parameters.

Batch Conversion

If you’re migrating an existing site from JPEG to WebP, you likely have hundreds or thousands of images to convert. The API handles this naturally — each image is an independent API call, and you can parallelize them:

const sourceImages = [
  { name: "hero.jpg", url: "https://cdn.example.com/images/hero.jpg" },
  { name: "about.jpg", url: "https://cdn.example.com/images/about.jpg" },
  { name: "product-1.jpg", url: "https://cdn.example.com/images/product-1.jpg" },
  // ... hundreds more
];

const CONCURRENCY_LIMIT = 10;

const convertToWebP = async (image: { name: string; url: string }) => {
  const { data: { buffer } } = await client.transform({
    file: { type: "url", name: image.name, url: image.url },
    operations: [
      { type: "convert", format: "webp", quality: 85 },
    ],
  });

  return { name: image.name.replace(/\.\w+$/, ".webp"), buffer: Buffer.from(buffer, "base64") };
};

Process them in batches with a concurrency limit to avoid overwhelming your network or hitting rate limits. Ten concurrent requests is a reasonable starting point.

For sites that need both WebP and AVIF variants, run two passes — or combine them into a single batch where each image produces two API calls with different format parameters.

Resize and Convert in One Call

Format conversion often pairs with resizing. The API chains operations sequentially, so you can resize and convert in a single request:

const operations = [
  { type: "resize", width_in_px: 1200, height_in_px: 800, fit: "inside" },
  { type: "convert", format: "webp", quality: 85 },
];

This constrains the image to a maximum of 1200x800 (preserving aspect ratio, never upscaling) and converts to WebP. One API call, one result.

Generating Responsive Image Sets

Modern responsive design needs multiple sizes of each image for different screen sizes. Generate a complete set:

const widths = [320, 640, 960, 1280, 1920];

const variants = await Promise.all(
  widths.map(async (width) => {
    const { data: { buffer } } = await client.transform({
      file: { type: "url", name: "photo.jpg", url: sourceUrl },
      operations: [
        { type: "resize", width_in_px: width, height_in_px: Math.round(width * 0.667), fit: "cover" },
        { type: "convert", format: "webp", quality: 85 },
      ],
    });
    return { width, buffer: Buffer.from(buffer, "base64") };
  })
);

Five sizes, WebP format, optimized quality. Use them in a srcset attribute for responsive delivery.

Core Web Vitals Impact

Largest Contentful Paint (LCP) measures how quickly the main content loads. Images are usually the largest element. Smaller image files = faster LCP = better Google ranking.

Cumulative Layout Shift (CLS) benefits from properly sized images. When you resize to exact dimensions server-side, the browser knows the image dimensions upfront and doesn’t reflow the layout.

Converting to modern formats and serving properly sized images is the single highest-impact optimization for most web performance audits.

What’s Next

Converted images work with the same auth and credit pool as Image Generation and Document Extraction — chain them in a single pipeline.

Get Started

Check the docs for the full convert operation reference and quality guidelines per format. The TypeScript and Python SDKs handle file upload and response parsing.

Sign up for a free account — no credit card required. Convert your heaviest page image to WebP and measure the file size difference.

Start building in minutes

Free trial included. No credit card required.

Start for free