Sirv

Integration between Sirv and Nuxt image.

To use Sirv provider, you need to set up your Sirv URL as the baseURL in the Nuxt Image module configuration, like this:

export default defineNuxtConfig({
  image: {
    sirv: {
      baseURL: 'https://youralias.sirv.com/' 
    }
  }
})

Get your alias from your Sirv account details page or set up a custom domain (instructions).

Sirv fit parameters

By default, Sirv will scale the image, preserving its aspect ratio, to fit within the smallest dimension. Here's the map of standard values for the fit property and how they're going to be interpreted by Sirv:

• fill: ignore
• inside: fill
• outside: fill
• noUpscaling: noup, this is the default option for Sirv image provider, so you don't need to specify it explicitly.

format

If no format is specified, Sirv will deliver your images in the optimal format by default. Alternatively, you can specify a custom format for the image like this:

<NuxtImg
    provider="sirv"
    src="/example-image.jpg"
    width="300"
    format="webp"
/>

Sirv modifiers

To use Sirv-specific transformations, add them in the modifier prop.

profile

Use Sirv profiles to combine multiple transformation options into a single parameter. For example, you can combine canvas, crop and watermark parameters into a single profile and use it like this:

<NuxtImg
    provider="sirv"
    src="/example-image.jpg"
    width="300"
    :modifiers="{profile: 'my-profile'}
/>

canvas

Use the canvas modifier to add a canvas around your image. You can also set its width, height, color, and position.

sharpen

Sharpen the image using the sharpen modifier.

<NuxtImg
  provider="sirv"
  src="/example-image.jpg"
  width="300"
  :modifiers="{sharpen: 50}"
/>

frame

Add a frame/border to your images using the frame modifier. You can also set its width and color.

<NuxtImg
  provider="sirv"
  src="/example-image.jpg"
  width="300"
  :modifiers="{
    frameStyle: 'solid',
    frameColor: '00000',
    frameWidth: '2',
    frameRimColor: '97A6B1',
    frameRimWidth: '2'
   }"
/>

rotate

Use the rotate modifier to rotate your image. You can specify the number of degrees to rotate the image by.

<NuxtImg
  provider="sirv"
  src="/example-image.jpg"
  :modifiers="{rotate: 90}"
/>

Color and light options

Sirv has various color manipulation options like grayscale, colorize,colortone,colorLevels, as well as light manipulation options like lightness, hue, saturation, highlights, shadows, brightness, exposure, contrast.

Here's how to convert an image to grayscale:

<NuxtImg
  provider="sirv"
  src="/example-image.jpg"
  width="300"
  :modifiers="{grayscale: true}"
/>

Watermarks and text overlays

Using Sirv's Nuxt Image integration, you can overlay images or text over other images for watermarking or creating a dynamic banner using custom text!

watermark

Add an image overlay over your existing image using the watermark modifier. Used mostly for watermarking, but can be useful for creating banners, OG images, and personalization. Here's an example of a single watermark:

<NuxtImg provider="sirv" 
 src="example-image.jpg" 
 width="300" 
 :modifiers="{
    watermark: '/watermark-v1.png',
    watermarkPosition: 'center',
    watermarkWidth: '30%',
  }" 
/>

Find out more about Sirv watermarks here.

Overlay Text

You can add text overlays to your images and have full freedom over their positioning and looks.

<NuxtImg provider="sirv" 
  src="example-image.jpg" width="300"
  :modifiers="{
    text: 'Hello there',
    textAlign: 'center',
    textPositionGravity: 'south',
    textBackgroundColor: '#ffff',
    textSize: 60,
    textFontFamily: 'Arial',
    textColor: 'white',
  }" 
/>

More examples of text overlays can be found here.

List of supported transformations

Sirv's Nuxt Image integration uses intuitive names for each transformation. If you use a property that does not match any of the following supported options, it will be added in the URL as it is.

Learn more about Sirv's Image transformations from the official documentation.