Developer Integration Guide

Next.js & React Image Optimization

How to route Next.js images through Shrinkify's REST API for automated WebP and AVIF generation.

1. Custom Loader Implementation

Next.js allows you to define a custom image loader in next.config.js or on individual <Image /> components:

// lib/shrinkifyLoader.ts
export default function shrinkifyLoader({ src, width, quality }: {
  src: string;
  width: number;
  quality?: number;
}) {
  const params = new URLSearchParams({
    url: src,
    resize_width: width.toString(),
    quality_value: (quality || 80).toString(),
    formats: 'webp,avif'
  });

  return `https://shrinkify.dev/api/v1/process?${params.toString()}`;
}

2. Using inside React Component

import Image from 'next/image';
import shrinkifyLoader from '@/lib/shrinkifyLoader';

export default function HeroBanner() {
  return (
    <Image
      loader={shrinkifyLoader}
      src="https://example.com/photos/banner.jpg"
      alt="Optimized Banner"
      width={1200}
      height={630}
      priority
    />
  );
}

Need an API Key?

Get 100 free optimizations each year. Create an account to generate your instant API token.

Get API Key Free