Agent skill
imgix
Optimize and transform images with imgix. Use when serving responsive images, implementing image CDN, adding real-time transformations, or optimizing Core Web Vitals with image delivery.
Install this agent skill to your Project
npx add-skill https://github.com/majiayu000/claude-skill-registry/tree/main/skills/other/other/imgix
Metadata
Additional technical details for this skill
- tags
-
imgix images cdn optimization responsive
- author
- terminal-skills
- version
- 1.0.0
- category
- content
SKILL.md
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,compressdelivers 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 propersrcsetwith widths. - Pricing: based on origin images accessed per month, not transformations.
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
majiayu000/claude-skill-registry
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
majiayu000/claude-skill-registry
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
majiayu000/claude-skill-registry
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
majiayu000/claude-skill-registry
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
majiayu000/claude-skill-registry
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
majiayu000/claude-skill-registry
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
Didn't find tool you were looking for?