WordPress图片优化：WebP转换与压缩策略

本文介绍WordPress图片优化技巧，包括WebP格式转换、图片压缩和CDN缓存策略。

图片优化的重要性

WebP格式转换

为什么要用WebP

使用ShortPixel插件

1. 插件 → 安装ShortPixel Image Optimizer
2. 注册免费API（每月100张免费）

手动转换

sudo apt install webp

cwebp -q 80 input.jpg -o output.webp

for f in *.jpg; do cwebp -q 80 "$f" -o "${f%.jpg}.webp"; done

Nginx自动转换

location ~* \.(jpg|jpeg|png)$ {
    add_header Vary Accept;
    try_files $uri $uri.webp @proxy;
}

location ~* \.(jpg|jpeg|png)\.webp$ {
    add_header Content-Type image/webp;
}

图片压缩

推荐压缩比

常用工具

WordPress配置

在 functions.php 中：

// 上传时自动压缩
add_filter('jpeg_quality', function($quality) {
    return 75;
});

// 生成多尺寸图片
add_image_size('thumbnail', 300, 300, true);
add_image_size('medium', 800, 600, false);
add_image_size('large', 1200, 900, false);

图片懒加载

浏览器原生懒加载

<img src="placeholder.jpg" data-src="real-image.jpg" loading="lazy" alt="描述">

WordPress原生支持

WordPress 5.5+自动添加 loading="lazy"。

JavaScript实现

if ('IntersectionObserver' in window) {
    const observer = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                const img = entry.target;
                img.src = img.dataset.src;
                observer.unobserve(img);
            }
        });
    });

    document.querySelectorAll('img[data-src]').forEach(img => {
        observer.observe(img);
    });
}

渐进式加载（Blur-up）

/* 占位符样式 */
.blur-load {
    filter: blur(10px);
    transition: filter 0.3s ease;
}

.blur-load.loaded {
    filter: blur(0);
}

响应式图片

srcset属性

<img src="image-800.jpg"
     srcset="image-400.jpg 400w,
             image-800.jpg 800w,
             image-1200.jpg 1200w"
     sizes="(max-width: 600px) 100vw, 800px"
     alt="响应式图片">

WordPress实现

// 使用wp_calculate_image_srcset
echo wp_get_attachment_image_srcset($attachment_id, 'large');

picture标签

<picture>
    <source srcset="image.webp" type="image/webp">
    <source srcset="image.jpg" type="image/jpeg">
    <img src="image.jpg" alt="图片描述">
</picture>

CDN缓存配置

图片CDN规则

location ~* \.(jpg|jpeg|png|gif|webp|svg)$ {
    expires 30d;
    add_header Cache-Control "public, no-transform";
    access_log off;
}

图片预加载

<!-- 预加载首屏图片 -->
<link rel="preload" as="image" href="hero.webp">
<link rel="preload" as="image" href="banner.webp">

图片优化清单

• [ ] 上传前压缩图片
• [ ] 转换WebP格式
• [ ] 启用懒加载
• [ ] 使用响应式图片
• [ ] 配置CDN缓存
• [ ] 删除无用水印