feat: 图片加载优化

[Zheaoli]

目前我们整体的图片加载还是类似下面这样的形式

            <img
              width={MasonryViewData.width}
              loading="lazy"
              src={MasonryViewData.preview_url || MasonryViewData.url}
              alt={MasonryViewData.detail}
              className="object-contain md:max-h-[90vh]"
            />

但是实际上这里可以用 https://nextjs.org/docs/app/api-reference/components/image 的组件来考虑优化一下？

同时，目前 CLoudflare 的 CDN 是支持通过 URL 在线 resize 图片 image 的https://developers.cloudflare.com/images/transform-images/transform-via-url/

所以我们下一步考虑的方向实际上是可以根据用户当前设备的分辨率向 CDN 获取一个 resized 的 图片

如果觉得可以做，可以把这个issue assign 给我

[besscroft]

我看了下文档，好像可以在 loader props 里面实现加载的时候，生成新链接（这样看起来可以做一个功能开关了），然后 cloudflare 自动进行 resize？

cloudflare 的文档中有这么一句话 Transformations let you optimize and manipulate images stored outside of the Cloudflare Images product.，我理解应该是只要存储套了 cloudflare 似乎都可以用（没用过但感觉是个很棒的功能）。

关于计费：Unique transformations are counted over a 30-day sliding window.，每个月一张图片一种处理参数都只计费一次，免费额度 5k，也是挺香的。考虑到用户的使用成本（全是图片），cloudflare 优先支持我觉得完全没问题。

确实是一个不错的提案，从使用上来说，当然是瀑布流的图片加载的越快越好（虽然相机拍的图片大小很大

麻烦您了，给大佬磕一个（