Limited Time Free!  Experience website acceleration and advanced security protection!
Get Started Now 

Image Adaptive WebP

This example determines whether the request header Accept contains image/webp. If so, the Edge Function will automatically convert the image format to WebP and cache it on the EdgeOne edge node. If your Web application displays a large amount of PNG and JPEG format images and you want to automatically optimize the images at the edge to reduce traffic bandwidth costs, you can use Edge Functions to implement a smooth upgrade, automatically converting PNG and JPEG format images to WebP format with 0 changes to the business code.

Sample Code

async function handleEvent(event) {
  const { request } = event;
  
  // Get the image type supported by the client
  const accept = request.headers.get('Accept');
  const option = { eo: { image: {} } };
  
  // Check whether the client supports WebP format images, if not, respond with the original image
  if (accept && accept.includes('image/webp')) {
    option.eo.image.format = 'webp';
  }
  
  const response = await fetch(request, option);
  return response;
}

addEventListener('fetch', event => {
  event.passThroughOnException();
  event.respondWith(handleEvent(event));
});

Example Preview

Enter the URL that matches the triggering rules of the Edge Function in the address bar of the browser on the PC side and mobile side (e.g., https://example.com/images-format/ef-1.jpeg), and the image will be automatically converted to Webp format.

Related References

  1. Runtime APIs: Fetch
  2. Runtime APIs: Headers
  3. Runtime APIs: Request
  4. Runtime APIs: FetchEvent