[WP Smush Pro] Blurry images on new blog posts

I just created the first new blog post since starting wpmudev and have trouble with my images. Normally, I use a program to optimize them for web (blogstomp) and then upload them. They look fine until I upload them to my blog and then, they're blurry. I haven't had this problem before so i'm not sure if smush is conflicting with something else? Don't know what else it could be and not sure where to start. Any help is appreciated! Thanks!

  • Adam Czajczyk

    Hello Heather

    I hope you're well today and thank you for your question!

    I assume that you don't have any other image-optimization plugins enabled on site, right?

    With WP Smush Pro there are two modes of optimization: default and super-smushing. The default one is lossless so it won't affect image quality as it's only stripping out "visually irrelevant" data from images. The "super-smushing" option, however, is a lossy compression so while we made everything that we could to make it as harmless to image quality as possible, it can actually decrease quality a bit.

    There's also a matter of the image size. When you upload an image to the site, WordPress is creating additional images of different sizes out of it. Then the theme might fetch one of those sizes. Sometimes it happens that the image that is fetched gets re-scaled (up or down) directly in browser to "fit the viewport" and in that case it might become a bit blurry (rare cases but entirely possible). Additionally, you might have "resize" option enabled in WP Smush and if the image sizes that are registered by your theme/plugins are not "perfectly matching theme needs" Smush will not know it and resizing might cause them to become blurry. I hope that explanation makes some sense to you :slight_smile:

    That said, could you please:

    1. Share a link to example post(s) where I can see proper images and to other post(s) where I can see those blurry ones?

    2. Enable support access to the site so I could take a closer look? To do this, go to the "WPMU DEV -> Support" page in your site's back-end and click on "Grant Support Access" button there and let me know when it's ready here.

    Best regards,
    Adam

  • Heather

    Thanks for the reply Adam. I'm not sure on other plugins. My web designer added some and i'm not entirely sure what they do.

    With the new post all the images are blurry. I just discovered more blurry images and it's probably easiest to see it here : http://www.hilittlebird.com/families/kauai-family-photographer-hanalei/

    In this blog post here, you can see the images are normal until 6 photos down and then they're blurry and then the go back and forth between normal and blurry.

    I'll go ahead and grant access. Hopefully, you see something obvious. Thanks so much!

  • Predrag Dubajic

    Hi Heather,

    I checked your page in question and the images that are blurry are actually not full-size images, instead of using those it uses the largest thumbnail available on your site.
    That thumbnail is however only 511 pixels in width, while your page content is 1100 pixels, so it stretches that image to fill the content and that makes it blurry like that.

    I then checked your page content in the backend and in there it was showing full-width image is used, which is quite confusing so I went and checked your theme settings.

    In ProPhoto > Settings > Misc I found this option "Individual image downsizing" which is enabled and it resizes images that have width+height larger than 6000 pixels.
    The image you use is 2002x4000 which is over 6000 pixels so that seems to be the issue here.

    Now, I'm not sure how this option exactly works as I'm unfamiliar with the theme you use so it would be best to discuss this further with theme developers.
    In the meantime, disabling this option and clearing your cache should load full-size images again and get rid of the blurry ones.

    Best regards,
    Predrag

  • Heather

    Thank you so much Predrag! That solved the problem. I do have a question though - When I prepare images for blog posts I optimize for a width of 2000 and normally stack 2 or 3 together. That is what WP recommends "Based on your current ProPhoto settings, the recommended image width for uploading is 2000px". Will this slow my site down? Does it make more sense to set them at 1100px wide?

    Also, I see Smush resizes large images to 1024. Is there a way to change that to 1100?

    One last question. I would like to use "resize my full images" but i'm worried about the page images that need to be larger than blog post images. Any way to have more control here?
    Thanks again!

  • Predrag Dubajic

    Hi Heather,

    I do have a question though - When I prepare images for blog posts I optimize for a width of 2000 and normally stack 2 or 3 together. That is what WP recommends "Based on your current ProPhoto settings, the recommended image width for uploading is 2000px". Will this slow my site down? Does it make more sense to set them at 1100px wide?

    It's best to have images that are the same size as their holder, in your case that's page content which is 1100px, larger images will load slower and speed tests will report them as something that's slowing down your site.
    So if the theme is not using larger image anywhere it would be good to have their width set to 1100 pixels.

    Also, I see Smush resizes large images to 1024. Is there a way to change that to 1100?

    I'm not sure that I understand this question completely, Smush doesn't resize any images if you don't have "Resize my full size images" option enabled.
    And when this is enabled you can still set your desired max size for the original image.

    One last question. I would like to use "resize my full images" but i'm worried about the page images that need to be larger than blog post images. Any way to have more control here?
    Thanks again!

    As mentioned above, when you enable this option you will have an option to set your desired size for full size images, but let me explain a bit more how WordPress handles images that you upload.

    If you go to Media > WP Smush you will see a list of all the thumbnails that are registered on your site.
    Some of them are default WP ones, others are added by your theme and plugins.

    So, when you upload your image to WordPress it will add your full size image but it will also create those thumbnails listed in there.
    These are however not created by Smush as Smush only optimizes existing images, it doesn't create any on its own.

    I believe that the confusion here is the "large image" in the thumbnail list, this is something probably created by your theme, but that's just another thumbnail, that's not your original image, and that list only allows you to select which thumbnails you want to optimize.
    So even you have this thumbnail deactivated it is still on your site, but it's not optimized.

    Hope this is not too confusing, and if you have any followup questions let us know :slight_smile:

    Best regards,
    Predrag

  • Heather

    Sorry back again with more questions. I have some large images on my site and want to have Smush resize my full size images. I'm worried about 2 things -
    1) I have a few images on my home page that are large - full screen - and I don't want those to be resized. Can I still use the resize option for everything else?
    2) I used a program to stack multiple images on top of each other so they vary in size. I know I want the width to be 1100px, but height varies according to number of stacked images and orientation. The maximum size should be 1100 x 2202. If I enter those parameters will it resize everything to those dimensions? Will it alter the proportions?

    Is there a benefit to smushing original images? There's a note that says it doesn't typically affect page speed. And can you confirm that this removes extraneous data from the image files, but doesn't alter them?

    Thanks!

  • Predrag Dubajic

    Hi Heater,

    1) I have a few images on my home page that are large - full screen - and I don't want those to be resized. Can I still use the resize option for everything else?

    I'm afraid that there's no way if skipping some of the images in resize.
    What you can do is enable the option to keep backup of the original image and then do bulk smush with resize option enabled.
    Once they are all optimized go to your images via FTP or cPanel, find the backup of those homepage images and restore the backup so it will use original images instead of the resized ones.

    2

    ) I used a program to stack multiple images on top of each other so they vary in size. I know I want the width to be 1100px, but height varies according to number of stacked images and orientation. The maximum size should be 1100 x 2202. If I enter those parameters will it resize everything to those dimensions? Will it alter the proportions?

    Resize will not alter the proportions, it will resize them based on the side of image that gets to the set resize value, for example, if you set resize to 1000x500 and you upload an image that's 2000x1500 you will end up with an image that's 1000x750.

    Is there a benefit to smushing original images? There's a note that says it doesn't typically affect page speed.

    Themes and plugins usually use one of the existing WP thumbnails or their register their own and use that, but if you do use original size images on your site then you should optimize them as well.

    And can you confirm that this removes extraneous data from the image files, but doesn't alter them?

    I'm not sure that I understand this one completely, sorry about that, could please elaborate it a bit more?

    Best regards,
    Predrag

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.