Netlify Image CDN

Unpic can transform images with Netlify Image CDN using the netlify provider. It can be used with Unpic framework components, or you can use the base unpic libary to generate image URLs directly.

You can import the netlify provider from the unpic package using a subpath import:

import { transform } from 'unpic/providers/netlify';

If using an Unpic component, you can optionally pass custom operations and options to the component using an object with a netlify key. This is lets you use extra features supported by Netlify Image CDN, or set custom configuration options.

This example uses @unpic/astro, but the same applies to any Unpic component:

---
import { Image } from '@unpic/astro';
---
<Image
  src="image.jpg"
  width={800}
  height={600}
  options={{
      "netlify": {
      // netlify options here
      }
  }}
  operations={{
      "netlify": {
      // netlify operations here
      }
  }}
/>

In supported frameworks you can also import the base component and pass the transformer to it directly. This lets you create a custom component that doesn’t need to include and other transformer code.

---
import { Image } from '@unpic/astro/base';
import { transform } from 'unpic/providers/netlify';
---
<Image
  src="image.jpg"
  width={800}
  height={600}
  transformer={transformer}
/>

Types

The netlify provider supports the following arguments:

Options

baseUrl

Type: string

Base URL for the Netlify Image CDN. Defaults to relative URLs.

force

Type: boolean

Always use the Netlify Image CDN, even if the source URL matches another provider.

Operations

w

Type: number

Resize the image to a specified width in pixels.

h

Type: number

Resize the image to a specified height in pixels.

fit

Type: "contain" | "cover" | "fill"

Fit the image within the specified dimensions.

q

Type: number

Image quality for lossy formats like JPEG and WebP. Shorthand for quality.

fm

Type: ImageFormat | "blurhash"

Image format conversion. Shorthand for format.

position

Type: "center" | "top" | "right" | "bottom" | "left"

Position of the image when using fit=cover. Shorthand for position.

width

Type: string | number

height

Type: string | number

format

Type: ImageFormat | "blurhash"

quality

Type: string | number

This page is auto-generated from the netlify provider types. See anything wrong or missing? Suggest a change on GitHub.