本文探讨了如何优化网页图片加载，减少带宽消耗和提高移动端性能。建议使用CSS替代装饰性图片，利用CDN按需加载裁剪好的图片，采用base64编码处理小图，结合雪碧图技术。此外，推荐根据浏览器支持情况选择WebP、PNG或SVG格式，照片使用JPEG。这些策略旨在平衡图像质量和文件大小，提升用户体验。
- 不用图片。对于很多装饰类图片，尽量不用图片，因为这类修饰图片完全可以用 CSS 去代替。
-
对于移动端来说，屏幕宽度就那么点，完全没有必要去加载原图浪费带宽。一般图片都用 CDN 加载，可以计算出适配屏幕的宽度，然后去请求相应裁剪好的图片。
-
小图使用 base64 格式。
-
将多个图标文件整合到一张图片中（雪碧图）。
-
选择正确的图片格式：
- 对于能够显示 WebP 格式的浏览器尽量使用 WebP 格式。因为 WebP 格式具有更好的图像数据压缩算法，能带来更小的图片体积，而且拥有肉眼识别无差异的图像质量，缺点就是兼容性并不好。
- 小图使用 PNG，其实对于大部分图标这类图片，完全可以使用 SVG 代替。
- 照片使用 JPEG
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
