文章目录

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

指标 影响
页面大小 图片占60-80%
LCP 大图影响加载
带宽成本 图片流量大
用户体验 加载慢流失

格式 压缩率 浏览器支持
JPEG 基准 100%
PNG 较大 100%
WebP 节省30% 97%+

  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


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;
}

场景 压缩比 质量
缩略图 60% 中等
内容图 75% 良好
Banner 80% 高
Logo/图标 无损 最高

工具 平台 特点
TinyPNG 在线 压缩率高
ImageOptim Mac 无损压缩
Kraken.io 在线/API 批量处理
ShortPixel 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 5.5+自动添加 loading="lazy"。

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-load {
    filter: blur(10px);
    transition: filter 0.3s ease;
}

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


<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="响应式图片">


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


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


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缓存
  • [ ] 删除无用水印

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。