wp_get_attachment_image_srcset() │ WP 4.4.0

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

The function retrieves all available sizes of the attachment image by its ID 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.

• only one intermediate size data could be obtained. 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 margin of error of 0.002 is allowed in the comparison.

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, one or more URLs can be specified.

In srcset, it is implied to specify different sizes of the same image. Different images can also be specified, but the logic of its operation 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:

• Physical 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.

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(number) (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.

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 metadata of the attachment can be obtained like this: get_post_meta( $attachment_id, '_wp_attachment_metadata', true );

Default: null

Examples

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

$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"
>
*/

<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' ) ?>"
>

<?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 ); ?>">

Add Your Own Example