[Resolved] Incorrect version of featured image often served

[Elvin]

After setting this code snippet up, you’ll have to delete the actual generated files prior to activating it.

This means you’ll have to regenerate thumbnails with “Delete thumbnail files for old unregistered sizes in order to free up server space. This may result in broken images in your posts and pages.” checked as shown here – https://share.getcloudapp.com/YEuBm4K6 – so the old image files generated for medium_large gets removed from the srcset when you regenerate images for the image sizes. 😀

[Ed]

OK. I did that twice. Once before and once after adding that snippet. But the old images are still there.

[Ed]

I am confused. This post, https://aclayjar.net/2018/05/are-you-a-martha-or-a-mary-luke-10-41-42/, has an image of size 500×355. My blog featured images are set for Medium. And the Medium Media size is set to 500×328. When I inspect this in a browse I see

But Pagespeed Insights is telling me that I need to use properly sized images and displays the URL as https://aclayjar.b-cdn.net/wp-content/uploads/Martha-and-Mary-1024×728.jpg.webp.

Pagespeed Insights shows this for mobile, while my test was on a desktop. But, in mobile, I seem to be serving the wrong sized image, causing PageSpeed to complain. And on the desktop, it is clipping to the height of the image. But why not display it at 500×328 rather than 462×328?

[Elvin]

Can you try disabling the image optimization plugins to check if they’re the ones causing the issue?

It seems to still be serving the image it copied to it’s CDN server. You should flush and generate a new one so it only has a copy of 500×328. 🙂

[Ed]

I don’t know how to remove a single file from my CDN. I can purge it, but it takes forever to reload.

Do you know where all of the extra image sizes might be coming from? WordPress defines 3. But I have many more than that.

[Ed]

This is the code I believe you have given me to fix the issue I was having.

//remove all of the non-default image sizes
function remove_extra_image_sizes() {
foreach ( get_intermediate_image_sizes() as $size ) {
if ( !in_array( $size, array( ‘thumbnail’, ‘medium’, ‘large’ ) ) ) {
remove_image_size( $size );
}
}
}

add_action(‘init’, ‘remove_extra_image_sizes’);

add_filter( ‘intermediate_image_sizes_advanced’, ‘remove_default_medium_large_image’ );

function remove_default_medium_large_image( $sizes ) {
unset( $sizes[‘medium_large’]); // 768×512
return $sizes;
}

Unfortunately, it seemed only to make matters worse. And that may have been in conjunction with the Regenerate Thumbnails plugin you suggested. It seems to have been the cause of my problems with Imagify. And ultimately resulted in the loss of many of my images. Fortunately, I had made a backup before starting so was able to recover all but the last 2 days’ work. I have no way of knowing for sure that is what triggered the image loss. But I am going to just call this good for now.

[Elvin]

A few points:

By default, WordPress has 7 images sizes. But from this 7 image sizes, you can only set 3 which are the ones you see on Admin > Settings > Media which are:

Thumbnail
Medium
Large.

The rest are:
Full size – The actual size of the image uploaded
medium_large – Which is a size of its own added by WordPress. Added for responsiveness.
2048×2048 – which is Large x2. Added for responsiveness.
1536×1536 – Medium large x2. Added for responsiveness.

Now what happens here is, when you upload an image, all registered image sizes get generated for the image file. This is important to remember, as this has something to do w/ what Imagify copies to its CDN.

Now about Imagify:

One of Imagify’s main feature is to optimize an image is by copying the image sizes to its CDN server and have the image served from there on your site.

Now this can be an issue (which we are actually encountering now) because Imagify already made a copy on its CDN for medium_large image size for some of the images on your site as the optimization happened BEFORE we’ve unregistered medium_large.

Now what we basically are doing is the re-optimization for ALL the image by stopping the site from generating for medium_large AND removing the previously generated image sizes Imagify already copied to its CDN.

We’ve done the first half which is stopping WordPress from generating for medium_large w/ the PHP snippet and using Regenerate Thumbnails plugin to REMOVE all the previously generated image for medium_large image size but the second half of doing this requires we delete medium_large copies on its CDN.

The easy way is by simply purging Imagify and then re-copy ALL the regenerated image sizes (no medium_large because we cleaned it out). This may take a bit longer if your have a huge number of media files on the media library already.

Now the best way to go about this would be to simply have medium_large be deleted specifically on Imagify’s CDN but I’m not sure if Imagify has an option to do this. For this one, it’s best to ask Imagify.

After we’ve done this. It’s really up to the browser what it wants to use from the image’s srcset. (which after we’ve sucessfully done this, should only be a choice between thumbnail and 500×328)

I hope this clears things up. Sorry for the late response. Happy new year! 🙂

[Ed]

Thanks for your detailed response. That does help me to understand the issues better. I have stored this offline where I can easily get back to it. I am up and running OK for now. But if I choose to tackle this again I will refer back to your instruction here. Thanks again.

[Elvin]

No problem. 😀

[Author]

Posts