I believe I’m missing something on media images.

I have created a custom image size with this code:

add_image_size( '250-square', 250, 250, true); // cropped

I have then uploaded images. When I check in the appropriate uploads directory in my installation I see that the image is uploaded and different sizes have been created.

I have set my thumbnail dimensions to 75×75 hard crop so that there will be 2 different images with a 1:1 ratio if an image is uploaded that is not 1:1 as it is my understanding that’s needed to create a srcsest.

As an example I uploaded an image (myimage.png) with dimensions of 1507 × 1267.

In the directory I have:

• myimage.png
• myimage-75×75.png
• myimage-250×250.png
• myimage-400×400.png
• myimage-1200×1200.png
• myimage-768×336.png
• myimage-1024×861.png
• myimage-1507×500.png

In my loop I’m calling the thumbs with this code:

<div class="product_cat <?php echo $kidcount;?>"> //just outputs how many children are in the category
    <a href="<?php the_permalink();?>">
        <?php the_post_thumbnail('250-square');?>                 
        <h2><?php echo get_the_title();?></h2>
    </a>
</div>

However this is what is being generated:

<div class="productCategories grid">
    <div class="product_cat 5">
        <a href="https://examplesite.com/products/biglight-36-4000-landing-light/">
            <img src="https://examplesite.com/wp-content/uploads/2020/10/aeroleds-biglight-4000-landing.png" class="attachment-250-square size-250-square wp-post-image" alt="An image of Aeroleds biglight 4000 Landing" width="250" height="210">
            <h2>biglight 36-4000</h2>
        </a>
    </div>
    <div class="product_cat 5">
        <a href="https://examplesite.com/products/biglight-36-4000-taxi-light/">
            <img src="https://examplesite.com/wp-content/uploads/2020/10/biglight_36_4587_4314_Taxi_SH.png" class="attachment-250-square size-250-square wp-post-image" alt="An image of biglight 36 4587 4314 Taxi Sh" loading="lazy"   width="250" height="250">
            <h2>biglight 36-4000</h2>
        </a>
    </div>
</div>

The first image doesn’t generate a srcset and isn’t loading at 250×250 nor does it call the 250×250 version of the image. the rest of the images (i removed them for simplicity in this question) work as the 2nd image in the output shown here.