WordPress 6.1 からのメディアライブラリへの webp 追加とそれに関連する新規フィルターについて

はじめに

WordPress 6.1-alpha-53838 より、メディアライブラリへの jpeg 画像の追加時に、webp 画像が同時に生成されるようになりました。ファイル名の後に、拡張子.webp が付与されます。例えば、abc.jpg だったら、 abc-jpg.webp というファイル名になります。またサムネイルも同時に生成されます。

新規に３つフィルターが付与されたので、フィルターの動作検証を簡単に行いました。

wp_image_sizes_with_additional_mime_type_support フィルター

このフィルターが一番使う事が多いのではないかと思います。前述の様に同時に webp ファイルを生成するのでディスク容量が気になる場合には、不要なサイズの webp ファイルの生成を抑制できます。以下のコード例では、medium_large, large の生成を抑制しています。

/**
 * Filter the sizes that support secondary mime type output. Developers can use this
 * to control the output of additional mime type sub-sized images.
 *
 * @since 6.1.0
 *
 * @param array $enabled_sizes Map of size names and whether they support secondary mime type output.
 * @param int   $attachment_id Attachment ID.
 */
function control_enabled_size_add_mimetype( $enabled_sizes, $attachment_id ) {
	$enabled_sizes = array(
		'thumbnail'      => true,
		'medium'         => false,
		'medium_large'   => false,
		'large'          => true,
		'post-thumbnail' => true,
	);
	return $enabled_sizes;
}
add_filter( 'wp_image_sizes_with_additional_mime_type_support', 'control_enabled_size_add_mimetype', 10, 2 );

wp_upload_image_mime_transforms フィルター

そもそも、webp など生成したくないとういう場合にはこのフィルターを以下のコードの例の様に使う事ができます。

/**
 * Filter the output mime types for a given input mime type and image size.
 *
 * @since 6.1.0
 *
 * @param array  $image_mime_transforms A map with the valid mime transforms where the key is the source file mime type
 *                                      and the value is one or more mime file types to generate.
 * @param int    $attachment_id         The ID of the attachment where the hook was dispatched.
 */
function control_mime_type( $image_mime_transforms, $attachment_id ) {
	$image_mime_transforms = array();
	return $image_mime_transforms;
}
add_filter( 'wp_upload_image_mime_transforms', 'control_mime_type', 10, 2 );

wp_content_image_mimes フィルター

WordPress 6.1 からはデフォルトでフロントエンドで画像の表示が webp になってしまいます。具体的なコード例を以下に示します。

 <figure class="wp-block-image size-large"><img decoding="async" width="1024" height="683" src="https://riverforest.test/wordpress/wp-content/uploads/photos/landscape-4616951-1024x683-jpg.webp" alt="" class="wp-image-2244" srcset="https://riverforest.test/wordpress/wp-content/uploads/photos/landscape-4616951-1024x683-jpg.webp 1024w, https://riverforest.test/wordpress/wp-content/uploads/photos/landscape-4616951-300x200-jpg.webp 300w, https://riverforest.test/wordpress/wp-content/uploads/photos/landscape-4616951-768x512-jpg.webp 768w, https://riverforest.test/wordpress/wp-content/uploads/photos/landscape-4616951-1536x1024.jpg 1536w, https://riverforest.test/wordpress/wp-content/uploads/photos/landscape-4616951-2048x1365.jpg 2048w, https://riverforest.test/wordpress/wp-content/uploads/photos/landscape-4616951-1568x1045-jpg.webp 1568w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>

このようにしたく無い場合、例えば、jpeg の画像を優先して表示させたい場合に使うコードの例が以下の様になります。

/**
 * Filter the content image mime type output selection and order.
 *
 * When outputting images in the content, the first mime type available will be used.
 *
 * @since 6.1.0
 *
 * @param array  $target_mimes  The image output mime type and order. Default is array( 'image/webp', 'image/jpeg' ).
 * @param int    $attachment_id The attachment ID.
 * @param string $context       Additional context to pass to the filters.
 * @return array The filtered output mime type and order. Return an empty array to skip mime type substitution.
 * wp-includes/functions.php
 */
function control_frontend_mime_type( $target_mimes, $attachment_id, $context ) {
	$target_mimes = array( 'image/jpeg', 'image/webp' );
	return $target_mimes;
}
add_filter( 'wp_content_image_mimes', 'control_frontend_mime_type', 10, 3 );

この様にすると、先ほどの出力コードが以下のように変わります。

<figure class="wp-block-image size-large"><img decoding="async" width="1024" height="683" src="https://riverforest.test/wordpress/wp-content/uploads/photos/landscape-4616951-1024x683.jpg" alt="" class="wp-image-2244" srcset="https://riverforest.test/wordpress/wp-content/uploads/photos/landscape-4616951-1024x683.jpg 1024w, https://riverforest.test/wordpress/wp-content/uploads/photos/landscape-4616951-300x200.jpg 300w, https://riverforest.test/wordpress/wp-content/uploads/photos/landscape-4616951-768x512.jpg 768w, https://riverforest.test/wordpress/wp-content/uploads/photos/landscape-4616951-1536x1024.jpg 1536w, https://riverforest.test/wordpress/wp-content/uploads/photos/landscape-4616951-2048x1365.jpg 2048w, https://riverforest.test/wordpress/wp-content/uploads/photos/landscape-4616951-1568x1045.jpg 1568w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>