[🐞] ?jsx should support animated images (.gif, .webp)

[VarPDev]

Which component is affected?

Qwik Rollup / Vite plugin

Describe the bug

I tried to follow the instruction in this warning, but if I use ESM to import an image that .gif extension, the animated image didn't work. So i have to use img tag and the warning still remain in the console.

Reproduction

https://pako.vercel.app/test/

Steps to reproduce

No response

System Info

System:
    OS: macOS 13.1
    CPU: (8) arm64 Apple M1
    Memory: 72.72 MB / 8.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 21.1.0 - ~/.nvm/versions/node/v21.1.0/bin/node
    Yarn: 1.22.19 - ~/.nvm/versions/node/v21.1.0/bin/yarn
    npm: 10.2.0 - ~/.nvm/versions/node/v21.1.0/bin/npm
  Browsers:
    Chrome: 119.0.6045.105
    Safari: 16.2
  npmPackages:
    @builder.io/qwik: ^1.2.15 => 1.2.17 
    @builder.io/qwik-city: ^1.2.15 => 1.2.17 
    undici: ^5.26.0 => 5.27.2 
    vite: ^4.4.11 => 4.5.0

Additional Information

No response

[gioboa]

Thanks for reporting the issue, I will look at it.

UPDATE:
The plugin is replacing src attribute with srcset for the image.
is it a valid attribute for gif images? 🤔

[VarPDev]

@gioboa I published a new version with a simple img tag with srcset="image.gif" and it works.
You can check at this url https://pasqualedelucia.com/test
The problem I saw is that using the plugin the image was converted in a file with the format .webp

[wmertens]

srcSet could be valid if you wanted to serve several sizes of .gif images. But the problem is that the plugin should detect that it's a multi-frame gif and then convert it to an animated webp image.

[wmertens]

another problem is that the plugin outputs webp but that's only supported in safari since 2022, so older ipads and iphones will not see the images.

Ideally qwik-city (in non-SSG mode) generates image URLs without extension and it serves the images in the format that the browser supports.

See for example https://www.cap.be/_img/bigstock--129318500_k.jpg@mid, depending on your browser's Accepts header, you'll get AVIF, WebP or JPEG.