# Imgix

> imgix

- Skill: `comeonoliver/imgix` (Agent Skill)
- Install (CLI): `npx skillmds@latest add comeonoliver/imgix`
- Raw SKILL.md: https://api.skillmd.com/api/skills/comeonoliver/imgix/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: ComeOnOliver (https://skillmd.com/u/comeonoliver)
- Updated: 2026-09-21
- Page: https://skillmd.com/skills/comeonoliver/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

```typescript
// 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

```tsx
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

```typescript
// 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.