Appearance
图片优化
图片优化是Web性能优化的重要组成部分，通过减少图片文件大小和优化加载方式，可以显著提升页面加载速度和用户体验。
图片格式选择
选择合适的图片格式是优化的第一步：
- JPEG：适用于照片和复杂图像，支持高压缩率
- PNG：适用于需要透明背景的图像，支持无损压缩
- WebP：现代格式，提供更好的压缩效果
- SVG：矢量图形，适用于图标和简单图形
图片压缩技术
有损压缩
- 降低图片质量以减小文件大小
- 适用于照片和复杂图像
无损压缩
- 保持图片质量的同时减小文件大小
- 适用于需要高质量的图像
响应式图片
使用响应式图片技术，根据设备特性加载合适尺寸的图片：
html
<picture>
<source media="(min-width: 800px)" srcset="large.jpg">
<source media="(min-width: 400px)" srcset="medium.jpg">
<img src="small.jpg" alt="响应式图片示例">
</picture>
图片懒加载
实现图片懒加载，只在图片即将进入视口时才加载：
javascript
const imageObserver = new IntersectionObserver((entries, observer) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const img = entry.target;
img.src = img.dataset.src;
img.classList.remove('lazy');
observer.unobserve(img);
}
});
});
document.querySelectorAll('img[data-src]').forEach(img => {
imageObserver.observe(img);
});
最佳实践
- 使用适当的图片尺寸，避免加载过大的图片
- 实施图片懒加载策略
- 使用现代图片格式如WebP
- 使用CDN加速图片加载
- 启用浏览器缓存