站点内的图片性能优化
大约 3 分钟
站点内图片性能优化详解
1. 选择合适的图片格式
不同格式的特点和使用场景：
- JPEG/JPG：适合照片类图片，支持高压缩率，有损压缩
- PNG：适合图标、简单图形，支持透明，无损压缩
- WebP：现代格式，比JPEG和PNG更小，支持透明和动画
- AVIF：最新的图片格式，压缩率更高
- SVG：适合矢量图形，如图标、简单图形
<!-- 示例：根据内容选择合适格式 -->
<!-- 照片使用 JPEG -->
<img src="photo.jpg" alt="风景照片">
<!-- 图标使用 SVG -->
<svg width="24" height="24" viewBox="0 0 24 24">
<path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
</svg>
<!-- 现代浏览器优先使用 WebP -->
<picture>
<source srcset="image.webp" type="image/webp">
<img src="image.jpg" alt="示例图片">
</picture>2. 图片压缩和优化
方法包括：
- 有损压缩：减少文件大小，轻微质量损失
- 无损压缩：保持质量，减少文件大小
- 移除元数据：删除EXIF信息等不必要的数据
// 使用工具进行批量压缩示例
const imagemin = require('imagemin');
const imageminMozjpeg = require('imagemin-mozjpeg');
const imageminPngquant = require('imagemin-pngquant');
(async () => {
const files = await imagemin(['images/*.{jpg,png}'], {
destination: 'build/images',
plugins: [
imageminMozjpeg({ quality: 80 }),
imageminPngquant({ quality: [0.6, 0.8] })
]
});
})();3. 响应式图片
使用 srcset 和 sizes 属性：
<!-- 根据屏幕密度提供不同分辨率 -->
<img src="image-400.jpg"
srcset="image-400.jpg 400w,
image-800.jpg 800w,
image-1200.jpg 1200w"
sizes="(max-width: 600px) 400px,
(max-width: 1000px) 800px,
1200px"
alt="响应式图片示例">
<!-- 根据设备像素比提供不同图片 -->
<img src="image.jpg"
srcset="image.jpg 1x,
image@2x.jpg 2x,
image@3x.jpg 3x"
alt="高分辨率图片">使用 <picture> 元素：
<picture>
<!-- 小屏幕使用裁剪版本 -->
<source media="(max-width: 768px)" srcset="image-mobile.jpg">
<!-- 大屏幕使用完整版本 -->
<source media="(min-width: 769px)" srcset="image-desktop.jpg">
<!-- 默认图片 -->
<img src="image-default.jpg" alt="响应式图片">
</picture>4. 懒加载 (Lazy Loading)
原生懒加载：
<!-- 使用 loading="lazy" 属性 -->
<img src="image.jpg" alt="懒加载图片" loading="lazy">
<!-- 对于背景图片 -->
<div class="lazy-background" data-bg="background-image.jpg"></div>JavaScript 实现懒加载：
// Intersection Observer 实现懒加载
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);
});5. 预加载关键图片
使用 <link rel="preload">：
<!-- 预加载首屏关键图片 -->
<link rel="preload" as="image" href="hero-image.jpg">
<!-- 预加载特定媒体查询的图片 -->
<link rel="preload" as="image" href="mobile-hero.jpg" media="(max-width: 768px)">6. 使用 CDN 和缓存策略
设置合适的缓存头：
# Nginx 配置示例
location ~* \.(jpg|jpeg|png|gif|webp|avif)$ {
expires 1y;
add_header Cache-Control "public, immutable";
}7. 渐进式图片加载
低质量图片占位符 (LQIP)：
<!-- 先加载模糊的小图，再加载高清图 -->
<div class="image-container">
<img class="blur-up"
src="image-small-blurred.jpg"
data-src="image-large.jpg"
alt="渐进式加载">
</div>
<style>
.blur-up {
filter: blur(5px);
transition: filter 0.3s ease;
}
.blur-up.loaded {
filter: blur(0);
}
</style>8. 图片尺寸优化
避免图片尺寸过大：
/* 为图片设置合理的最大尺寸 */
img {
max-width: 100%;
height: auto;
}
/* 针对特定容器优化 */
.article-content img {
max-width: 100%;
height: auto;
}9. 使用现代图片格式
优先使用 WebP 和 AVIF：
<picture>
<source srcset="image.avif" type="image/avif">
<source srcset="image.webp" type="image/webp">
<img src="image.jpg" alt="现代图片格式">
</picture>10. 实施建议和最佳实践
综合优化策略：
- 分析现有图片：使用工具如 Lighthouse 分析图片优化情况
- 制定图片策略：根据内容类型选择合适的格式和优化方式
- 自动化流程：在构建过程中集成图片优化工具
- 监控性能：持续监控图片加载性能和用户体验
// 构建脚本示例
const gulp = require('gulp');
const imagemin = require('gulp-imagemin');
gulp.task('images', () => {
return gulp.src('src/images/*')
.pipe(imagemin([
imagemin.gifsicle({interlaced: true}),
imagemin.mozjpeg({quality: 75, progressive: true}),
imagemin.optipng({optimizationLevel: 5}),
imagemin.svgo({
plugins: [
{removeViewBox: true},
{cleanupIDs: false}
]
})
]))
.pipe(gulp.dest('dist/images'));
});通过这些优化策略的综合应用，可以显著提升网站的图片加载性能，改善用户体验，同时减少带宽消耗。