wp_img_tag_add_decoding_attr()WP 6.1.0

Adds decoding attribute to an img HTML tag.

The decoding attribute allows developers to indicate whether the browser can decode the image off the main thread (async), on the main thread (sync) or as determined by the browser (auto).

By default WordPress adds decoding="async" to images but developers can use the wp_img_tag_add_decoding_attr filter to modify this to remove the attribute or set it to another accepted value.

Hooks from the function

Return

String. Converted img tag with decoding attribute added.

Usage

wp_img_tag_add_decoding_attr( $image, $context );
$image(string) (required)
The HTML img tag where the attribute should be added.
$context(string) (required)
Additional context to pass to the filters.

Changelog

Since 6.1.0 Introduced.

wp_img_tag_add_decoding_attr() code WP 6.1.1

function wp_img_tag_add_decoding_attr( $image, $context ) {
	// Only apply the decoding attribute to images that have a src attribute that
	// starts with a double quote, ensuring escaped JSON is also excluded.
	if ( false === strpos( $image, ' src="' ) ) {
		return $image;
	}

	/**
	 * Filters the `decoding` attribute value to add to an image. Default `async`.
	 *
	 * Returning a falsey value will omit the attribute.
	 *
	 * @since 6.1.0
	 *
	 * @param string|false|null $value   The `decoding` attribute value. Returning a falsey value
	 *                                   will result in the attribute being omitted for the image.
	 *                                   Otherwise, it may be: 'async' (default), 'sync', or 'auto'.
	 * @param string            $image   The HTML `img` tag to be filtered.
	 * @param string            $context Additional context about how the function was called
	 *                                   or where the img tag is.
	 */
	$value = apply_filters( 'wp_img_tag_add_decoding_attr', 'async', $image, $context );

	if ( in_array( $value, array( 'async', 'sync', 'auto' ), true ) ) {
		$image = str_replace( '<img ', '<img decoding="' . esc_attr( $value ) . '" ', $image );
	}

	return $image;
}