// Setup the default 'sizes' attribute.
$sizes = sprintf( '(max-width: %1$dpx) 100vw, %1$dpx', $width );
* Filters the output of 'wp_calculate_image_sizes()'.
* @param string $sizes A source size value for use in a 'sizes' attribute.
* @param string|int[] $size Requested image size. Can be any registered image size name, or
* an array of width and height values in pixels (in that order).
* @param string|null $image_src The URL to the image file or null.
* @param array|null $image_meta The image meta data as returned by wp_get_attachment_metadata() or null.
* @param int $attachment_id Image attachment ID of the original image or 0.
return apply_filters( 'wp_calculate_image_sizes', $sizes, $size, $image_src, $image_meta, $attachment_id );
* Determines if the image meta data is for the image source file.
* The image meta data is retrieved by attachment post ID. In some cases the post IDs may change.
* For example when the website is exported and imported at another website. Then the
* attachment post IDs that are in post_content for the exported website may not match
* the same attachments at the new website.
* @param string $image_location The full path or URI to the image file.
* @param array $image_meta The attachment meta data as returned by 'wp_get_attachment_metadata()'.
* @param int $attachment_id Optional. The image attachment ID. Default 0.
* @return bool Whether the image meta is for this image file.
function wp_image_file_matches_image_meta( $image_location, $image_meta, $attachment_id = 0 ) {
// Ensure the $image_meta is valid.
if ( isset( $image_meta['file'] ) && strlen( $image_meta['file'] ) > 4 ) {
// Remove quiery args if image URI.
list( $image_location ) = explode( '?', $image_location );
// Check if the relative image path from the image meta is at the end of $image_location.
if ( strrpos( $image_location, $image_meta['file'] ) === strlen( $image_location ) - strlen( $image_meta['file'] ) ) {
// Retrieve the uploads sub-directory from the full size image.
$dirname = _wp_get_attachment_relative_path( $image_meta['file'] );
$dirname = trailingslashit( $dirname );
if ( ! empty( $image_meta['original_image'] ) ) {
$relative_path = $dirname . $image_meta['original_image'];
if ( strrpos( $image_location, $relative_path ) === strlen( $image_location ) - strlen( $relative_path ) ) {
if ( ! $match && ! empty( $image_meta['sizes'] ) ) {
foreach ( $image_meta['sizes'] as $image_size_data ) {
$relative_path = $dirname . $image_size_data['file'];
if ( strrpos( $image_location, $relative_path ) === strlen( $image_location ) - strlen( $relative_path ) ) {
* Filters whether an image path or URI matches image meta.
* @param bool $match Whether the image relative path from the image meta
* matches the end of the URI or path to the image file.
* @param string $image_location Full path or URI to the tested image file.
* @param array $image_meta The image meta data as returned by 'wp_get_attachment_metadata()'.
* @param int $attachment_id The image attachment ID or 0 if not supplied.
return apply_filters( 'wp_image_file_matches_image_meta', $match, $image_location, $image_meta, $attachment_id );
* Determines an image's width and height dimensions based on the source file.
* @param string $image_src The image source file.
* @param array $image_meta The image meta data as returned by 'wp_get_attachment_metadata()'.
* @param int $attachment_id Optional. The image attachment ID. Default 0.
* @return array|false Array with first element being the width and second element being the height,
* or false if dimensions cannot be determined.
function wp_image_src_get_dimensions( $image_src, $image_meta, $attachment_id = 0 ) {
// Is it a full size image?
isset( $image_meta['file'] ) &&
strpos( $image_src, wp_basename( $image_meta['file'] ) ) !== false
(int) $image_meta['width'],
(int) $image_meta['height'],
if ( ! $dimensions && ! empty( $image_meta['sizes'] ) ) {
$src_filename = wp_basename( $image_src );
foreach ( $image_meta['sizes'] as $image_size_data ) {
if ( $src_filename === $image_size_data['file'] ) {
(int) $image_size_data['width'],
(int) $image_size_data['height'],
* Filters the 'wp_image_src_get_dimensions' value.
* @param array|false $dimensions Array with first element being the width
* and second element being the height, or
* false if dimensions could not be determined.
* @param string $image_src The image source file.
* @param array $image_meta The image meta data as returned by
* 'wp_get_attachment_metadata()'.
* @param int $attachment_id The image attachment ID. Default 0.
return apply_filters( 'wp_image_src_get_dimensions', $dimensions, $image_src, $image_meta, $attachment_id );
* Adds 'srcset' and 'sizes' attributes to an existing 'img' element.
* @see wp_calculate_image_srcset()
* @see wp_calculate_image_sizes()
* @param string $image An HTML 'img' element to be filtered.
* @param array $image_meta The image meta data as returned by 'wp_get_attachment_metadata()'.
* @param int $attachment_id Image attachment ID.
* @return string Converted 'img' element with 'srcset' and 'sizes' attributes added.
function wp_image_add_srcset_and_sizes( $image, $image_meta, $attachment_id ) {
// Ensure the image meta exists.
if ( empty( $image_meta['sizes'] ) ) {
$image_src = preg_match( '/src="([^"]+)"/', $image, $match_src ) ? $match_src[1] : '';
list( $image_src ) = explode( '?', $image_src );
// Return early if we couldn't get the image source.
// Bail early if an image has been inserted and later edited.
if ( preg_match( '/-e[0-9]{13}/', $image_meta['file'], $img_edit_hash ) &&
strpos( wp_basename( $image_src ), $img_edit_hash[0] ) === false ) {
$width = preg_match( '/ width="([0-9]+)"/', $image, $match_width ) ? (int) $match_width[1] : 0;
$height = preg_match( '/ height="([0-9]+)"/', $image, $match_height ) ? (int) $match_height[1] : 0;
if ( $width && $height ) {
$size_array = array( $width, $height );
$size_array = wp_image_src_get_dimensions( $image_src, $image_meta, $attachment_id );
$srcset = wp_calculate_image_srcset( $size_array, $image_src, $image_meta, $attachment_id );
// Check if there is already a 'sizes' attribute.
$sizes = strpos( $image, ' sizes=' );
$sizes = wp_calculate_image_sizes( $size_array, $image_src, $image_meta, $attachment_id );
if ( $srcset && $sizes ) {
// Format the 'srcset' and 'sizes' string and escape attributes.
$attr = sprintf( ' srcset="%s"', esc_attr( $srcset ) );
if ( is_string( $sizes ) ) {
$attr .= sprintf( ' sizes="%s"', esc_attr( $sizes ) );
// Add the srcset and sizes attributes to the image markup.
return preg_replace( '/<img ([^>]+?)[\/ ]*>/', '<img $1' . $attr . ' />', $image );
* Determines whether to add the `loading` attribute to the specified tag in the specified context.
* @since 5.7.0 Now returns `true` by default for `iframe` tags.
* @param string $tag_name The tag name.
* @param string $context Additional context, like the current filter name
* or the function name from where this was called.
* @return bool Whether to add the attribute.
function wp_lazy_loading_enabled( $tag_name, $context ) {
// By default add to all 'img' and 'iframe' tags.
// See https://html.spec.whatwg.org/multipage/embedded-content.html#attr-img-loading
// See https://html.spec.whatwg.org/multipage/iframe-embed-object.html#attr-iframe-loading
$default = ( 'img' === $tag_name || 'iframe' === $tag_name );
* Filters whether to add the `loading` attribute to the specified tag in the specified context.
* @param bool $default Default value.
* @param string $tag_name The tag name.
* @param string $context Additional context, like the current filter name
* or the function name from where this was called.
return (bool) apply_filters( 'wp_lazy_loading_enabled', $default, $tag_name, $context );
* Filters specific tags in post content and modifies their markup.
* Modifies HTML tags in post content to include new browser and HTML technologies
* that may not have existed at the time of post creation. These modifications currently
* include adding `srcset`, `sizes`, and `loading` attributes to `img` HTML tags, as well
* as adding `loading` attributes to `iframe` HTML tags.
* Future similar optimizations should be added/expected here.
* @since 5.7.0 Now supports adding `loading` attributes to `iframe` tags.
* @see wp_img_tag_add_width_and_height_attr()
* @see wp_img_tag_add_srcset_and_sizes_attr()
* @see wp_img_tag_add_loading_attr()
* @see wp_iframe_tag_add_loading_attr()
* @param string $content The HTML content to be filtered.
* @param string $context Optional. Additional context to pass to the filters.
* Defaults to `current_filter()` when not set.
* @return string Converted content with images modified.
function wp_filter_content_tags( $content, $context = null ) {
if ( null === $context ) {
$context = current_filter();
$add_img_loading_attr = wp_lazy_loading_enabled( 'img', $context );
$add_iframe_loading_attr = wp_lazy_loading_enabled( 'iframe', $context );
if ( ! preg_match_all( '/<(img|iframe)\s[^>]+>/', $content, $matches, PREG_SET_ORDER ) ) {
// List of the unique `img` tags found in $content.
// List of the unique `iframe` tags found in $content.
foreach ( $matches as $match ) {
list( $tag, $tag_name ) = $match;
if ( preg_match( '/wp-image-([0-9]+)/i', $tag, $class_id ) ) {
$attachment_id = absint( $class_id[1] );
// If exactly the same image tag is used more than once, overwrite it.
// All identical tags will be replaced later with 'str_replace()'.
$images[ $tag ] = $attachment_id;
// Reduce the array to unique attachment IDs.
$attachment_ids = array_unique( array_filter( array_values( $images ) ) );
if ( count( $attachment_ids ) > 1 ) {
* Warm the object cache with post and meta information for all found
* images to avoid making individual database calls.
_prime_post_caches( $attachment_ids, false, true );
foreach ( $images as $image => $attachment_id ) {
$filtered_image = $image;
// Add 'width' and 'height' attributes if applicable.
if ( $attachment_id > 0 && false === strpos( $filtered_image, ' width=' ) && false === strpos( $filtered_image, ' height=' ) ) {
$filtered_image = wp_img_tag_add_width_and_height_attr( $filtered_image, $context, $attachment_id );
// Add 'srcset' and 'sizes' attributes if applicable.
if ( $attachment_id > 0 && false === strpos( $filtered_image, ' srcset=' ) ) {
$filtered_image = wp_img_tag_add_srcset_and_sizes_attr( $filtered_image, $context, $attachment_id );
// Add 'loading' attribute if applicable.
if ( $add_img_loading_attr && false === strpos( $filtered_image, ' loading=' ) ) {
$filtered_image = wp_img_tag_add_loading_attr( $filtered_image, $context );
if ( $filtered_image !== $image ) {
$content = str_replace( $image, $filtered_image, $content );
foreach ( $iframes as $iframe => $attachment_id ) {
$filtered_iframe = $iframe;
// Add 'loading' attribute if applicable.
if ( $add_iframe_loading_attr && false === strpos( $filtered_iframe, ' loading=' ) ) {
$filtered_iframe = wp_iframe_tag_add_loading_attr( $filtered_iframe, $context );
if ( $filtered_iframe !== $iframe ) {
$content = str_replace( $iframe, $filtered_iframe, $content );
* Adds `loading` attribute to an `img` HTML tag.
* @param string $image The HTML `img` tag where the attribute should be added.
* @param string $context Additional context to pass to the filters.
* @return string Converted `img` tag with `loading` attribute added.
function wp_img_tag_add_loading_attr( $image, $context ) {
// Images should have source and dimension attributes for the `loading` attribute to be added.
if ( false === strpos( $image, ' src="' ) || false === strpos( $image, ' width="' ) || false === strpos( $image, ' height="' ) ) {
* Filters the `loading` attribute value to add to an image. Default `lazy`.
* Returning `false` or an empty string will not add the attribute.
* Returning `true` will add the default value.
* @param string|bool $value The `loading` attribute value. Returning a falsey value will result in
* the attribute being omitted for the image. Default 'lazy'.
* @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_loading_attr', 'lazy', $image, $context );
if ( ! in_array( $value, array( 'lazy', 'eager' ), true ) ) {
return str_replace( '<img', '<img loading="' . esc_attr( $value ) . '"', $image );
* Adds `width` and `height` attributes to an `img` HTML tag.
* @param string $image The HTML `img` tag where the attribute should be added.
* @param string $context Additional context to pass to the filters.
* @param int $attachment_id Image attachment ID.
* @return string Converted 'img' element with 'width' and 'height' attributes added.
function wp_img_tag_add_width_and_height_attr( $image, $context, $attachment_id ) {
$image_src = preg_match( '/src="([^"]+)"/', $image, $match_src ) ? $match_src[1] : '';
list( $image_src ) = explode( '?', $image_src );
// Return early if we couldn't get the image source.
* Filters whether to add the missing `width` and `height` HTML attributes to the img tag. Default `true`.
* Returning anything else than `true` will not add the attributes.
* @param bool $value The filtered value, defaults to `true`.
* @param string $image The HTML `img` tag where the attribute should be added.
* @param string $context Additional context about how the function was called or where the img tag is.
* @param int $attachment_id The image attachment ID.
$add = apply_filters( 'wp_img_tag_add_width_and_height_attr', true, $image, $context, $attachment_id );
$image_meta = wp_get_attachment_metadata( $attachment_id );
$size_array = wp_image_src_get_dimensions( $image_src, $image_meta, $attachment_id );
$hw = trim( image_hwstring( $size_array[0], $size_array[1] ) );
return str_replace( '<img', "<img {$hw}", $image );
* Adds `srcset` and `sizes` attributes to an existing `img` HTML tag.
* @param string $image The HTML `img` tag where the attribute should be added.
* @param string $context Additional context to pass to the filters.
* @param int $attachment_id Image attachment ID.
* @return string Converted 'img' element with 'loading' attribute added.
function wp_img_tag_add_srcset_and_sizes_attr( $image, $context, $attachment_id ) {
* Filters whether to add the `srcset` and `sizes` HTML attributes to the img tag. Default `true`.
* Returning anything else than `true` will not add the attributes.
* @param bool $value The filtered value, defaults to `true`.
* @param string $image The HTML `img` tag where the attribute should be added.
* @param string $context Additional context about how the function was called or where the img tag is.
* @param int $attachment_id The image attachment ID.
$add = apply_filters( 'wp_img_tag_add_srcset_and_sizes_attr', true, $image, $context, $attachment_id );
$image_meta = wp_get_attachment_metadata( $attachment_id );
return wp_image_add_srcset_and_sizes( $image, $image_meta, $attachment_id );
* Adds `loading` attribute to an `iframe` HTML tag.
* @param string $iframe The HTML `iframe` tag where the attribute should be added.
* @param string $context Additional context to pass to the filters.
* @return string Converted `iframe` tag with `loading` attribute added.
function wp_iframe_tag_add_loading_attr( $iframe, $context ) {
// Iframes with fallback content (see `wp_filter_oembed_result()`) should not be lazy-loaded because they are
// visually hidden initially.
if ( false !== strpos( $iframe, ' data-secret="' ) ) {
// Iframes should have source and dimension attributes for the `loading` attribute to be added.
if ( false === strpos( $iframe, ' src="' ) || false === strpos( $iframe, ' width="' ) || false === strpos( $iframe, ' height="' ) ) {
It is recommended that you Edit text format, this type of Fix handles quite a lot in one request
