图片优化
WordPress 图片优化技巧，提升页面加载速度。
📊 图片优化策略
| 策略 | 效果 | 难度 |
|---|---|---|
| 压缩图片 | 减少文件大小 | ⭐ |
| 延迟加载 | 减少初始加载 | ⭐ |
| WebP 格式 | 更小体积 | ⭐⭐ |
| 响应式图片 | 按需加载 | ⭐⭐ |
| CDN 分发 | 提升加载速度 | ⭐⭐ |
🛠️ 图片压缩
插件推荐
| 插件 | 特点 |
|---|---|
| Smush | 自动压缩 |
| ShortPixel | 高质量压缩 |
| Imagify | 多种压缩级别 |
代码优化
php
<?php
// 调整 JPEG 质量
add_filter('jpeg_quality', function($quality) {
return 82; // 默认 90
});
// 自动生成 WebP
add_filter('wp_image_editors', function($editors) {
array_unshift($editors, 'WP_Image_Editor_WebP');
return $editors;
});1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
⚡ 延迟加载
使用属性
php
<?php
// WordPress 5.5+ 内置延迟加载
// 自动为图片添加 loading="lazy"
add_filter('wp_get_attachment_image_attributes', function($attr, $attachment) {
$attr['loading'] = 'lazy';
return $attr;
});1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
解决方案
php
<?php
// 使用 srcset
function my_image_srcset($attr, $attachment, $size) {
$sizes = wp_get_attachment_image_srcset(get_post_thumbnail_id(), $size);
if ($sizes) {
$attr['srcset'] = $sizes;
}
return $attr;
}
add_filter('wp_get_attachment_image_attributes', 'my_image_srcset', 10, 3);1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
📐 响应式图片
srcset 属性
html
<img src="image-800.jpg"
srcset="image-400.jpg 400w,
image-800.jpg 800w,
image-1200.jpg 1200w"
sizes="(max-width: 600px) 400px,
(max-width: 1200px) 800px,
1200px"
alt="描述文字">1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
picture 元素
html
<picture>
<source srcset="image.webp" type="image/webp">
<source srcset="image.jpg" type="image/jpeg">
<img src="image.jpg" alt="描述文字">
</picture>1
2
3
4
5
2
3
4
5