tencent cloud

Feedback

Adaptive Image Format Conversion via Edge Functions

Last updated: 2023-07-10 09:48:54
    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

    Contact Us

    Contact our sales team or business advisors to help your business.

    Technical Support

    Open a ticket if you're looking for further assistance. Our Ticket is 7x24 avaliable.

    7x24 Phone Support