On Demand image optimization for Netlify using ipx.
😺 Online demo: https://netlify-ipx.netlify.app
Add @netlify/ipx as devDependency:
# npm
npm i -D @netlify/ipx
# yarn
yarn add --dev @netlify/ipxCreate netlify/functions/ipx.ts:
import { createIPXHandler } from "@netlify/ipx";
export const handler = createIPXHandler({
domains: ["images.unsplash.com"],
});Now you can use IPX to optimize both local and remote assets ✨
Resize /test.jpg (in dist):
<img src="/.netlify/functions/ipx/w_200/static/test.jpg" />Resize and change format for a remote url:
<img
src="/.netlify/functions/ipx/f_webp,w_450/https://images.unsplash.com/photo-1514888286974-6c03e2ca1dba"
/>Instead of setting an allowlist on domains, you may wish to use the option remotePatterns. This method allows wildcards in hostname and pathname segments.
remotePatterns is an array that contains RemotePattern objects:
remotePatterns: [
{
protocol: 'https' // or 'http' - not required
hostname: 'example.com' // required
port: '3000' // not required
pathname: '/blog/**' // not required
}
]To use remote patterns, create netlify/functions/ipx.ts:
import { createIPXHandler } from "@netlify/ipx";
export const handler = createIPXHandler({
remotePatterns: [
{
protocol: "https",
hostname: "images.unsplash.com",
},
],
});hostname and pathname may contain wildcards:
remotePatterns: [
{
hostname: '*.example.com' // * = match a single path segment or subdomain
pathname: '/blog/**' // ** = match any number of path segments or subdomains
}
]- Clone repository
- Install dependencies with
yarn install - Build the project with
yarn build - Run netlify development server with
yarn dev. - Open http://localhost:8888
MIT
![renovate[bot] avatar](https://avatars.githubusercontent.com/in/2740?v=4 "renovate[bot]")
![token-generator-app[bot] avatar](https://avatars.githubusercontent.com/u/7892489?v=4 "token-generator-app[bot]")
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent