wp_get_attachment_image_sizes() │ WP 4.4.0

Gets the size values of the specified attachment image for the sizes attribute.

Used in conjunction with the function: wp_get_attachment_image_srcset()

About the HTML attribute sizes

sizes contains a list of elements (comma-separated), where each element describes the image size in relation to the viewport width.

Using sizes gives the browser additional information to correctly select the appropriate image from the srcset and start loading it as soon as it sees the <img> tag, without waiting for CSS styles to be parsed.

Syntax:

<img
	srcset="small.jpg 300w,
			medium.jpg 600w,
			large.jpg 900w"

	sizes="(max-width: 300px) 100vw,
			(max-width: 600px) 50vw,
			(max-width: 900px) 33vw,
			900px"
	src="image.jpg"
/>

More details about srcset and sizes.

Uses: wp_get_attachment_image_src(), wp_calculate_image_sizes()
1 time — 0.000911 sec (slow) | 50000 times — 30 sec (slow)

No Hooks.

Returns

String|false. The size value intended for use in the 'sizes' attribute. For example: (max-width: 709px) 85vw, (max-width: 909px) 67vw.

Usage

wp_get_attachment_image_sizes( $attachment_id, $size, $image_meta );
$attachment_id(number) (required)
ID of the attachment image for which to get the value of the sizes attribute.
$size(array/string)

The name of the image size.
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 wp_get_attachment_image_src() function; see there for more description.
Default: 'medium'

$image_meta(array)

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

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

Default: null

Examples

0

#1 Just get the dimensions of the attachment image for the attribute 

echo wp_get_attachment_image_sizes( 10, 'full' );
// output:
// (max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 984px) 61vw, (max-width: 1362px) 45vw, 600px
0

#2 Use in the IMG tag 

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

We get it:

<img
	src="http://example.com/wp-content/uploads/2015/12/image.png"
	srcset="http://example.com/wp-content/uploads/2015/12/image-240x300.png 240w, http://example.com/wp-content/uploads/2015/12/image.png 700w"
	sizes="(max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 984px) 61vw, (max-width: 1362px) 45vw, 600px"
>

Notes

Changelog

Since 4.4.0 Introduced.

wp_get_attachment_image_sizes() code WP 6.9.1

wp-includes/media.php 
function wp_get_attachment_image_sizes( $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_sizes( $size_array, $image_src, $image_meta, $attachment_id );
}

wp attachment image

Images