实施Netlify的图像CDN
内容提要
我在图标画廊网站上实施了Netlify的新图像CDN服务，带来了显著的带宽减少。使用现代图像格式（如AVIF）后，主页的带宽减少了78%，其他页面也有类似下降。这项服务简化了图像处理，提升了网站性能。
延伸解读
实施方式：重定向与渐进增强
作者没有直接替换所有图片链接，而是利用Netlify的重定向规则，在原有URL后添加查询参数（如?resize=true）。这样，即使图像CDN服务出现问题，原始图片仍能通过原URL访问，实现了渐进增强。这种方案保持了URL结构不变，同时让Netlify根据路径中的尺寸信息动态调整图片并转换为现代格式。
带宽节省的实际数据
文章提供了多个页面的带宽对比数据，显示启用图像CDN后，带宽下降幅度在65%到88%之间。其中主页减少了78%，Years页面减少了88%。这些数据基于实际测试，对比了旧版PNG和新版AVIF的加载情况，表明现代图像格式和动态调整能显著降低资源体积。
图像质量与文件大小
作者提到，一个原本5.3MB的PNG图标，经过Netlify图像服务处理后，在相同URL下变为161kB的AVIF格式，且没有可察觉的画质损失。这解决了之前因仓库中存储大量未优化图片而导致的构建和存储问题，现在无需手动优化每张图片。
定价不确定性
文章指出，在撰写时Netlify图像CDN的定价尚不明确。虽然服务效果显著，但读者在考虑采用时需将未来可能产生的费用纳入评估。作者建议关注官方定价信息，以判断该服务是否符合项目的成本预期。
Q&A
Netlify的图像CDN服务有什么优势？
Netlify的图像CDN服务显著减少了带宽消耗，主页带宽减少了78%，并且简化了图像处理，提升了网站性能。
如何在网站上实施Netlify的图像CDN？
只需将图像指向Netlify特定的URL，Netlify的图像服务会自动处理图像的转换和优化。
使用Netlify的图像CDN后，图像格式有什么变化？
Netlify的图像服务会根据浏览器请求的头部，自动提供更好的现代格式，如AVIF。
Netlify的图像CDN如何影响网站的加载速度？
使用Netlify的图像CDN后，网站的加载速度显著提高，多个页面的带宽减少，最高可达88%。
Netlify的图像CDN如何处理图像的动态调整？
通过使用Netlify的重定向规则，可以保持原有的URL结构，同时实现图像的动态调整和格式转换。
使用Netlify的图像CDN是否需要担心文件大小问题？
不需要，Netlify的图像服务自动优化图像，无需用户担心文件大小。
