wp_calculate_image_srcset() filters out square resized feature image

[solo14000]

Hello,

I'm using custom featured image sizes, especially a square version with cropping like add_image_size('my_image', 56, 56, true) for avatar purpose.

When I want to generate the IMG HTML srcset attribute using wp_calculate_image_srcset() (media.php file), this function filters out all my square resized images. My original image aspect ratio is 1.42 (600 x 853), so my apesct ratio difference between original and resized versions is 0.42, which is far from the limit one 0.002 in the source code.

Could confirm?

Thanks in advance

[joemcgill]

Hi @solo14000,

The design of wp_calculate_image_srcset() is to only include the images that match the aspect ratio of the image included in the src attribute. So you would only see the square sizes in your srcset if you the original is also a square image. You can test this one of two ways:

• Upload a square original image and see if the srcset attributes include your custom square crops.
• Upload any image and insert a square thumbnail into a post or do something like wp_get_attachment_image_srcset( $id, 'thumbnail' ); in your template.

In those cases, you should be seeing your custom square sizes but not any custom hard cropped rectangles.

[solo14000]

Hi @joemcgill,

I did not pay attention that wp_caculate_image_srcset() is handling image resized set having only the same aspect ratio as the original. May be the WP documentation is a quite too short or I do not know much about the srcset attribute specification.

My use case is in fact the following :

• unregister all built-in WP image sizes
• upload an event (custom post type) flyer (size varies from event to event. There is no size constraint for my customer)

• resize this flyer to match the fullwidth of 3 target devices. These images are displayed in the event detail page.

add_image_size('full_small', 480, 480, false);
add_image_size('full_medium', 600, 600, false);
add_image_size('full_large', 992, 992, false);

• resize this flyer in square with cropping to match Google avatar list specifications in their material design.

add_image_size('avatar_small', 40, 40, true);
add_image_size('avatar_medium', 56, 56, true);
add_image_size('avatar_large', 64, 64, true);

I made a workaround to the wp_caculate_image_srcset() built-in behavior.

Thanks anyway.

[joemcgill]

Replying to solo14000:

Hi @joemcgill,

I did not pay attention that wp_caculate_image_srcset() is handling image resized set having only the same aspect ratio as the original. May be the WP documentation is a quite too short or I do not know much about the srcset attribute specification.

Thanks for the explanation @solo14000. I'll add a note to the Code Reference site at ​https://developer.wordpress.org/reference/.

If you're attempting to switch image aspect ratios based on viewport width, I would suggest looking into some custom markup utilizing the <picture> element, which is more suited to that use case than srcset alone.

[jbd7]

Hi @joemcgill,

I am having a similar issue. All my posts have a featured image, which is sometimes a ratio=1.78 image, sometimes a ratio=1.5. There are various sizes of thumbnails generated, including square ones for Archives pages, and I am happy with that.

My theme homepage now uses these images to display a grid of featured posts. Regardless of the ratio, all images are included the same way:

<img width="890" height="500" src="http://mydomain.com/wp-content/uploads/2013/02/featured-image-890x500.jpg" class="attachment-wide-thumbnail size-wide-thumbnail wp-post-image" alt="...

The theme is generating this 890x500 size, and all my images have -890x500.jpg versions. 890x500 is a ratio of 1.78, so my ratio=1.5 images are slightly cropped, and I am happy with that.

Because on Desktop, the max width of these images is 220px, I naturally want srcset to offer browsers smaller images than 890px wide. However, only images which initial ratio is 1.78 are populated with srcset.

You said earlier that:

The design of wp_calculate_image_srcset() is to only include the images that match the aspect ratio of the image included in the src attribute.

So why, despite all my homepage src images being 890x500, they are not all populated with srcset attributes?

Thanks for your insights

jb

EDIT: After careful inspection of my uploads folder, I noticed that ratio=1.78 and ratio=1.5 original images are treated the same way and none of them get attributed a srcset with my 195x110 thumbnails. This ratio is 1.7727... , therefore too far from 1.78 according to the tolerance of 0.002 mentioned earlier by @solo14000. What is the best way to override this ratio, and would you warn against it?