网站图片素材规范与压缩流程：尺寸、格式、命名与WebP落地

引言：一张 4MB 的实拍图，拖垮了整站

做外贸站时最常遇到的画面是：摄影师发来一批产品实拍，单张 4MB、尺寸 6000×4000，直接拖进媒体库。前台首屏加载要等 8 秒，LCP 指标一片红，用 PageSpeed Insights 一测，”适当调整图片尺寸”和”以新一代格式提供图片”两条建议扣掉三四十分。更麻烦的是，几个月后换了主题，新主题的缩略图尺寸和旧的不一致，列表页图片全是拉伸变形的。

图片问题的特殊性在于：它是唯一一个”内容、性能、SEO、视觉”四个维度都会出问题的资源。尺寸不对影响性能，格式不对影响体积，命名不对影响是否收录，alt 缺失影响无障碍与图片搜索流量。靠”每次上传前手动压一下”解决不了，必须做成流程：定规范 → 批量压缩 → 自动转换格式 → 上传后自动裁切 → 定期清理无用尺寸。本文按这条流水线讲。

原理分析：体积、尺寸、格式是三件不同的事

很多人以为”压缩”就是缩小文件体积，其实要分开处理三个变量。文件体积由像素总量 × 编码格式 × 压缩质量共同决定；显示尺寸由主题注册的 add_image_size() 档位决定；格式决定了同等画质下能压到多小。只改其中一个，效果都有限。

WordPress 上传时会自动生成三档默认缩略图（thumbnail 150×150、medium 最大边 768、medium_large 最大边 768 宽度、large 最大边 1024），再加上主题自己注册的若干档位。自 WordPress 5.3 起还有 big_image_size_threshold 过滤器，默认把超过 2560px 的原图缩放一遍，避免原图直接进库。换主题后旧图不会自动裁出新尺寸，必须重新生成。

格式选择的原则是：照片用 JPG 或 WebP，带大面积纯色/文字的图形用 PNG 或 SVG，动图用 GIF 或转 WebP 动图/短视频。WebP 相比同等画质 JPG 通常能再省 25%–35%，自 WordPress 5.8 起后台已原生支持上传 .webp 文件，剩下的只是把历史图片批量转一遍。

保姆级实操

1. 先定规范，写在团队文档里

规定三个硬指标：所有上传图最长边不超过 1920px；文件名只允许小写字母、数字、连字符；每张图必填 alt。这三条规定能省掉后续 90% 的返工。

2. 上传前用命令行批量处理

本地拿到素材后不要直接拖进后台，先用命令行统一处理，这一步比任何插件都可控：

# 1) 批量缩放：最长边压到 1920，等比缩放（ImageMagick）
magick mogrify -path ./out -resize "1920x1920>" -quality 82 ./*.jpg

# 2) 转成 WebP，质量 80（cwebp，Google 官方工具）
for f in ./out/*.jpg; do cwebp -q 80 "$f" -o "${f%.jpg}.webp"; done

# 3) PNG 转 WebP（有损压缩，透明通道保留）
cwebp -q 80 -lossless=false ./logo.png -o ./logo.webp

# 4) 查看单张图信息，核对尺寸与体积
identify ./out/product-a.jpg

3. 命名与 alt 用过滤器兜底

上传时 WordPress 会用 sanitize_file_name 过滤器清理文件名，中文文件名会被转成百分号编码，URL 极长且不利于识别。挂一个过滤器统一处理：

<?php
// 上传前把文件名转为「拼音化 + 时间戳 + 随机串」，避免中文与重名
add_filter( 'sanitize_file_name', function ( $filename ) {
    // 去掉非 ASCII 字符，保留扩展名
    $info = pathinfo( $filename );
    $ext  = isset( $info['extension'] ) ? '.' . strtolower( $info['extension'] ) : '';
    $name = sanitize_title_with_dashes( remove_accents( $info['filename'] ) );
    if ( empty( $name ) ) {
        $name = 'image-' . time() . '-' . wp_generate_password( 4, false );
    }
    return $name . $ext;
}, 10, 1 );

// 控制 JPEG 压缩质量，默认 82，压到 78 通常肉眼看不出差别
add_filter( 'jpeg_quality', function () { return 78; } );
add_filter( 'wp_editor_set_quality', function () { return 78; } );

4. 历史图片批量转换与重新生成缩略图

装好压缩插件（ShortPixel、Imagify、EWWW Image Optimizer 或 Smush 任选一个），在设置里勾选”同时生成 WebP 副本”与”前台用 <picture> 输出 WebP”。插件只能处理新上传的图，历史图片要点一次 Bulk Optimize。换主题后，用 WP-CLI 重新生成所有缩略图档位：

# 重新生成全部缩略图（只生成缺的加 --only-missing 更快）
wp media regenerate --yes --only-missing

# 只重生成某几张
wp media regenerate 123 456 --yes

# 列出超过 500KB 的附件，定位"体积异常户"
wp post list --post_type=attachment --fields=ID,post_title --format=table

5. 按位置输出正确尺寸

前台模板里不要直接用 the_post_thumbnail() 不带参数，那会输出 large 甚至原图。明确指定档位，并让浏览器按屏幕挑：

// functions.php：注册列表页专用尺寸
add_image_size( 'card-thumb', 600, 400, true ); // 第 4 个参数 true = 硬裁切

// 模板里输出，srcset 由 WordPress 自动生成
the_post_thumbnail( 'card-thumb', array(
    'alt'   => get_the_title(),
    'class' => 'card-img',
    // 首屏图不要 lazy-load，非首屏图交给浏览器原生懒加载
    'loading' => 'lazy',
) );

6. 清理无用尺寸

主题换过几次后，媒体库目录里会堆出大量用不到的裁切副本。先统计一下：wp eval "echo count(get_children(array('post_type'=>'attachment')));"，再用媒体清理类插件（如 Media Cleaner）扫描”未被任何文章引用且不在任何尺寸档位内”的文件，确认后删除。删之前务必做一次完整备份。

常见踩坑

• 只压了图片，没改前台输出的尺寸：文件从 4MB 压到 300KB，但模板里仍在输出 2560px 原图，LCP 一点没变。
• 案例：某站点开启插件的 WebP 功能后，前台图片全部 404。原因是 CDN 缓存了旧的 HTML 且规则里只放行 jpg/png/jpeg，WebP 请求被拦截。解决方式是在 CDN 缓存规则里补上 .webp 扩展名，并刷新一次缓存。
• SVG 直接上传导致安全告警：WordPress 默认不允许上传 SVG（The uploaded file could not be moved 或 “抱歉，出于安全原因，该文件类型不受支持”），因为 SVG 可内嵌脚本。确需上传就用 Safe SVG 插件做净化，或改成图标字体。
• 把 big_image_size_threshold 设成 false：原图 6000px 全部入库，磁盘三个月就被撑满，备份时间翻倍。
• 换主题后忘了 wp media regenerate：新主题的 16:9 缩略图档位取不到文件，WordPress 会退而使用更大的原图，速度反而更慢。
• alt 属性留空或写成 “image01”：图片搜索流量基本归零，也影响无障碍。alt 应描述图片内容，装饰性图片用 alt=""。
• 用中文文件名上传：URL 变成 %e4%ba%a7%e5%93%81%e5%9b%be1.jpg，分享出去极难看，也影响 栏目命名与 URL 规划 里讲的整体一致性。

总结

图片流程的判断标准是三个数字：首屏图 ≤200KB、全站图片总量 ≤10MB/页、WebP 覆盖率 ≥90%。达不到的先查是不是输出尺寸没指定，再查是不是历史图没批量转换。日常只需守住两条纪律：上传前跑一次命令行缩放、换主题后跑一次 wp media regenerate。把这些做完，再配合 网站移动端适配的验收标准 检查小屏下的图片裁切效果，基本不会再出现”图好看但站很慢”的情况。