The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

Unlinked Accounts

The following contributors have not linked their GitHub and WordPress.org accounts: @rajkpatel@1728@gmail.com, @imrraaj.

Contributors, please read how to link your accounts to ensure your work is properly credited in WordPress releases.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Unlinked contributors: rajkpatel@1728@gmail.com, imrraaj.

Co-authored-by: westonruter <westonruter@git.wordpress.org>
Co-authored-by: mukeshpanchal27 <mukesh27@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

This PR should also include some test cases that demonstrate the original bug. Perhaps start there before adding the required fix, for some good ol' test-driven development.

Based on my observations, the issue only affects JPG and JPEG images. Images with different MIME types are working as expected. The issue arises when the user has a JPG or JPEG image and the image size is set to thumbnail. When we select the thumbnail image size, it does not output the source tags which contain information about the srcset attribute, ultimately rendering the entire image as is with the given height and width. All the image sizes apart from thumbnail work fine (i.e., medium, large, full size).
I have written a test case just to demonstrate this. It will fail on the current state of the main branch, requiring the fix to be applied.

I verified the change worked as expected. I'm curious why thumbnail sizes in particular are handled this way.

I checked with default WordPress without the plugin and noticed that no srcset is output when I select the thumbnail size, only the image tag:

If I select the medium size, I get a full srcset:

This explains why the bug exists; for the picture element support we want to always have these srcsets so we can provide a fallback. I'm going to dig a little more to see if I can tell why core doesn't use srcset for thumbnails (or @joemcgill may know?) - probably because the images are small already so adding additional sizes doesn't make sense?

I'm going to dig a little more to see if I can tell why core doesn't use srcset for thumbnails - probably because the images are small already so adding additional sizes doesn't make sense?

In looking at wp_calculate_image_srcset() I see it has these comments:

 	 * Loop through available images. Only use images that are resized
	 * versions of the same edit.

	 // If the image dimensions are within 1px of the expected size, use it.

Since thumbnails are square, as I understand they would only get a populated srcset if the original image was also a square.

I just tried uploading a square image and then inserting it with the thumbnail resolution, and the generated markup was:

<img 
  decoding="async" 
  width="150" 
  height="150" 
  src="http://localhost:8888/wp-content/uploads/2024/07/pexels-mark-a-jenkins-373676419-21771035-150x150.jpg" 
  alt="" 
  class="not-transparent wp-image-43" 
  srcset="http://localhost:8888/wp-content/uploads/2024/07/pexels-mark-a-jenkins-373676419-21771035-150x150.jpg 150w, http://localhost:8888/wp-content/uploads/2024/07/pexels-mark-a-jenkins-373676419-21771035-300x300.jpg 300w, http://localhost:8888/wp-content/uploads/2024/07/pexels-mark-a-jenkins-373676419-21771035-1024x1024.jpg 1024w, http://localhost:8888/wp-content/uploads/2024/07/pexels-mark-a-jenkins-373676419-21771035-768x768.jpg 768w, http://localhost:8888/wp-content/uploads/2024/07/pexels-mark-a-jenkins-373676419-21771035-1536x1536.jpg 1536w, http://localhost:8888/wp-content/uploads/2024/07/pexels-mark-a-jenkins-373676419-21771035-2048x2048.jpg 2048w, http://localhost:8888/wp-content/uploads/2024/07/pexels-mark-a-jenkins-373676419-21771035-1568x1568.jpg 1568w" 
  sizes="(max-width: 150px) 100vw, 150px">

So here, even though the thumbnail was inserted, it did get a fully-populated srcset because the other image sizes are also square.

it did get a fully-populated srcset because the other image sizes are also square.

this makes me wonder if the fix proposed here is correct. If a non-square image is uploaded, i suspect the fallbacks specified in the srcset entries will be distorted when displayed. Since no srcset is provided, we could instead use the

maybe we could construct srcsets with the original image urls in each format (untested):

so for example

<picture class="wp-picture-407" style="display: contents;">
<img width="150" height="150" src="https://wpdev.localhost/wp-content/uploads/2024/07/cat-2-150x150.jpg" class="attachment-150x150 size-150x150" alt="">
</picture>

would become

<picture class="wp-picture-407" style="display: contents;">
<source type="image/avif" src="https://wpdev.localhost/wp-content/uploads/2024/07/cat-2-150x150.avif">
<source type="image/jpeg" src="https://wpdev.localhost/wp-content/uploads/2024/07/cat-2-150x150.jpg">
<img width="150" height="150" src="https://wpdev.localhost/wp-content/uploads/2024/07/cat-2-150x150.jpg" class="attachment-150x150 size-150x150" alt=""></picture>

note the -150x150 suffix, including for the img tag. I'm not sure if the current PR uses that image correctly.

Punting this to the next release.

So I tried uploading a non-square image to test the code in the PR. When the thumbnail size is selected, it generates following HTML.

<picture class="wp-picture-267" style="display: contents;">
  <source type="image/webp" srcset="http://contrib.local/wp-content/uploads/2024/07/lake-8847415_1280-150x150.jpg" sizes="(max-width: 150px) 100vw, 150px">
  <source type="image/jpeg" srcset="http://contrib.local/wp-content/uploads/2024/07/lake-8847415_1280-150x150.jpg" sizes="(max-width: 150px) 100vw, 150px">
  <img width="150" height="150" src="http://contrib.local/wp-content/uploads/2024/07/lake-8847415_1280.jpg" class="attachment-150x150 size-150x150" alt="">
</picture>

So as per @adamsilverstein's suggestion along with source urls, the img tag url should also have -150x150 suffix. Am I getting this right?

@westonruter @adamsilverstein This has been solved in #1354 and merged in trunk. The IMG src check is added in #1408.

Closing this PR now.