https://github.com/cherry/pages-plugin-asset-negotiation
Cloudflare Pages plugin for optimised assets via content negotiation
https://github.com/cherry/pages-plugin-asset-negotiation
cloudflare-pages cloudflare-pages-plugin hacktoberfest
Last synced: 3 months ago
JSON representation
Cloudflare Pages plugin for optimised assets via content negotiation
- Host: GitHub
- URL: https://github.com/cherry/pages-plugin-asset-negotiation
- Owner: Cherry
- License: mit
- Created: 2022-05-08T14:25:46.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2024-10-04T21:23:24.000Z (about 1 year ago)
- Last Synced: 2024-11-11T01:42:35.066Z (11 months ago)
- Topics: cloudflare-pages, cloudflare-pages-plugin, hacktoberfest
- Language: TypeScript
- Homepage:
- Size: 557 KB
- Stars: 28
- Watchers: 2
- Forks: 2
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# pages-plugin-asset-negotiation
[](https://badge.fury.io/js/pages-plugin-asset-negotiation)
This is a Cloudflare Pages plugin that can deliver optimised assets like images, in much newer and modern formats via [Content Negotiation](https://developer.mozilla.org/en-US/docs/Web/HTTP/Content_negotiation).
Today, Cloudflare Pages doesn't support other zone-level features such as Polish, which effectively does this same thing automatically if you were using Cloudflare as a CDN, but we have to implement it ourselves within Pages.
By using Content Negotiation, we can deliver images in the most modern formats, like JPEG XL, AVIF, WEBP, etc. without having to change anything in our markup - this means you could reference `/images/dog.jpeg` in your HTML or CSS, but if the requesting browser supports a newer image format (as presented in the `Accept` header), we can serve the image in that format, such as `dog.jxl`. This is a huge win for your users, as they get the image in the most modern format - which means smaller filesizes - without having to change anything in your markup.
This plugin assumes a few thing:
- You have pre-optimised all of your assets into the most modern formats. This plugin doesn't do any on-the-fly image optimisation or anything like that - it relies on your images being optimised already.
- With above, the images should exist alongside eachother, such like `/images/dog.jpeg` and `/images/dog.jxl`.
- And for the best results, you should store images in a separate folder, so you only have to invoke this plugin on a specific folder, like `/images`.
## Installation
```sh
npm install --save-dev pages-plugin-asset-negotiation
```
## Usage
```ts
// ./functions/images/_middleware.ts
import assetNegotiationPlugin from "pages-plugin-asset-negotiation";
export const onRequest: PagesFunction = assetNegotiationPlugin({
formats: ['jxl', 'avif', 'webp'], // The formats you want to support, in order of preference. This is the default configuration and will serve a jxl image if the browser supports it (and it was found) first, followed by avif and then webp.
});
```