
近期对主题的图片进行了一些优化,考虑手机拍照和屏幕截图生成的图片像素都偏高,直接使用确实有些影响加载速度,感觉有必要对网站中的图片进行必要的优化。首选是恢复 WordPress 对大图的自动压缩功能,保持网站图片最大像素控制在 2560px 以下。然后对网站中的缩略图尺寸进行了一些优化调整,代码记录如下:
/** * 获取文章缩略图URL */ function get_thumbnail($width = 0, $height = 0, $_post = null, $url = null) { // 如果直接指定了图片URL if ($url) { // 将URL转换为附件ID $image_id = attachment_url_to_postid($url); if ($image_id) { $size = 'full'; // 根据宽高选择预定义的图片尺寸 if ($width == 600 && $height == 450) { $size = 'beauty-thumb'; // 收藏缩略图 } else if ($width <= 280) { $size = 'note-thumb'; // 笔记缩略图 } else if ($width <= 600) { $size = 'article-thumb'; // 文章缩略图 } else if ($width <= 1200) { $size = 'article-full'; // 文章全宽 } // 获取指定尺寸的图片 $image = wp_get_attachment_image_src($image_id, $size); return $image ? $image[0] : $url; } return $url; } // 处理当前文章对象 global $post; $_post = $_post ?: $post; // 尺寸选择逻辑同上 $size = 'full'; if ($width == 600 && $height == 450) { $size = 'beauty-thumb'; } else if ($width <= 280) { $size = 'note-thumb'; } else if ($width <= 600) { $size = 'article-thumb'; } else if ($width <= 1200) { $size = 'article-full'; } // 如果有特色图片 if (has_post_thumbnail($_post->ID)) { return get_the_post_thumbnail_url($_post->ID, $size); } // 从文章内容中提取第一个图片 preg_match_all('/<img.*?src=[\'"]([^\'"]+)[\'"].*?>/i', $_post->post_content, $matches); if (!empty($matches[1])) { $image_url = $matches[1][0]; // 尝试将图片URL转换为附件ID $image_id = attachment_url_to_postid($image_url); if ($image_id) { $image = wp_get_attachment_image_src($image_id, $size); return $image ? $image[0] : $image_url; } return $image_url; } return ''; } /** * 获取文章特色图片URL */ function get_post_thumbnail_url($post_id = null) { $post_id = $post_id ?: get_the_ID(); $thumbnail_id = get_post_thumbnail_id($post_id); if ($thumbnail_id) { $thumbnail = wp_get_attachment_image_src($thumbnail_id, 'full'); return $thumbnail[0] ?? false; } return false; } /** * 初始化设置 */ function biji_setup() { // 添加自定义图片尺寸 add_image_size('article-thumb', 600, 240, true); // 文章缩略图(强制裁剪) add_image_size('article-full', 1200, 0, false); // 文章全宽(不限制高度) add_image_size('note-thumb', 280, 200, true); // 笔记缩略图 add_image_size('beauty-thumb', 600, 450, false); // 收藏缩略图(保持比例) // 移除WordPress默认图片尺寸 remove_image_size('thumbnail'); remove_image_size('medium'); remove_image_size('medium_large'); remove_image_size('large'); remove_image_size('1536x1536'); remove_image_size('2048x2048'); } add_action('after_setup_theme', 'biji_setup'); /** * 禁用未使用的图片尺寸 */ function disable_unused_image_sizes($sizes) { unset($sizes['thumbnail']); unset($sizes['medium']); unset($sizes['medium_large']); unset($sizes['large']); unset($sizes['1536x1536']); unset($sizes['2048x2048']); return $sizes; } add_filter('intermediate_image_sizes_advanced', 'disable_unused_image_sizes');
同时使用并配置了 CompressX 插件,将网站的图片格式全部改用了 avif 格式。CompressX 是一款免费、轻量且简单的 WordPress 网站 Webp 和 AVIF 转换和压缩插件。它可以轻松地将 JPG 和 PNG 图像自动转换为 WebP 和 AVIF 格式。如果浏览器支持AVIF,则会加载AVIF图片。如果不支持AVIF,则会加载WebP图片。AVIF 和 WebP 转换在 Web 服务器上本地执行。


另外,再推荐一个 WordPress 插件《Force Regenerate Thumbnails 》这个插件可以对已经上传的图片强制重新生成缩略图并删除以前自动生成的用不到的缩略图。
