Fastly
The Fastly Image Optimizer (IO) is supported by using a helper function in the @responsive-image/cdn
package.
Setup
Make sure you have the @responsive-image/cdn
package installed:
npm install @responsive-image/cdn
yarn add @responsive-image/cdn
pnpm add @responsive-image/cdn
You need to specify your domain
in your configuration, which you can set up in your application (e.g. app.js
):
import { setConfig } from '@responsive-image/core';
setConfig('cdn', {
fastly: {
domain: 'images.mydomain.com',
},
});
INFO
By default fastly
is configured to only use the webp
format since avif
requires a higher cost tier of Fastly IO. You can change which formats get used by default by passing defaultFormats
next to domain
in this configuration.
Usage
IMPORTANT
Please make sure you have read the section on remote images first.
Use the fastly
provider function passing the pathname to the image on the CDN, and pass the return value to the image component:
import { ResponsiveImage } from '@responsive-image/ember';
import { fastly } from '@responsive-image/cdn';
<template>
<ResponsiveImage @src={{fastly 'path/to/uploaded/image.jpg'}} />
</template>
<ResponsiveImage
@src={{responsive-image-fastly 'path/to/uploaded/image.jpg'}}
/>
import { LitElement, html } from 'lit';
import { customElement } from 'lit/decorators.js';
import { fastly } from '@responsive-image/cdn';
import '@responsive-image/wc';
@customElement('my-app')
export class MyApp extends LitElement {
render() {
return html`<responsive-image
.src=${fastly('path/to/uploaded/image.jpg')}
></responsive-image>`;
}
}
import { ResponsiveImage } from '@responsive-image/react';
import { fastly } from '@responsive-image/cdn';
export default function MyApp() {
return <ResponsiveImage src={fastly('path/to/uploaded/image.jpg')} />;
}
import { ResponsiveImage } from '@responsive-image/solid';
import { fastly } from '@responsive-image/cdn';
export default function MyApp() {
return <ResponsiveImage src={fastly('path/to/uploaded/image.jpg')} />;
}
<script>
import { ResponsiveImage } from '@responsive-image/svelte';
import { fastly } from '@responsive-image/cdn';
</script>
<ResponsiveImage src={fastly('path/to/uploaded/image.jpg')} />
Aspect Ratio
For the image component to be able to render width
and height
attributes to prevent layout shifts after loading has completed, it needs to know the aspect ratio of the source image. Unlike local images it cannot know this upfront for remote images, that's why it is recommended to supply the aspectRatio
parameter if possible:
import { ResponsiveImage } from '@responsive-image/ember';
import { fastly } from '@responsive-image/cdn';
<template>
<ResponsiveImage
@src={{fastly
'/path/to/image.jpg'
aspectRatio=1.5
}}
/>
</template>
<ResponsiveImage
@src={{responsive-image-fastly '/path/to/image.jpg' aspectRatio=1.5}}
/>
import { LitElement, html } from 'lit';
import { customElement } from 'lit/decorators.js';
import { fastly } from '@responsive-image/cdn';
import '@responsive-image/wc';
@customElement('my-app')
export class MyApp extends LitElement {
render() {
return html`<responsive-image
.src=${fastly('/path/to/image.jpg', {
aspectRatio: 1.5,
})}
></responsive-image>`;
}
}
import { ResponsiveImage } from '@responsive-image/react';
import { fastly } from '@responsive-image/cdn';
export default function MyApp() {
return (
<ResponsiveImage
src={fastly('path/to/uploaded/image.jpg', {
aspectRatio: 1.5,
})}
/>
);
}
import { ResponsiveImage } from '@responsive-image/solid';
import { fastly } from '@responsive-image/cdn';
export default function MyApp() {
return (
<ResponsiveImage
src={fastly('path/to/uploaded/image.jpg', {
aspectRatio: 1.5,
})}
/>
);
}
<script>
import { ResponsiveImage } from '@responsive-image/svelte';
import { fastly } from '@responsive-image/cdn';
</script>
<ResponsiveImage
src={fastly('path/to/uploaded/image.jpg', {
aspectRatio: 1.5,
})}
/>
Custom parameters
Besides the transformations that the addon itself implicitly adds (related to resizing images) you can add your own parameters by passing a params
object:
import { ResponsiveImage } from '@responsive-image/ember';
import { fastly } from '@responsive-image/cdn';
<template>
<ResponsiveImage
@src={{fastly
'path/to/uploaded/image.jpg'
params=(hash orient='l' saturation=-100)
}}
/>
</template>
<ResponsiveImage
@src={{responsive-image-fastly
'path/to/uploaded/image.jpg'
params=(hash orient='l' saturation=-100)
}}
/>
import { LitElement, html } from 'lit';
import { customElement } from 'lit/decorators.js';
import { fastly } from '@responsive-image/cdn';
import '@responsive-image/wc';
@customElement('my-app')
export class MyApp extends LitElement {
render() {
return html`<responsive-image
.src=${fastly('path/to/uploaded/image.jpg', {
orient: 'l',
saturation: -100,
})}
></responsive-image>`;
}
}
import { ResponsiveImage } from '@responsive-image/react';
import { fastly } from '@responsive-image/cdn';
export default function MyApp() {
return (
<ResponsiveImage
src={fastly('path/to/uploaded/image.jpg', {
orient: 'l',
saturation: -100,
})}
/>
);
}
import { ResponsiveImage } from '@responsive-image/solid';
import { fastly } from '@responsive-image/cdn';
export default function MyApp() {
return (
<ResponsiveImage
src={fastly('path/to/uploaded/image.jpg', {
orient: 'l',
saturation: -100,
})}
/>
);
}
<script>
import { ResponsiveImage } from '@responsive-image/svelte';
import { fastly } from '@responsive-image/cdn';
</script>
<ResponsiveImage
src={fastly('path/to/uploaded/image.jpg', {
orient: 'l',
saturation: -100,
})}
/>
Quality
Use the quality
parameter to pass a custom quality setting instead of the default auto
:
import { ResponsiveImage } from '@responsive-image/ember';
import { fastly } from '@responsive-image/cdn';
<template>
<ResponsiveImage
@src={{fastly
'path/to/uploaded/image.jpg'
quality=50
}}
/>
</template>
<ResponsiveImage
@src={{responsive-image-fastly 'path/to/uploaded/image.jpg' quality=50}}
/>
import { LitElement, html } from 'lit';
import { customElement } from 'lit/decorators.js';
import { fastly } from '@responsive-image/cdn';
import '@responsive-image/wc';
@customElement('my-app')
export class MyApp extends LitElement {
render() {
return html`<responsive-image
.src=${fastly('path/to/uploaded/image.jpg', {
quality: 50,
})}
></responsive-image>`;
}
}
import { ResponsiveImage } from '@responsive-image/react';
import { fastly } from '@responsive-image/cdn';
export default function MyApp() {
return (
<ResponsiveImage
src={fastly('path/to/uploaded/image.jpg', {
quality: 50,
})}
/>
);
}
import { ResponsiveImage } from '@responsive-image/solid';
import { fastly } from '@responsive-image/cdn';
export default function MyApp() {
return (
<ResponsiveImage
src={fastly('path/to/uploaded/image.jpg', {
quality: 50,
})}
/>
);
}
<script>
import { ResponsiveImage } from '@responsive-image/svelte';
import { fastly } from '@responsive-image/cdn';
</script>
<ResponsiveImage
src={fastly('path/to/uploaded/image.jpg', {
quality: 50,
})}
/>
Image formats
By default the component uses the automatic image format selection in Fastly.
If you want a picture
tag with one or more specific formats as source
tags you can specify them using the formats
argument:
import { ResponsiveImage } from '@responsive-image/ember';
import { fastly } from '@responsive-image/cdn';
<template>
<ResponsiveImage
@src={{fastly
'path/to/uploaded/image.jpg'
formats=(array 'webp' 'avif')
}}
/>
</template>
<ResponsiveImage
@src={{responsive-image-fastly
'path/to/uploaded/image.jpg'
formats=(array 'webp' 'avif')
}}
/>
import { LitElement, html } from 'lit';
import { customElement } from 'lit/decorators.js';
import { fastly } from '@responsive-image/cdn';
import '@responsive-image/wc';
@customElement('my-app')
export class MyApp extends LitElement {
render() {
return html`<responsive-image
.src=${fastly('path/to/uploaded/image.jpg', {
formats: ['webp', 'avif'],
})}
></responsive-image>`;
}
}
import { ResponsiveImage } from '@responsive-image/react';
import { fastly } from '@responsive-image/cdn';
export default function MyApp() {
return (
<ResponsiveImage
src={fastly('path/to/uploaded/image.jpg', {
formats: ['webp', 'avif'],
})}
/>
);
}
import { ResponsiveImage } from '@responsive-image/solid';
import { fastly } from '@responsive-image/cdn';
export default function MyApp() {
return (
<ResponsiveImage
src={fastly('path/to/uploaded/image.jpg', {
formats: ['webp', 'avif'],
})}
/>
);
}
<script>
import { ResponsiveImage } from '@responsive-image/svelte';
import { fastly } from '@responsive-image/cdn';
</script>
<ResponsiveImage
src={fastly('path/to/uploaded/image.jpg', {
formats: ['webp', 'avif'],
})}
/>
INFO
See the Fastify reference documentation for a list of supported formats.
avif
requires you pay for Fastly IO Professional.