平时写博客的时候时常需要插入各种各样的图片，图片本身需要占用存储空间，而且图片从服务器上进行传输也需要带宽，这对于使用一些国内小水管建站的站长来说很不友好，而且就算使用上高性能的CDN，国内CDN的流量费用也是一大问题
我作为一个很喜欢分享图片的博主，自然就要开始想各种鬼点子来优化博客的图片浏览体验
使用高性能存储&CDN
对于一些海外的用户，我们可以尝试使用 Cloudflare 的R2对象存储和CDN服务
R2提供了10GB的存储空间，其中A类指的是写入，B类指的是读取，一般来说这两个东西都很难用光，尤其是B类，配置好了恰当的缓存策略，个人使用基本上就可以满足了（除非你被CC攻击，此外R2不计算流量，也就是说不管你产生了多少流量，只要存储的东西不超过10G，请求数没有超标，那么都是不收取费用的
如果你使用 CF 带宽联盟成员的对象存储产品，那么也可以享受和 Cloudflare R2存储一样的待遇：Bandwidth Alliance - Cloudflare
国内的阿里云和腾讯云已经加入了其中，需要注意的是并不是所有地域都能享受对应的福利
具体使用可以参考这个博主的：【对象存储】搭配CF带宽联盟实现流量免费| Luminous' Home
需要注意的是，使用R2存储需要绑定支付方式，国内的朋友可以使用国区Palpay
光使用高性能存储是不太够的，还需要配置恰当的CDN缓存策略，让用户能从最近的CDN节点获取到内容，节省传输成本，加快传输速度
这篇文章写的还不错，可以参考这位博主的缓存策略：CloudFlare Cache Rules （新缓存规则）教程 - WarHut - 作战小屋
如何检查是否成功缓存了呢？首先你要先在浏览器打开一次，之后再使用 curl 命令进行测试
cf-cache-status 为 HIT 即为成功
缓存成功后，像我这种 15MB 的大图完全加载也只需1S有余，可以说速度非常快了
优化图片大小&格式
就算优化得再好，图片太大，用户加载也还是会很慢，因此我打算对图片进行压缩，在尽可能不破坏图片画质的情况下，减小图片体积
其中的一个很重要的东西就是图片格式，我们常见的文件格式有 JPG、PNG，这些格式是从旧时代沿用过来的，兼容性很好，在追求高画质、高压缩比的次世代，我们有了一些新标准，一些比较新的图片格式
目前浏览器上面使用的比较多的有 WebP、AVIF，至于很新的JPEG XL，由于兼容的浏览器实在太少，尽管它很优秀，但是作为图床的文件格式实在不太合适
数据来源：JPEG XL image format | Can I use... Support tables for HTML5, CSS3, etc
出乎意料的是，对图片格式极为保守的 Safari 居然支持了该格式，在最新的 iPhone 16 系列中也加入了对 JPEG XL 的支持：Why Apple Uses JPEG XL in the iPhone 16 and What it Means for Your Photos | PetaPixel
至于 WebP，属于老牌格式了，此格式分为 WebP1 和 WebP2，主要的倡导者是谷歌，目前 WebP2 还处于很古早的不稳定状态，距离实际大量使用还有一段距离，WebP1 已经被广泛使用很久了
AVIF 的编码速度极慢，但是它的有损压缩率比 WebP 要高，但是它对浏览器的兼容性不如 WebP，在一些小众浏览器上的表现可能不佳
从上图中可以看出，IE对几乎所有的次世代格式都不兼容，如果你的业务涉及的用户可能使用IE，那么你可能就需要考虑使用较老的 JPG 或者 PNG
对于我个人而言，我平时使用较多的图片格式是 WebP，因为我使用的图床程序大多都不兼容 AVIF，不过我个人对 AVIF 的未来仍然是看好的
JPEG XL的无损压缩很厉害，也许用来归档会很不错，而且 JPEG XL 一反常态，对社区进行开源，也吸引了一批开发者
合理地压缩图片，能大大提高存储空间的利用率和数据传输成本，提高用户体验
Comments NOTHING