[🐞] If I use ESM to import an image that have .gif extension, the animated image didn't work

VarPDev commented 10 months ago

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 commented 10 months ago

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 commented 10 months ago

@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://deluciapasquale.it/test The problem I saw is that using the plugin the image was converted in a file with the format .webp

wmertens commented 10 months ago

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 commented 10 months ago

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.

QwikDev / qwik