With the following lambda@edge
, the server-side code can now check values for
- headers['x-webp-support']
- headers['x-avif-support']
- headers['x-ix-bestf']
and make decisions for the response
- These headers will most likely need to be white-listed at the CDN layer.
exports.handler = async (event, context) => {
const req = event.Records[0].cf.request;
const headers = req.headers;
let avifsupport = '0';
let webpsupport = '0';
if (headers['accept']) {
if (headers['accept'][0].value.indexOf('image/webp') > -1) {
headers['x-webp-support'] = [{
key: 'x-webp-support',
value: '1'
}];
webpsupport = '1';
}
if (headers['accept'][0].value.indexOf('image/avif') > -1) {
headers['x-avif-support'] = [{
key: 'x-avif-support',
value: '1'
}];
avifsupport = '1';
}
}
let bestf = 'png';
if (webpsupport === '1') bestf = 'webp';
if (avifsupport === '1') bestf = 'avif';
headers['x-ix-bestf'] = [{
key: 'x-ix-bestf',
value: bestf
}];
return req;
};
It can be decided to switch a png
request to either webp
or avif
by looking into the request.header['accept']
where modern browsers send these capabilities.