Avif instead of webp

Good morning everyone, how are you?
I am writing to you regarding the Avif format.
When I make an API call (nuxt) I get Avif images instead of webp (with Chrome).
Is this correct?
Maybe I don't know enough about it, but I would like to ask you how do I change it to webp.

Thank you so much
Leonardo

Hello @leonardo-angelucci, thanks for joining the community!

Could you send us the URL of the file?
Have you checked if the original file is returned properly in the API response?

Hello @Pau,
Thanks for getting back to me.
here the url file:

https://images.prismic.io/ice-studios/05e4d042-de7f-4625-9e05-28b0435732aa_Garage_4.jpg?auto=compress,format

In chrome the result of this file (and all the others) is avif.

:slight_smile:

Hello,
do you have any news?
Thank you

Hey there @leonardo-angelucci.

The image you shared is a JPG file. Could it be that you have two identical images in different formats?

Do you use any kind of image management service outside of Prismic? These types of tools do automatic image format conversion. Such as from Webp or JPG to AVIF.

Hello!
Thank you for your reply. :slight_smile:
I'm not using services external to prismic.
I have uploaded images (jpg) to prismic and I get avif directly from your api.

If I do an upload of a jpg, your api should return a webp to me if the browser supports it, is this correct?
Thank you

The API will return the same file format you upload to the Media Library.
The only automatic transformations done automatically are related to image compression:

Hello @Pau ,
May I ask you as a courtesy, how come I get avif files if I have uploaded jpgs?
Do you know what it could be?

Thank you so much
Best
Leonardo

Hey Leonardo. Yes, I'll be happy to help. Although, I'm not sure what is the reason why the format is changing within your site. The API will always returns the same format that you added to your documents. It can be some configuration within your code. For example, <nuxt-img> has a format property that allows you to change the format in which images are served: <nuxt-img>.

Is it possible that you're using this component?

Dear Pau

I just encountered the same issue as Leonardo. I run a website based on Prismic since three years. Our website uses responsive image resizing enabled by prismic and imigix. The resized images where never delivered in the original format (png or jpg) but until recently always as webp and as we realized now it changed to avif.

I have the impression that the avif compression is more pixelated in some situations than the former webp compression. In the image field configuration in the custom type generator there is no possibility to choose formats.

Any recommendation how to configure it?

It would be great to have the image compression described more closely in the docs!

Hey @yaay, yes, AVIF is supposed to provide better compression than WebP. We don't have a fixed recommendation for this type of image.

Prismic Imgix integration serves images with auto=compress,format. you could try removing this option on the URL of the image.

Hey @Pau, thanks for your answer!

Would it be possible to choose the compression format with the images API: to receive Avif, Webp or even Jpgs or Pngs with reduced image dimensions, as specified within the custom type image field?

The compression is made automatically in Prismic: auto=compress,format. And you can apply your own transformations by editing the URL of the Image:

Thanks @Pau

I found a good page in the Imgix documentation about image formats: Output Format | Format Parameters | imgix URL API Documentation

And also "A Developer’s Guide to Understanding Image Types":

1 Like