Add picture element support

plugins/webp-uploads/helper.php

@@ -384,3 +384,14 @@ function webp_uploads_get_image_output_format(): string {
 function webp_uploads_sanitize_image_format( string $image_format ): string {
 	return in_array( $image_format, array( 'webp', 'avif' ), true ) ? $image_format : 'webp';
 }
+
+/**
+ * Checks if the `webp_uploads_use_picture_element` option is enabled.
+ *
+ * @since n.e.x.t
+ *
+ * @return bool True if the option is enabled, false otherwise.
+ */
+function webp_uploads_is_picture_element_enabled(): bool {
+	return (bool) get_option( 'webp_uploads_use_picture_element', false );
+}

plugins/webp-uploads/hooks.php

@@ -569,7 +569,7 @@ function webp_uploads_update_image_references( string $content ): string {
 
 	return $content;
 }
-add_filter( 'the_content', 'webp_uploads_update_image_references', 10 );
+add_filter( 'the_content', 'webp_uploads_update_image_references', 13 ); // Run after wp_filter_content_tags.
 
 /**
  * Finds all the urls with *.jpg and *.jpeg extension and updates with *.webp version for the provided image
@@ -675,13 +675,14 @@ function webp_uploads_img_tag_update_mime_type( string $original_image, string $
 		}
 
 		if (
-			! has_action( 'wp_footer', 'webp_uploads_wepb_fallback' ) &&
+			! has_action( 'wp_footer', 'webp_uploads_webp_fallback' ) &&
 			$image !== $original_image &&
 			'the_content' === $context &&
 			'image/jpeg' === $original_mime &&
-			'image/' . webp_uploads_get_image_output_format() === $target_mime
+			'image/' . webp_uploads_get_image_output_format() === $target_mime &&
+			! webp_uploads_is_picture_element_enabled() // Don't enqueue fallback JS if picture enabled.
 		) {
-			add_action( 'wp_footer', 'webp_uploads_wepb_fallback' );
+			add_action( 'wp_footer', 'webp_uploads_webp_fallback' );
 		}
 	}
 
@@ -709,7 +710,7 @@ function webp_uploads_update_featured_image( string $html, int $post_id, int $at
  *
  * @since 1.0.0
  */
-function webp_uploads_wepb_fallback(): void {
+function webp_uploads_webp_fallback(): void {
 	// Get mime type transforms for the site.
 	$transforms   = webp_uploads_get_upload_image_mime_transforms();
 	$image_format = webp_uploads_get_image_output_format();
@@ -836,3 +837,7 @@ function webp_uploads_render_generator(): void {
 	echo '<meta name="generator" content="webp-uploads ' . esc_attr( WEBP_UPLOADS_VERSION ) . '">' . "\n";
 }
 add_action( 'wp_head', 'webp_uploads_render_generator' );
+
+if ( webp_uploads_is_picture_element_enabled() ) {
+	add_filter( 'wp_content_img_tag', 'webp_uploads_wrap_image_in_picture', 10, 3 );
+}

plugins/webp-uploads/load.php

@@ -32,5 +32,6 @@
 require_once __DIR__ . '/rest-api.php';
 require_once __DIR__ . '/image-edit.php';
 require_once __DIR__ . '/settings.php';
+require_once __DIR__ . '/picture-element.php';
 require_once __DIR__ . '/hooks.php';
 require_once __DIR__ . '/deprecated.php';

plugins/webp-uploads/picture-element.php

@@ -0,0 +1,154 @@
+<?php
+/**
+ * Add `picture` element support
+ *
+ * @package webp-uploads
+ *
+ * @since n.e.x.t
+ */
+
+/**
+ * Potentially wrap an image tag in a picture element.
+ *
+ * @since n.e.x.t
+ *
+ * @param string $image         The image tag.
+ * @param string $context       The context for the image tag.
+ * @param int    $attachment_id The attachment id.
+ *
+ * @return string The new image tag.
+ */
+function webp_uploads_wrap_image_in_picture( string $image, string $context, int $attachment_id ): string {
+	if ( 'the_content' !== $context ) {
+		return $image;
+	}
+	$image_meta              = wp_get_attachment_metadata( $attachment_id );
+	$original_file_mime_type = get_post_mime_type( $attachment_id );
+	if ( false === $original_file_mime_type || ! isset( $image_meta['sizes'] ) ) {
+		return $image;
+	}
+
+	// Collect all the sub size image mime types.
+	$mime_type_data = array();
+	foreach ( $image_meta['sizes'] as $size ) {
+		if ( isset( $size['sources'] ) && isset( $size['width'] ) && isset( $size['height'] ) ) {
+			foreach ( $size['sources'] as $mime_type => $data ) {
+				$mime_type_data[ $mime_type ]                         = $mime_type_data[ $mime_type ] ?? array();
+				$mime_type_data[ $mime_type ]['w'][ $size['width'] ]  = $data;
+				$mime_type_data[ $mime_type ]['h'][ $size['height'] ] = $data;
+			}
+		}
+	}
+	$sub_size_mime_types = array_keys( $mime_type_data );
+
+	/**
+	 * Filter the image mime types that can be used for the <picture> element.
+	 *
+	 * Default is: ['image/avif', 'image/webp', 'image/jpeg']. Returning an empty array will skip using the `picture` element.
+	 *
+	 * The mime types will output in the picture element in the order they are provided.
+	 * The original image will be used as the fallback image for browsers that don't support the picture element.
+	 *
+	 * @since n.e.x.t
+	 * @param string[] $mime_types    Mime types than can be used.
+	 * @param int      $attachment_id The id of the image being evaluated.
+	 */
+	$enabled_mime_types = (array) apply_filters(
+		'webp_uploads_picture_element_mime_types',
+		array(
+			'image/avif',
+			'image/webp',
+			'image/jpeg',
+		),
+		$attachment_id
+	);
+
+	$mime_types = array_intersect( $enabled_mime_types, $sub_size_mime_types );
+
+	// No eligible mime types.
+	if ( count( $mime_types ) === 0 ) {
+		return $image;
+	}
+
+	// If the original mime types is the only one available, no picture element is needed.
+	if ( 1 === count( $mime_types ) && current( $mime_types ) === $original_file_mime_type ) {
+		return $image;
+	}
+
+	// Add each mime type to the picture's sources.
+	$picture_sources = '';
+
+	// Extract sizes using regex to parse image tag, then use to retrieve tag.
+	$width     = 0;
+	$height    = 0;
+	$processor = new WP_HTML_Tag_Processor( $image );
+	if ( $processor->next_tag( array( 'tag_name' => 'IMG' ) ) ) {
+		$width  = (int) $processor->get_attribute( 'width' );
+		$height = (int) $processor->get_attribute( 'height' );
+	}
+	$size_to_use = ( $width > 0 && $height > 0 ) ? array( $width, $height ) : 'full';
+
+	$image_src = wp_get_attachment_image_src( $attachment_id, $size_to_use );
+	if ( false === $image_src ) {
+		return $image;
+	}
+	list( $src, $width, $height ) = $image_src;
+	$size_array                   = array( absint( $width ), absint( $height ) );
+
+	foreach ( $mime_types as $image_mime_type ) {
+		$sizes = wp_calculate_image_sizes( $size_array, $src, $image_meta, $attachment_id );
+		if ( false === $sizes ) {
+			continue;
+		}
+
+		// Filter core's wp_get_attachment_image_srcset to return the sources for the current mime type.
+		$filter = static function ( $sources ) use ( $mime_type_data, $image_mime_type ): array {
+			$filtered_sources = array();
+			foreach ( $sources as $source ) {
+				// Swap the URL for the current mime type.
+				if ( isset( $mime_type_data[ $image_mime_type ][ $source['descriptor'] ][ $source['value'] ] ) ) {
+					$filename           = $mime_type_data[ $image_mime_type ][ $source['descriptor'] ][ $source['value'] ]['file'];
+					$filtered_sources[] = array(
+						'url'        => dirname( $source['url'] ) . '/' . $filename,
+						'descriptor' => $source['descriptor'],
+						'value'      => $source['value'],
+					);
+				}
+			}
+			return $filtered_sources;
+		};
+		add_filter( 'wp_calculate_image_srcset', $filter );
+		$image_srcset = wp_get_attachment_image_srcset( $attachment_id, $size_array, $image_meta );
+		remove_filter( 'wp_calculate_image_srcset', $filter );
+		if ( false === $image_srcset ) {
+			continue;
+		}
+		$picture_sources .= sprintf(
+			'<source type="%s" srcset="%s" sizes="%s">',
+			esc_attr( $image_mime_type ),
+			esc_attr( $image_srcset ),
+			esc_attr( $sizes )
+		);
+	}
+
+	// Fall back to the original image without a srcset.
+	$original_sizes = array( $image_src[1], $image_src[2] );
+	$original_image = wp_get_original_image_url( $attachment_id );
+	// Fail gracefully if the original image is not found.
+	if ( false === $original_image ) {
+		return $image;
+	}
+	$filter = static function (): bool {
+		return false;
+	};
+	add_filter( 'wp_calculate_image_srcset_meta', $filter );
+	$original_image_without_srcset = wp_get_attachment_image( $attachment_id, $original_sizes, false, array( 'src' => $original_image ) );
+	remove_filter( 'wp_calculate_image_srcset_meta', $filter );
+
+	return sprintf(
+		'<picture class="%s">%s%s</picture>',
+		esc_attr( 'wp-picture-' . $attachment_id ),
+		$picture_sources,
+		$original_image_without_srcset
+	);
+}

plugins/webp-uploads/settings.php

@@ -41,6 +41,17 @@ function webp_uploads_register_media_settings_field(): void {
 			'show_in_rest' => false,
 		)
 	);
+	// Add a setting to use the picture element.
+	register_setting(
+		'media',
+		'webp_uploads_use_picture_element',
+		array(
+			'type'         => 'boolean',
+			// Use picture element by default if the theme declares support for it.
+			'default'      => current_theme_supports( 'html5', 'picture' ),
+			'show_in_rest' => false,
+		)
+	);
 }
 add_action( 'init', 'webp_uploads_register_media_settings_field' );
 
@@ -49,29 +60,49 @@ function webp_uploads_register_media_settings_field(): void {
  *
  * @since 1.0.0
  */
-function webp_uploads_add_media_settings_field(): void {
+function webp_uploads_add_media_settings_fields(): void {
+	add_settings_section(
+		'perflab_modern_image_format_settings',
+		__( 'Modern Image Formats', 'webp-uploads' ),
+		'__return_empty_string',
+		'media',
+		array(
+			'before_section' => '<div id="modern-image-formats">',
+			'after_section'  => '</div>',
+		)
+	);
 
 	// Add a dropdown to select the output format between AVIF and WebP output.
 	add_settings_field(
 		'perflab_modern_image_format',
-		__( 'Modern image format', 'webp-uploads' ),
+		__( 'Image output format', 'webp-uploads' ),
 		'webp_uploads_generate_avif_webp_setting_callback',
 		'media',
-		is_multisite() ? 'default' : 'uploads',
+		'perflab_modern_image_format_settings',
 		array( 'class' => 'perflab-generate-avif-and-webp' )
 	);
 
-	// Add settings field.
+	// Add JPEG Output settings field.
 	add_settings_field(
 		'perflab_generate_webp_and_jpeg',
 		__( 'Also output JPEG', 'webp-uploads' ),
 		'webp_uploads_generate_webp_jpeg_setting_callback',
 		'media',
-		is_multisite() ? 'default' : 'uploads',
+		'perflab_modern_image_format_settings',
 		array( 'class' => 'perflab-generate-webp-and-jpeg' )
 	);
+
+	// Add picture element support settings field.
+	add_settings_field(
+		'webp_uploads_use_picture_element',
+		__( 'Picture element', 'webp-uploads' ),
+		'webp_uploads_use_picture_element_callback',
+		'media',
+		'perflab_modern_image_format_settings',
+		array( 'class' => 'webp-uploads-use-picture-element' )
+	);
 }
-add_action( 'admin_init', 'webp_uploads_add_media_settings_field' );
+add_action( 'admin_init', 'webp_uploads_add_media_settings_fields' );
 
 /**
  * Renders the settings field for the 'perflab_modern_image_format' setting.
@@ -111,8 +142,8 @@ function webp_uploads_generate_avif_webp_setting_callback(): void {
  * @since 1.0.0
  */
 function webp_uploads_generate_webp_jpeg_setting_callback(): void {
-	?>
 
+	?>
 		<label for="perflab_generate_webp_and_jpeg">
 			<input name="perflab_generate_webp_and_jpeg" type="checkbox" id="perflab_generate_webp_and_jpeg" aria-describedby="perflab_generate_webp_and_jpeg_description" value="1"<?php checked( '1', get_option( 'perflab_generate_webp_and_jpeg' ) ); ?> />
 			<?php esc_html_e( 'Output JPEG images in addition to the modern format', 'webp-uploads' ); ?>
@@ -121,6 +152,22 @@ function webp_uploads_generate_webp_jpeg_setting_callback(): void {
 	<?php
 }
 
+/**
+ * Renders the settings field for the 'webp_uploads_use_picture_element' setting.
+ *
+ * @since n.e.x.t
+ */
+function webp_uploads_use_picture_element_callback(): void {
+	?>
+		<label for="webp_uploads_use_picture_element">
+			<input name="webp_uploads_use_picture_element" type="checkbox" id="webp_uploads_use_picture_element" aria-describedby="webp_uploads_use_picture_element_description" value="1"<?php checked( webp_uploads_is_picture_element_enabled() ); ?> />
+			<?php esc_html_e( 'Use <picture> Element', 'webp-uploads' ); ?>
+			<em><?php esc_html_e( '(experimental)', 'webp-uploads' ); ?></em>
+		</label>
+		<p class="description" id="webp_uploads_use_picture_element_description"><?php esc_html_e( 'The picture element serves a modern image format with a fallback to JPEG. Warning: Make sure you test your theme and plugins for compatibility. In particular, CSS selectors will not match images when using the child combinator (e.g. figure > img).', 'webp-uploads' ); ?></p>
+	<?php
+}
+
 /**
  * Adds a settings link to the plugin's action links.
  *
@@ -137,7 +184,7 @@ function webp_uploads_add_settings_action_link( $links ) {
 
 	$settings_link = sprintf(
 		'<a href="%1$s">%2$s</a>',
-		esc_url( admin_url( 'options-media.php#perflab_generate_webp_and_jpeg' ) ),
+		esc_url( admin_url( 'options-media.php#modern-image-formats' ) ),
 		esc_html__( 'Settings', 'webp-uploads' )
 	);
 

tests/plugins/webp-uploads/test-helper.php

@@ -9,7 +9,7 @@
 
 class Test_WebP_Uploads_Helper extends ImagesTestCase {
 
-	public function set_up() {
+	public function set_up(): void {
 		parent::set_up();
 		$this->set_image_output_type( 'webp' );
 	}

tests/plugins/webp-uploads/test-load.php

@@ -704,8 +704,6 @@ static function ( $editors ) {
 	 * Replace the featured image to the proper type when requesting the featured image.
 	 *
 	 * @dataProvider data_provider_supported_image_types
-	 *
-	 * @param string $image_type
 	 */
 	public function test_it_should_replace_the_featured_image_to_webp_when_requesting_the_featured_image( string $image_type ): void {
 		$mime_type = 'image/' . $image_type;
@@ -876,7 +874,7 @@ public function test_it_should_add_fallback_script_if_content_has_updated_images
 			)
 		);
 
-		$this->assertTrue( has_action( 'wp_footer', 'webp_uploads_wepb_fallback' ) === 10 );
+		$this->assertTrue( has_action( 'wp_footer', 'webp_uploads_webp_fallback' ) === 10 );
 
 		$footer = get_echo( 'wp_footer' );
 		$this->assertStringContainsString( 'webp;base64,UklGR', wp_unslash( $footer ) );
@@ -890,7 +888,7 @@ public function test_it_should_not_add_fallback_script_if_content_has_no_updated
 
 		apply_filters( 'the_content', '<p>no image</p>' );
 
-		$this->assertFalse( has_action( 'wp_footer', 'webp_uploads_wepb_fallback' ) );
+		$this->assertFalse( has_action( 'wp_footer', 'webp_uploads_webp_fallback' ) );
 
 		$footer = get_echo( 'wp_footer' );
 		$this->assertStringNotContainsString( 'webp;base64,UklGR', $footer );