Thumbnails blurry after Bulk Smush

Hi @youngsquad

I hope you’re well today!

The images (on the linked page) are blurry because the size of an image is smaller than size of image container. For example this image

https://www.youngsquadonline.com.au/wp-content/uploads/2022/05/ladies-joggers-with-pockets-2-247×300.jpg

is 247 x 300 pixels and if you check it directly it doesn’t seem blurry.

On page it is rendered as 335×400 (on my screen) which means it’s “scaled up” in browser which is always degrading quality. I’m not sure which specific CSS (whether it is custom or coming from some plugin) does this as the CSS is optimized with SiteGround Optimized (so it’s compressed and combined) but this “upscaling’ is a direct reason for the issue.

I’m not entirely sure why this would start happening after bulk-smushing images as this process does not change and “re-register” image sizes and it does not modify image URLs in content.

One possible option is that for some reason the images – as in image files, physically – weren’t really following set “image sizes” and got “adjusted” to registered “image sizes” after bulk smushing. This would be unexpected and would mean that images weren’t correctly sized in the first place and it would be expected outcome of smushing process (as Smush is following registered image sizes on site). But that’s just an assumption as, I’m afraid, I have no way to check and confirm that for sure.

As for restoring images: if you could run restore option in Smush it means you had “Backup original images” option enabled. This would mean that original, unchanged images were backed-up and restoration goes based on these images and, again, registered images sizes on site. So for example, image that I mentioned above would again be restored to 247×300 size as this must be one of registered images size. Same would happen with any other “thumbnail restore” plugin.

I think it would be best now to clear all cache on site and see if it’s possible to regenerate CSS (probably disable and re-enable CSS optimization in SG and check page builder options if you are using any). If that doesn’t help, you would need to check settings of any plugins related to showing up these images and review CSS to see where the image is “upscaled” like this.

Kind regards,
Adam

Ok thanks. Yes its strange that it has happened directly after using bulk smush if the images aren’t resized etc.
Unfortunately I didn’t have back up original images turned on due to the space it would take up so there’s no way to restore them. I even tried reverting to a previous backed up version of my site and that didn’t help either. I’ve cleared the cache, disable and re enabled CSS plus regenerated with a thumbnail restore plugin and its still the same. Next step would be to review CSS I guess but that’s a bit beyond my scope.

Hi @youngsquad

It indeed is not related to Smush.

I can see it is a Woocommerce site so you don’t need to restore the images from Smush.

As Adam said the issue is related to image size, so you can increase it in the customizer https://incsub.slack.com/archives/C0Y0QGKS6/p1658940800889829 to something around 350px and the Woocommerce itself will generate the new thumbnails for you.

Best Regards
Patrick Freitas

Hi @youngsquad,

Since we haven’t heard from you for a while. I’ll mark this thread as resolved for now. Please feel free to re-open the thread if you need further assistance.

Best Regards
Nithin