add @nuxt/image

[yangwao]

Try tune and leverage all performance things we could use

• https://image.nuxt.com/
• https://image.nuxt.com/get-started/installation
• https://image.nuxt.com/providers/cloudflare

Ref

• Sentry: profiling & performance #4716
• Introduce using AVIF back #4551

[roiLeo]

duplicate

• nuxt-img for reduce images size #4426

[pbkompasz]

👋

[kodabot]

ASSIGNED - @pbkompasz 🔒 LOCKED -> Thursday, November 2nd 2023, 09:56:31 UTC -> 24 hours

[pbkompasz]

@yangwao Some of the images link to https://image.w.kodadot.xyz or https://image-beta.w.kodadot.xyz which redirects to the Cloudfare provider. The problem is that the modifiers are lost this way.
To solve this I wrote a custom provider which fetches the images directly from https://imagedelivery.net/... with the modifiers, however when I make the requests I get this error:
ERROR 9429: Flexible variants are not enabled for the account
This is an example of an optimized image: https://imagedelivery.net/jk5b6spi_m_-9qC4VTnjpg/bafybeiatgshrpwwv4cw3kdi5xzvxvbgwtf7hfelbz54vwjwfkdltvcra3e/public/width=200/height=100/fit=cover

[yangwao]

ERROR 9429: Flexible variants are not enabled for the account

hm I would enable it once CF is back

ome of the images link to https://image.w.kodadot.xyz or https://image-beta.w.kodadot.xyz which redirects to the Cloudfare provider.

this is intentionally as we are having pre production environment and production.

To solve this I wrote a custom provider

if it would respect when it's canary, beta or production I'm good

[yangwao]

Seems it was already on, maybe due CF outage it did not work? cc @pbkompasz

• https://developers.cloudflare.com/images/cloudflare-images/transform/flexible-variants/

There is also this one fixed if you want to try

[pbkompasz]

@yangwao It works now, probably it was due to the outage. I tested only a couple of optimization with making requests directly to imagedelivery and the explore page went down from ~35 MB to ~23 MB.
When I tried to make the requests to this worker it redirected to cloudflare-ipfs.com instead of imagedelivery which threw this error:
failed to resolve /ipfs/QmYSgSKuP2oSpE4yBERxm7UGGWLwgpW9ywWwktx53hCAzy/width=240,height=240,fit=cover: no link named "width=240,height=240,fit=cover" under QmYSgSKuP2oSpE4yBERxm7UGGWLwgpW9ywWwktx53hCAzy .
I will look into it tomorrow.

[yangwao]

explore page went down from ~35 MB to ~23 MB.

fair improvement tho

cool, keep us posted! :)