WordPress 图片与媒体处理全攻略：自动压缩、WebP 转换、响应式图片、懒加载与 CDN 整合
图片通常是网页中体积最大的资源。一个没有经过优化的网站，首页的图片可能会占几 MB，严重影响加载速度和用户体验。WordPress 默认的图片处理功能已经不错，但通过一些额外的手动配置和代码优化，你可以让图片加载速度提升 50% 以上，而画质几乎无损。
第一步：配置缩略图尺寸
WordPress 上传一张图片后，会自动生成多个不同尺寸的副本。这些尺寸在后台设置 → 媒体中定义，包括缩略图、中等尺寸、大尺寸。此外，主题或插件也可能注册额外的尺寸。你应该根据你的设计稿，合理设置这些尺寸，避免生成无用的缩略图。
在 functions.php 中可以添加自定义缩略图尺寸：
add_image_size('homepage_featured', 800, 400, true); // 硬裁剪
add_image_size('news_thumbnail', 300, 200, false); // 按比例缩放
true 表示硬裁剪（严格按宽高裁剪），false 表示缩放以适应。
生成自定义尺寸后，如果你有大量已有图片，需要重新生成缩略图。可以使用 Regenerate Thumbnails 插件，或者用 WP-CLI 命令 wp media regenerate。
第二步：自动转换为 WebP 格式
WebP 相比 JPEG 和 PNG，体积可以减少 25%-35%。从 WordPress 5.8 开始，系统已经支持 WebP 上传。但要让服务器在上传时自动将 JPG/PNG 转换为 WebP，需要一些额外的处理。
一个轻量级的方法是通过自定义函数，使用 wp_generate_attachment_metadata 钩子，在上传后调用 PHP 的 imagewebp 函数。不过更推荐的做法是使用现代 CDN（如 Cloudflare、ImageKit、Imgix）的实时格式转换功能，或者用性能插件如 ShortPixel、EWWW Image Optimizer。
如果你在服务器端希望简单实现，可以在 functions.php 中添加：
add_filter('wp_handle_upload', 'convert_to_webp');
function convert_to_webp($file) {
if (strpos($file['type'], 'image/jpeg') !== false || strpos($file['type'], 'image/png') !== false) {
// 调用转换函数（需要 GD 或 Imagick 库）
// 实际代码较复杂，建议使用成熟插件
}
return $file;
}
鉴于转换代码的复杂性，实际项目中建议用专业图片优化插件来批量转换，自己维护转换逻辑成本较高。
第三步：响应式图片与 srcset
WordPress 从 4.4 版本开始自动为页面中的图片添加 srcset 和 sizes 属性。这意味着它会根据屏幕宽度，自动选择合适尺寸的图片，手机端不会加载桌面端的大图。
你可以通过 wp_calculate_image_srcset 过滤器来调整 srcset 中包含的尺寸，或者手动控制 sizes 属性：
add_filter('wp_calculate_image_srcset', 'custom_srcset', 10, 5);
function custom_srcset($sources, $size_array, $image_src, $image_meta, $attachment_id) {
// 例如，移除过小的尺寸
foreach ($sources as $width => $source) {
if ($width < 300) {
unset($sources[$width]);
}
}
return $sources;
}
第四步：懒加载（Lazy Loading）
懒加载是指图片只在进入视口时才加载。WordPress 从 5.5 版本开始，自动为 <img> 标签添加 loading="lazy" 属性，因此不需要额外代码。但如果你想要更精细的控制，可以用 wp_filter_content_tags 或手动在主题模板中添加 loading 属性。
对于背景图片或其他非标准图片，你可以用原生的 Intersection Observer API 实现。
第五步：CDN 与图片加速
把图片放到 CDN 上可以显著提升全球访问速度。最简单的办法是用免费的 Cloudflare，它会自动缓存图片。如果你用的是付费 CDN（如 KeyCDN、BunnyCDN），可以用插件将本地图片 URL 替换为 CDN URL：
add_filter('wp_get_attachment_url', 'rewrite_cdn_url');
function rewrite_cdn_url($url) {
if (is_admin()) return $url;
$cdn_url = 'https://cdn.你的网站.com';
$site_url = home_url();
return str_replace($site_url, $cdn_url, $url);
}
注意：这个替换要求 CDN 已经同步了你的 /wp-content/uploads/ 目录。
第六步：禁止缩放过大图片
很多用户直接从数码相机或手机上传几 MB 的原始图片，这完全没有必要。WordPress 有一个硬性限制：上传的图片如果超过 big_image_size_threshold（默认 2560 像素），会被缩放后再存储。你可以修改这个阈值：
add_filter('big_image_size_threshold', 'custom_big_image_threshold');
function custom_big_image_threshold() {
return 1920; // 超过 1920 像素就缩放
}
或者完全禁止缩放：return 0; 但不建议这样做。
完整的图片优化链路应该是：上传前用工具压缩 → WordPress 生成合理尺寸 → 转换为 WebP → CDN 分发 → 浏览器端懒加载。把这套流程走通，你的网站图片加载速度会非常可观。
