Edge Developer Platform
  • Edge Functions
    • Overview
    • Getting Started
    • Operation Guide
      • Function Management
      • Function Trigger
    • Runtime APIs
      • addEventListener
      • Cache
      • Cookies
      • Encoding
      • Fetch
      • FetchEvent
      • Headers
      • Request
      • Response
      • Streams
        • ReadableStream
        • ReadableStreamBYOBReader
        • ReadableStreamDefaultReader
        • TransformStream
        • WritableStream
        • WritableStreamDefaultWriter
      • Web Crypto
      • Web standards
      • Images
        • ImageProperties
    • Sample Functions
      • Returning an HTML Page
      • Returning a JSON Object
      • Fetch Remote Resources
      • Authenticating a Request Header
      • Modifying a Response Header
      • Performing an A/B Test
      • Setting Cookies
      • Performing Redirect Based on the Request Location
      • Using the Cache API
      • Caching POST Requests
      • Responding in Streaming Mode
      • Merging Resources and Responding in Streaming Mode
      • Protecting Data from Tampering
      • Rewriting a m3u8 File and Configuring Authentication
      • Adaptive Image Resize
      • Image Adaptive WebP
      • Customize Referer restriction rules
      • Remote Authentication
      • HMAC Digital Signature
      • Naming a Downloaded File
      • Obtaining Client IP Address
    • Best Practices
      • Adaptive Image Format Conversion via Edge Functions
Docs Overview/
Edge Developer Platform/
Edge Functions/
Best Practices/
Adaptive Image Format Conversion via Edge Functions/

Adaptive Image Format Conversion via Edge Functions

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:
// Browser image format
const broswerFormat = {
  Chrome: 'webp',
  Opera: 'webp',
  Firefox: 'webp',
  Safari: 'jp2',
  Edge: 'webp',
  IE: 'jxr'
};

addEventListener('fetch', event => {
  // If the function code throws an unhandled exception, Edge Functions forwards the current request back to the origin. 
  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];
  
  // Do not convert the image format
  if (!format) {
    return fetch(request);
  }

  // Convert image format
  const response = await fetch(request, {
    eo: {
      image: {
        format
      }
    }
  });

  // Set the response header
  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:
Using curl to test
Browser Access Test
You can run a curl command with the specified User-Agent to test.
Chrome
Safari
IE
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.
Chrome
Safari
IE
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

Sample function: Image auto-adaptation
Resizing and Converting Images