besscroft / PicImpact

PicImpact 是一个摄影师专用的摄影作品展示网站,基于 Next.js 开发。今天又是想当二次元摄影高手的一天呢!
https://pic.besscroft.com
MIT License
610 stars 86 forks source link

照片详情页的加载优化 #91

Closed Zheaoli closed 2 months ago

Zheaoli commented 2 months ago

https://photos.manjusaka.me/lotus/preview/282

目前浏览页会加载原始的照片 https://image.r2.manjusaka.me/picimpact/images/lotus/DSC_7883.jpg

这里的问题是如果照片很大的话加载会很慢。这里是否逻辑可以调整为

  1. 上传的时候生成同分辨率的压缩照片
  2. 新增一个下载原始照片的按钮

这样应该能达到画质和加载速度的平衡

besscroft commented 2 months ago

目前上传的时候,会压缩一张 0.2 倍率的预览图片。再单独压一张的话,一张图片对应的存储就有 3 张图片了,存储压力较大(Cloudflare R2 免流,但是存储只免费 10G)。我觉得拿已有的预览图片放在详情页,然后提供一个按钮,点击后可以加载/查看原图(如果可行),并提供原图下载按钮。这样的话,能降低一些网络压力,因为有时候点开,可能只是想看看图片信息,而非图片。

Zheaoli commented 2 months ago

目前上传的时候,会压缩一张 0.2 倍率的预览图片。再单独压一张的话,一张图片对应的存储就有 3 张图片了,存储压力较大(Cloudflare R2 免流,但是存储只免费 10G)。我觉得拿已有的预览图片放在详情页,然后提供一个按钮,点击后可以加载/查看原图(如果可行),并提供原图下载按钮。这样的话,能降低一些网络压力,因为有时候点开,可能只是想看看图片信息,而非图片。

是的没错,把下载原图/加载原图单独做成一个 button