User-Agent header in the client request.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.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.
// Browser image formatconst 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 formatif (!format) {return fetch(request);}// Convert image formatconst response = await fetch(request, {eo: {image: {format}}});// Set the response headerresponse.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'}}

Image.example.com./image/*.
curl --user-agent "chrome" https://image.example.com/image/test.jpg -iContent-Type in the response is image/webp.
curl --user-agent "safari" https://image.example.com/image/test.jpg -iContent-Type in the response is image/jp2.
curl --user-agent "Trident" https://image.example.com/image/test.jpg -iContent-Type in the response is image/vnd.ms-photo.
https://image.example.com/image/test.jpg with different browsers. Check the format for image returned to see whether the edge function works properly.https://image.example.com/image/test.jpg wit Chrome browser. The responded image should be in webp format.
https://image.example.com/image/test.jpg with Safari browser. The responded image should be in jp2 format.
https://image.example.com/image/test.jpg with IE browser. The responded image should be in jxr format.
Feedback