Imgix

imgix

Overview

imgix is a real-time image processing CDN. Point it at your image storage (S3, GCS, web folder), and it serves optimized, transformed images via URL parameters. No pre-processing needed — transformations happen on request and are cached globally.

Instructions

Step 1: URL API

// lib/imgix.ts — Image URL builder
import ImgixClient from '@imgix/js-core'

const client = new ImgixClient({
  domain: 'myapp.imgix.net',
  secureURLToken: process.env.IMGIX_TOKEN,    // sign URLs to prevent abuse
})

// Responsive image with auto format/quality
const url = client.buildURL('photos/hero.jpg', {
  w: 1200,
  h: 630,
  fit: 'crop',
  auto: 'format,compress',    // WebP/AVIF + quality optimization
  crop: 'faces',               // crop around detected faces
})

// Generate srcset for responsive images
const srcset = client.buildSrcSet('photos/hero.jpg', {
  auto: 'format,compress',
  fit: 'crop',
  ar: '16:9',
})

Step 2: React Component

import Imgix from 'react-imgix'

function ProductImage({ path, alt }: { path: string; alt: string }) {
  return (
    <Imgix
      src={`https://myapp.imgix.net/${path}`}
      sizes="(max-width: 768px) 100vw, 50vw"
      imgixParams={{
        auto: 'format,compress',
        fit: 'crop',
        ar: '1:1',
      }}
      htmlAttributes={{ alt, loading: 'lazy' }}
    />
  )
}

Step 3: Video Thumbnails

// Extract video thumbnails via URL
const thumbnail = client.buildURL('videos/demo.mp4', {
  fm: 'jpg',
  frame: 1,          // extract frame at 1 second
  w: 640,
  h: 360,
  fit: 'crop',
})

Guidelines

• auto=format,compress delivers WebP/AVIF with optimal quality — always include it.
• Sign URLs with secureURLToken in production — prevents parameter tampering.
• imgix doesn't store images — it proxies from your origin (S3, GCS, HTTP).
• Use buildSrcSet() for responsive images — generates proper srcset with widths.
• Pricing: based on origin images accessed per month, not transformations.