让网站更快的透明 PNG 发布清单

透明图片能提升界面的精致感，但体积过大的 PNG 会延迟首屏内容并浪费带宽。发布新素材前，可以按下面的清单检查。

匹配实际展示尺寸

• 导出尺寸尽量接近图片在页面上的最大显示尺寸。
• 如果移动端和桌面端尺寸差异很大，提供响应式图片版本。
• 不要用 CSS 放大小尺寸源图，否则画面会发虚。

上传前先压缩

让最终导出文件经过 PNG 压缩。保持透明通道，移除不必要的元数据，并重点检查细边缘和阴影。

选择正确格式

透明图、像素画、截图和需要无损细节的素材适合 PNG。没有透明需求的照片通常更适合 WebP、AVIF 或 JPEG。

避免布局跳动

为图片设置宽高属性或稳定的宽高比。这样浏览器可以在图片下载前预留空间，避免周围内容突然移动。

在真实页面中验证

使用移动网络环境测试，并检查图片最终渲染尺寸。优秀的素材工作流应同时关注视觉质量和真实页面性能，而不是只看文件大小。