I would like to disable AVIF for our freshly implemented Cloudflare Images solution.
My website is a Wordpress/Woocommerce platform and we use a great plugin ’ Offload Images to Cloudflare ’ to bulk offload all of our images (10 000 images) however we are in a situation where many people usually download images directly from their browsers/phones. This results always in the same file w=9999.avif for each image and we cannot open it - AV1 codec is required and most people don’t even know about it.
Shortly said we prefer to keep the jpg solution in some way even though we are aware it results in larger file size… Would you recommend a worker or a direct setting via the admin area of Cloudflare?
I have no clue what workers is and how to set it up, but I found this and tried to use it, but with no idea how:
> addEventListener('fetch', event => {
> event.respondWith(handleRequest(event.request));
> });
>
> async function handleRequest(request) {
> // You can find this in the dashboard, it should look something like this: ZWd9g1K7eljCn_KDTu_MWA
> const accountHash = 'kW0D2K3mJM2U6JJyePkm6Q';
> let imageUrl = 'https://imagedelivery.net/' + accountHash + '/';
>
> const { pathname } = new URL(request.url);
> let filename = pathname.substring(1);
>
> let extension = filename.split(/[#?]/)[0].split('.').pop().trim();
> if (extension === filename) {
> extension = '';
> }
> extension = extension.toLowerCase();
> filename = filename.replace(/my_images_dir\//, '');
>
> if (extension) {
> const baseFilename = filename.substring(0, filename.length - extension.length - 1);
> imageUrl += baseFilename;
> filename = baseFilename + '.' + extension;
> } else {
> imageUrl += filename;
> }
>
> const headers = new Headers(request.headers);
>
> // set headers to only accept image type matching the extension
> switch (extension) {
> case 'avif':
> headers.set('Accept', 'image/avif');
> break;
> case 'jpg':
> case 'jpeg':
> headers.set('Accept', 'image/jpeg');
> break;
> case 'png':
> headers.set('Accept', 'image/png');
> break;
> case 'webp':
> headers.set('Accept', 'image/webp');
> break;
> }
>
> return await fetch(imageUrl, {
> method: 'GET',
> headers: headers
> });
> }
Do I need to change something here like our website URL in the let imageUrl? Also I don’t know what to type in as a URL after the GET option and below there is some +Set Headers
I thought it would be easy for people who don’t have knowledge in this area, but it seems it is more technical.
I hope I made some sense and you may be able to help me. Thank you all!
As documented, .avif variants should only be served to browsers that accept it. Are you saying visitors with non-compatible browsers are seeing .avif images?
The only documented way to avoid serving .avif images requires a paid plan: