图片是网页中体积最大的资源,也是优化的最大空间所在。一个未优化的主题可能会加载数 MB 的图片,而优化后的主题可以控制在几百 KB 以内。本文介绍主题中图片优化的完整方案。

使用 add_image_size 生成多尺寸图片

在 functions.php 中使用 add_image_size 函数为不同场景生成不同尺寸的图片。指定图片名称、宽度、高度和裁剪模式。硬裁剪会严格按尺寸裁切,软裁剪会按比例缩放。WordPress 会在上传图片时自动生成所有已注册的图片尺寸。

响应式图片与 srcset

WordPress 从 4.4 版本开始自动为图片添加 srcset 属性,实现响应式图片。浏览器会根据屏幕宽度自动选择合适的图片尺寸。主题开发者可以通过 wp_calculate_image_srcset 过滤器调整 srcset 中的尺寸列表。

WebP 图片格式的启用

WebP 格式相比 JPEG 和 PNG 可以节省 25% 到 35% 的文件体积。从 WordPress 5.8 开始,系统已经支持 WebP 格式的上传和显示。主题开发者可以通过插件或代码实现自动格式转换。

对于现代浏览器,推荐优先使用 WebP 格式,同时保留 JPEG 和 PNG 作为后备。

懒加载的实现

懒加载让图片只在进入视口时才加载,可以显著减少初始页面加载时间。WordPress 从 5.5 版本开始自动为图片添加 loading="lazy" 属性。主题开发者可以自定义懒加载的阈值和行为。

图片的 Alt 文本

所有图片都应该有有意义的 Alt 文本,这既是无障碍访问的要求,也是 SEO 的重要部分。主题应该鼓励用户在媒体库中为每张图片填写 Alt 文本,并在前端正确输出。