WordPress 使用 GD 图像引擎以编程方式将图像转换为 WebP 格式

有许多 PHP 解决方案和 WP 插件，它们都带有我不想要/不需要的附加选项，即如何提供转换后的文件、存储它们的位置等。

我不需要所有这些，并且正在寻找使用 GD 的纯简单代码。我不想使用插件，谢谢。

1. 编码应该什么时候发生？任何时候你知道这是钩例程中的一个好点，可能是这样https://make.wordpress.org/core/2019/11/05/use-of-the-wp_update_attachment_metadata-filter-as-upload-is-complete-hook/ https://make.wordpress.org/core/2019/11/05/use-of-the-wp_update_attachment_metadata-filter-as-upload-is-complete-hook/但如果您更了解或有其他解决方案，请使用它，并可能让我知道您为什么选择另一个钩子。也就是说，如果更好的话，一旦上传新图像，我也很乐意触发 cron 作业。另外，我不需要在 WP 数据库中拥有转换后图像的元数据，拥有原始图像就可以了.jpeg媒体库中的文件及其元数据.webp文件只是在里面使用picture元素。

2. 转换后的文件应该存储在哪里？wp-content/uploads/默认文件夹结构，.webp文件应该位于.jpeg文件都在里面。

3. 应使用GD图像引擎进行转换。https://developer.wordpress.org/reference/classes/wp_image_editor_gd/ https://developer.wordpress.org/reference/classes/wp_image_editor_gd/最近我发现 imagick 总是崩溃或者需要很长时间才能做任何事情。在 WP 5.2 中，imagick 仍然可以正常工作，但一定发生了一些变化，使得在 WP 的更高版本中使用 imagick 毫无用处。我发现 GD 对我来说非常稳定和快速，它创建有损的 WebP 版本并不重要。 WP 的 GD 图像引擎的方法似乎不包括转换/编码https://developer.wordpress.org/reference/classes/wp_image_editor_gd/#methods https://developer.wordpress.org/reference/classes/wp_image_editor_gd/#methods所以我也对 GD 模块中使用的任何方法感到满意https://www.php.net/manual/en/book.image.php https://www.php.net/manual/en/book.image.php关于 WebP 的编码。

4. 为了摆脱随着时间的推移引入的所有额外不需要的图像尺寸和选项 WP，我在其中添加了这些功能/过滤器functions.php.

function namespace_disable_image_sizes($sizes)
{
    unset($sizes['thumbnail']);    // disable thumbnail size
    unset($sizes['medium']);       // disable medium size
    unset($sizes['large']);        // disable large size
    unset($sizes['medium_large']); // disable medium-large size
    unset($sizes['1536x1536']);    // disable 2x medium-large size
    unset($sizes['2048x2048']);    // disable 2x large size

    return $sizes;
}
add_action('intermediate_image_sizes_advanced', 'namespace_disable_image_sizes');

// disable scaled image size
add_filter('big_image_size_threshold', '__return_false');

// disable rotated image size
add_filter('wp_image_maybe_exif_rotate', '__return_false');

// disable other image sizes
function namespace_disable_other_image_sizes()
{
    remove_image_size('post-thumbnail'); // disable images added via set_post_thumbnail_size()
    remove_image_size('another-size');   // disable any other added image sizes
}
add_action('init', 'namespace_disable_other_image_sizes');

5. 需要转换高分辨率和大尺寸图像，请参见附图作为示例，图像类型可以是jpeg, png, etc.

6. 现有的尺寸或多或少都是这些，可能会有变化。

add_image_size('4096w', 4096, 0);
add_image_size('3200w', 3200, 0);
add_image_size('2560w', 2560, 0);
add_image_size('1920w', 1920, 0);
add_image_size('1600w', 1600, 0);
add_image_size('1280w', 1280, 0);
add_image_size('1140w', 1140, 0);
add_image_size('1024w', 1024, 0);
add_image_size('960w', 960, 0);
add_image_size('800w', 800, 0);
add_image_size('768w', 768, 0);
add_image_size('640w', 640, 0);
add_image_size('425w', 425, 0);
add_image_size('320w', 320, 0);
add_image_size('240w', 240, 0);

7. 我用picture元素或多或少具有以下设置，因此我让浏览器决定需要什么，因此不需要/不需要服务器端.htaccess规则或后端配置。https://dev.opera.com/articles/responsive-images/ https://dev.opera.com/articles/responsive-images/

<picture>
    <source
        sizes="(min-width: 640px) 60vw, 100vw"
        srcset="opera-200.webp 200w,
                opera-400.webp 400w,
                opera-800.webp 800w,
                opera-1200.webp 1200w,
                opera-1600.webp 1600w,
                opera-2000.webp 2000w"
        type="image/webp">
    <img
        src="opera-400.jpg" alt="The Oslo Opera House"
        sizes="(min-width: 640px) 60vw, 100vw"
        srcset="opera-200.jpg 200w,
                opera-400.jpg 400w,
                opera-800.jpg 800w,
                opera-1200.jpg 1200w,
                opera-1600.jpg 1600w,
                opera-2000.jpg 2000w">
</picture>

8. 我尝试了什么？ A）https://wordpress.stackexchange.com/questions/256351/hook-after-image-is-uploaded-and-image-sizes- generated/256352 https://wordpress.stackexchange.com/questions/256351/hook-after-image-is-uploaded-and-image-sizes-generated/256352 b) https://wordpress.stackexchange.com/questions/38582/hook-to-get-image-filename-when-it-is-uploaded https://wordpress.stackexchange.com/questions/38582/hook-to-get-image-filename-when-it-is-uploaded c) WordPress - 上传时模糊图像 https://stackoverflow.com/questions/34377231/wordpress-blur-image-on-upload d) 将图像转换为 WebP https://stackoverflow.com/questions/66815672/convert-images-into-webpe) 我已通读并理解https://kinsta.com/blog/wordpress-hooks/#filters-example-2-insert-content-after-a-post https://kinsta.com/blog/wordpress-hooks/#filters-example-2-insert-content-after-a-post - however我缺少的是一种方法see/know我正在处理哪些数据，即

add_filter('wp_generate_attachment_metadata', 'gd_webp_encode', 10, 3);
function gd_webp_encode($metadata, $attachment_id, $context){
    ob_start();
    echo $attachment_id;
    echo $metadata;
    ob_end_clean();
    return $metadata;
}

不会向我显示任何内容，与尝试登录到控制台或插件文件夹中的文件相同。在不知道/看到数据以及哪些变量名包含哪些数据的情况下，我只是在进行试验、错误和猜测，没有编码。因此，给出上面的代码，首先如何才能查看/知道哪些变量在该时间点保存哪些数据并使其在某个地方可读，即在插件文件夹中的日志文件中？

底线是，上面的设置帮助我理解哪些变量保存哪些数据，即在挂钩中上传后，并包含代码，我可以在其中制作所有尺寸的 WebP 版本以及使用 GD 图像引擎创建的原始版本。

这两个插件都工作得很好（在上传目录中创建 webp 图像），但我想知道如何使用 wp 函数调用 webp 图像（get_the_post_thumbnail_url or wp_get_attachment_url).

在媒体中，您看不到 webp 图像，因此无法选择它们。