Format transformation is broken?

Hi team,

I noticed that format transformation is not working on our websites.

With format=auto and without format settings we got the same results - avif/webp images. We don’t use Polish as I know. Also, the quality setting is broken too. The rest is OK.

Can someone help, please?

Examples:

Prod website (with fromat=auto in some places): https://burgerbodega.scvr.co
Staging website (without format): https://burgerbodega.staging.scvr.co

So with format settings or without it, we got the same results as we can see on screenshots - avif/webp. Did we set up something wrong? The rest transformations are working well. Because of these issues, all our websites are broken in Safari. Safari can’t animate avif/webp images correctly.

Thank you

Screenshots (1):

Screenshots (2):

Hi, Images don’t support format hints.

Can you clarify what’s with animated webp in Safari?

Hi asemiglazov

Thank you for your prompt reply.

Could you please clarify what you mean? So we can’t use a format param like this?

I will try to upload the video in the next reply. I don’t know if I can do that, sorry my first posts here :slight_smile:

Images are flickering on scroll on desktop Safari (Intel processors) if they are animated. Only webp/avif formats. As I know it’s Safari 3d render issues, but with old image formats everything is OK.

Also:

  • We see this only in desktop Safari with Intel processors
  • If we set only 1 src + 1-3 srcset with small dimensions - everything is OK, weird
  • I have tested locally with jpeg - OK
  • I have tested with Cloudinary/AWS - OK
  • When we migrated from Cloudinary to Cloudflare we got this issue :frowning:

Vimeo link: Safari webp/avif images with transform flickering on Vimeo

Thank you

I forgot to mention: When I tested avif/webp images from Cloudflare (current links) without any animations, or any CSS positions, but with big images in srcset (like 3840px) - I got the same issue in Safari (Intel), flickering on scroll. So maybe the issue is somewhere deeper in our CF settings, can it be true?

format option is only supported on transformations, not images.
see Note:

Got it, it’s not animated images per se, it’s animation caused by scrolling. totally different thing.

You can add workaround: custom worker on top of the images link, and remove avif,webp from Accept header before passing it further.

2 Likes

Thank you asemiglazov

I will ask the backend team to connect to this conversation or I will update you with their messages :slight_smile:

Yeah, not animated images itself but with CSS animations.
Thank you again

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.