
1. 启用图片延迟加载
在HTML代码中添加img loading="lazy"属性→滚动到视口时才加载图片→减少首屏资源消耗(需兼容旧浏览器)。
2. 压缩图片文件大小
使用TinyPNG工具将PNG转为WebP格式→通过ImageOptim压缩JPEG→保持清晰度同时减少50%体积(需测试不同格式支持)。
3. 设置图片缓存策略
在服务器配置`.htaccess`文件→添加FilesMatch "\.(png|jpg)$"> Header set Cache-Control "max-age=2592000"
4. 使用CSS替代小图标
将装饰性小图标转换为CSS背景图→用base64编码嵌入样式表→减少HTTP请求次数(需权衡代码体积)。
5. 优化图片CDN分发
将图片上传至阿里云OSS→开启CDN加速服务→配置自定义域名缩短URL长度(需设置防盗链规则)。
6. 调整图片加载顺序
在CSS中设置`background-image: url('logo.png')`→优先加载关键视觉元素→非核心图片使用低优先级脚本加载(需监控网络瀑布图)。