search

vercel / next.js

The React Framework
https://nextjs.org
MIT License
125.37k stars 26.78k forks source link

apng are still not animated unless we explicitly set `unoptimized` #36950

Open Yuripetusko opened 2 years ago

Yuripetusko commented 2 years ago

Hm we tested the canary version and apng are still not animated unless we explicitly set unoptimized

next@canary

https://github.com/nikitindiz/nextjs-apng-bug

https://nextjs-apng-bug.vercel.app/

Left one - optimized, both images should be animated.

Originally posted by @nikitindiz in https://github.com/vercel/next.js/issues/34807#issuecomment-1077824769

icyJoseph commented 2 years ago

I think the content type of https://rmrk.mypinata.cloud/ipfs/bafkreigobec7gopuinymb7wmejxpjnbc3bxqni7mj4mu4xh3tufvbkx3fy, should be image/apng, right? but it is image/png

Yuripetusko commented 2 years ago

I think the content type of https://rmrk.mypinata.cloud/ipfs/bafkreigobec7gopuinymb7wmejxpjnbc3bxqni7mj4mu4xh3tufvbkx3fy, should be image/apng, right? but it is image/png

No actually apng mime type is still image/png. Hence nextjs uses is-animated library to determine if it's an animated png on server side using bytes/blob. But it's not working currently

icyJoseph commented 2 years ago

I think the content type of https://rmrk.mypinata.cloud/ipfs/bafkreigobec7gopuinymb7wmejxpjnbc3bxqni7mj4mu4xh3tufvbkx3fy, should be image/apng, right? but it is image/png

No actually apng mime type is still image/png. Hence nextjs uses is-animated library to determine if it's an animated png on server side using bytes/blob. But it's not working currently

According to https://wiki.mozilla.org/APNG_Specification#MIME_type:

APNG can be identified using the image/apng MIME type.

Mmm then I don't know, I guess, "best-effort", means some images will fail:

Auto-detection for animated files is best-effort

vuln3rable commented 2 years ago

Any update on this issue icyjoseph? How could we move forward?