Image Optimization

Akan Image works like a small image optimizer. It creates optimized URLs with width and quality, serves WebP when possible, and caches the generated result.

Use `Image` for images shown in UI.
Configure allowed sizes and remote domains in `akan.config.ts`.
Keep size options small enough to improve cache hits.

Use Image

Pass a file-like object or a direct src. Width and height help Akan choose the nearest cached size.

Article cover

Config

The default config covers common responsive sizes. Change it only when your UI has clear image sizes that repeat often.

akan.config.ts

remotePatterns

Remote images are blocked unless their host and path match `remotePatterns`. If optimization returns a bad request, check this setting first.

Allow CDN images

Cache Hits

The optimizer cache key changes when URL, width, quality, or output format changes. Too many width or quality choices can split the cache into many rarely-used files.

Use a few repeated card sizes instead of many one-off widths.
Keep `qualities` small, often only `[75]`.
Use `unoptimized` for data URLs, SVGs, or images already optimized by another system.

Image Optimization

Akan Image works like a small image optimizer. It creates optimized URLs with width and quality, serves WebP when possible, and caches the generated result.

Use `Image` for images shown in UI.
Configure allowed sizes and remote domains in `akan.config.ts`.
Keep size options small enough to improve cache hits.

Use Image

Pass a file-like object or a direct src. Width and height help Akan choose the nearest cached size.

Article cover

Config

The default config covers common responsive sizes. Change it only when your UI has clear image sizes that repeat often.

akan.config.ts

remotePatterns

Remote images are blocked unless their host and path match `remotePatterns`. If optimization returns a bad request, check this setting first.

Allow CDN images

Cache Hits

The optimizer cache key changes when URL, width, quality, or output format changes. Too many width or quality choices can split the cache into many rarely-used files.

Use a few repeated card sizes instead of many one-off widths.
Keep `qualities` small, often only `[75]`.
Use `unoptimized` for data URLs, SVGs, or images already optimized by another system.