网站图片优化技巧：提升加载速度的关键

图片是网页体积的大头，优化好了能显著提升加载速度。我自己的站优化图片后，首屏时间减少了40%。这篇文章分享一些实用技巧。

选择合适的格式

JPEG适合照片。色彩丰富的图片用JPEG，压缩率高，文件小。质量设置在80%左右，肉眼基本看不出损失。

PNG适合图标和截图。需要透明背景或者色彩简单的图片用PNG。虽然文件大点，但清晰度高。

WebP是趋势。同样质量下，WebP比JPEG小30%左右。现在主流浏览器都支持，可以优先使用，配个fallback兼容老浏览器。

压缩图片体积

在线工具。TinyPNG、Squoosh这些工具，压缩效果很好，而且免费。批量处理几百张图也没问题。

构建工具。如果用Webpack、Gulp这些构建工具，可以配置自动压缩。每次打包的时候自动处理，不用手动操作。

CDN自动优化。有些CDN提供图片自动优化功能，上传原图，访问时自动返回压缩后的版本。省事但可能要多花钱。

懒加载技术

页面里的图片不是都要立刻加载的。首屏以下的图片，等用户滚动到附近再加载。这样能大幅减少首屏加载时间。

原生懒加载很简单，img标签加个loading="lazy"属性就行。兼容性不好的话，也可以用Intersection Observer API自己实现。

响应式图片

不同设备用不同尺寸的图片。手机用小图，电脑用大图。srcset属性可以搞定，省流量也提升体验。