wp_get_attachment_image_srcset() │ WP 4.4.0

Gets the value of the srcset attribute for the <img> tag. The value will contain the names of all sizes of the specified image in the format: image.jpg 1x, image-sm.jpg 640w.

The function retrieves all available sizes of this image by ID of the attachment and creates a string for the srcset attribute from the obtained data.

The function will return nothing if:

  • the specified image is an animated GIF image. In this case, it is impossible to obtain intermediate sizes.

  • it was possible to obtain only data for one intermediate size. At least two are needed for srcset.

When searching for intermediate sizes, the function skips images:

  • if the width of the intermediate image is greater than 1600px. This value can be changed via the filter max_srcset_image_width.

  • that have been edited (originals).

  • whose proportions differ from the main one. That is, height/width is not equal to height/width of the intermediate image. A tolerance of 0.002 is allowed in the comparison.

This function is used in conjunction with wp_get_attachment_image_sizes()

About the scrset attribute

srcset — contains a set of URLs for images (comma-separated) so that the browser can choose the most suitable option depending on the screen parameters of the device from which the page is viewed.

In srcset, you can specify one or more URLs.

In srcset, it is implied to specify different sizes of the same image. You can specify different ones, but its logic implies the same image.

Each line in the list must contain a URL and a descriptor. If no descriptor is specified, the default is taken - 1x.

The descriptor can be of two types:

  • Actual width of the image in pixels (actual width). For example, 600w, 1000w.
  • Device pixel density (display density) - DPR (device pixel ratio), for example, 2x, 3x.

More about scrset and sizes

Uses: wp_calculate_image_srcset(), wp_get_attachment_image_src()
1 time — 0.001658 sec (very slow) | 50000 times — 35.26 sec (very slow)

No Hooks.

Returns

String|false. The value of the 'srcset' attribute or false.

Usage

wp_get_attachment_image_srcset( $attachment_id, $size, $image_meta );
$attachment_id(integer) (required)
ID of the attachment image for which values need to be obtained.
$size(array/string)

The size of the image for which the value of the srcset attribute will be built.

It can take any registered size or an array: array(100,150), where 100 is the width and 150 is the height in pixels.

The value is passed to the function wp_get_attachment_image_src() for further description, see there.

Default: 'medium'

$image_meta(array)

Image metadata, in the format returned by the function: wp_get_attachment_metadata().

Or you can obtain the attachment metadata like this: get_post_meta( $attachment_id, '_wp_attachment_metadata', true );

Default: null

Examples

0

#1 Get the srcset value for the full size image 

echo wp_get_attachment_image_srcset( 6587, 'full' );
// output:
// http://example.com/wp-content/uploads/2015/12/WP-Recall-0-120x69.jpg 120w, http://example.com/wp-content/uploads/2015/12/WP-Recall-0.jpg 975w
0

#2 Add the srcset attribute to the image 

$attachment_id = 6587;

printf( '<img src="%s" srcset="%s">',
	wp_get_attachment_image_url( $attachment_id ),
	wp_get_attachment_image_srcset( $attachment_id, 'full' )
);

/* output:
<img
	src="/wp-content/uploads/2015/12/WP-Recall-0-80x80.jpg"
	srcset="http://wp-kama.ru/wp-content/uploads/2015/12/WP-Recall-0-120x69.jpg 120w, 
			http://wp-kama.ru/wp-content/uploads/2015/12/WP-Recall-0.jpg 975w"
>
*/
0

#3 Adding the necessary attributes to the IMG 

<img
	src="<?php echo wp_get_attachment_image_url( $attachment_id, 'large' ) ?>"
	srcset="<?php echo wp_get_attachment_image_srcset( $attachment_id, 'large' ) ?>"
	sizes="<?php echo wp_get_attachment_image_sizes( $attachment_id, 'large' ) ?>"
>
0

#4 Using $size as an array of width and height dimensions: 

<?php
// Specifying width of 400 (px) and height of 200 (px).
$srcset = wp_get_attachment_image_srcset( $attachment_id, [ 400, 200 ] );
?>

<img src="<?php header_image(); ?>" srcset="<?php echo esc_attr( $srcset ); ?>">

Notes

Changelog

Since 4.4.0 Introduced.

wp_get_attachment_image_srcset() code WP 7.0

wp-includes/media.php 
function wp_get_attachment_image_srcset( $attachment_id, $size = 'medium', $image_meta = null ) {
	$image = wp_get_attachment_image_src( $attachment_id, $size );

	if ( ! $image ) {
		return false;
	}

	if ( ! is_array( $image_meta ) ) {
		$image_meta = wp_get_attachment_metadata( $attachment_id );
	}

	$image_src  = $image[0];
	$size_array = array(
		absint( $image[1] ),
		absint( $image[2] ),
	);

	return wp_calculate_image_srcset( $size_array, $image_src, $image_meta, $attachment_id );
}

wp attachment image

Images