This document describes how to the convert image format by using edge functions without changing the original client request URL. Edge functions can automatically convert the image according to the User-Agent
header in the client request.
Background
For sites providing lots of images, adapting the image for different browser is a must. At the same time, they need to the compress the images without losing quality, so as to reduce the cost on data transfer. For example, they need to:
Return webp images for Chrome, Opera, Firefox and Edge browsers.
Return jp2 images for the Safari browser.
Return jxr images for the IE browser.
Return webp images for all the other browsers.
Edge functions can automatically convert the image according to the User-Agent
header in the client request. If you want to proactively convert the image format in the request URL, you can also use the image processing feature.
Use Cases
example.com
is connected to EdgeOne, with all the images stored under http://image.example.com/image/
. You need to automatically convert all image files under this directory according to the browser type of the client. https://image.example.com/image/test.jpg
is taken as the test image.
Directions
1. Log in to the EdgeOne console and click the target site in the site list to display second-level menus for site management. 2. In the left sidebar, click Edge Functions > Function Management.
3. On the Function management page, click Create function.
4. On the function creation page, enter the function name, description and codes. See below for the sample codes:
const broswerFormat = {
Chrome: 'webp',
Opera: 'webp',
Firefox: 'webp',
Safari: 'jp2',
Edge: 'webp',
IE: 'jxr'
};
addEventListener('fetch', event => {
event.passThroughOnException();
event.respondWith(handleEvent(event));
});
async function handleEvent(event) {
const { request } = event;
const userAgent = request.headers.get('user-agent');
const bs = getBroswer(userAgent);
const format = broswerFormat[bs];
if (!format) {
return fetch(request);
}
const response = await fetch(request, {
eo: {
image: {
format
}
}
});
response.headers.set('x-ef-format', format);
return response;
}
function getBroswer(userAgent) {
if (/Edg/i.test(userAgent)) {
return 'Edge'
}
if (/Trident/i.test(userAgent)) {
return 'IE'
}
if (/Firefox/i.test(userAgent)) {
return 'Firefox';
}
if (/Chrome/i.test(userAgent)) {
return 'Chrome';
}
if (/Opera|OPR/i.test(userAgent)) {
return 'Opera';
}
if (/Safari/i.test(userAgent)) {
return 'Safari'
}
}
5. Click Create and deploy function. Wait till the deployment completed. Click Add trigger rule.
6. Configure the condition to trigger this function. In this case, you can configure two conditions, which are combined with AND.
When the request HOST equals to Image.example.com
.
When the request URL Path equals to /image/*
.
When both the conditions are met, the edge function is triggered to process the image automatically.
7. Click Save.
8. You can verify the functions in two ways:
You can run a curl command with the specified User-Agent to test.
To test on Chrome browser on Mac/Linux OS, run the following command on the device: curl --user-agent "chrome" https://image.example.com/image/test.jpg -i
Check if Content-Type
in the response is image/webp
. On Mac/Linux OS, run the following command on the device: curl --user-agent "safari" https://image.example.com/image/test.jpg -i
Check if Content-Type
in the response is image/jp2
.
On Mac/Linux OS, run the following command on the device: curl --user-agent "Trident" https://image.example.com/image/test.jpg -i
Check if Content-Type
in the response is image/vnd.ms-photo
.
Access the test image address https://image.example.com/image/test.jpg
with different browsers. Check the format for image returned to see whether the edge function works properly.
Access the test image address https://image.example.com/image/test.jpg
wit Chrome browser. The responded image should be in webp format.
Access the test image address https://image.example.com/image/test.jpg
with Safari browser. The responded image should be in jp2 format.
Access the test image address https://image.example.com/image/test.jpg
with IE browser. The responded image should be in jxr format.
Relevant Documentation
Was this page helpful?