Pixelated Images

Hello – I am using the Divi theme. When I view and export my photos in Lightroom they look fine, but when I upload them and publish to WordPress they are very grainy and pixelated. I can't figure out why. Any ideas? I did a search and it said that Divi might be creating and using Thumbnail images. I changed the Thumbnail size to 600 but that still didn't change anything. Thank you!

  • Mohmmad Sharab
    • Staff

    Hello Tricia,

    I hope you're well today and thank you for reaching out to us.

    After some research, I could notice that your images are served by Jetpack Site Accelerator. I can see that those images are smaller in size than your original images, as a result, it loses quality. So I would advise trying to disable Jetpack Site Accelerator then check your images again.

    To disable JetPack Site Accelerator

    1. In your site’s dashboard, go to Jetpack > Settings > Performance.

    2. In the Performance & speed section, toggle off “Enable site accelerator.”

    If it works and your images looked fine, then maybe you would like to try our image compression plugin Smush Pro which will help you speed up your site and save space without losing images quality.

    Hope this helps and please let me know how it goes.

    Best Regards,

    Mohammad Sharab

  • Tricia
    • Flash Drive

    Hi Mohammed,

    Thank you for the reply. I think I disabled the Site Accelerator, but the images I just uploaded this morning still look fuzzy for some reason, like this image: https://myrainydaydesigns.com/2019/05/21/trinket-finisher/

    And I do have the Smush plugin – it says all attachments are smushed, and I just changed it to just the large 1024×1024 setting. When I try to change it to widest at 600 it says that the images are larger and may result in pixelation. Any other smush setting to check/change? Thank you.

  • Mohmmad Sharab
    • Staff

    Hello Tricia,

    hope you are doing well today!

    I think I disabled the Site Accelerator, but the images I just uploaded this morning still look fuzzy for some reason, like this image: https://myrainydaydesigns.com/2019/05/21/trinket-finisher/

    Yes, I see that your images aren’t served from JetPack CDN anymore.

    I checked the image but I can’t tell how fuzzy it is without checking the original image. So Would you please provide me with the original image to check how it looks before?

    And I do have the Smush plugin – it says all attachments are smushed, and I just changed it to just the large 1024×1024 setting. When I try to change it to widest at 600 it says that the mages are larger and may result in pixelation.

    As I understand, you are talking here about the “Resize my full size images” feature in Smush Pro. This feature is to resize your oversized images so you can save space. When you set a maximum Width and Height so any unnecessarily large images are automatically resized before they are added to the media gallery. But setting it to 600 will force all images over 600 px to be resized which will cause loose of quality and pixelation as the plugin detects that you have large images that will be pixelated if resized to this size.

    You don’t need to use this feature to resize your normal size images as when you enable Automatic Smush in the bulk smush settings, every time you upload an image to your site, it generates a resized version of that image for every default and/or custom image size that your theme has registered. This means there are multiple versions of your images in your media library.

    The said, could you please grant support access, to let me take a closer look at Divi and Smush settings?

    To grant temporary support access via WPMUDEV Dashboard plugin. Just navigate in WP admin area under WPMU DEV -> Support -> Support Access page and click on the “grant support access” button.

    You can find detailed information about it here:

    https://premium.wpmudev.org/docs/getting-started/getting-support/#chapter-5

    Please do reply back here when access is granted because we don’t get any notifications about it.

    Kind Regards,

    Mohammad Sharab

  • Mohmmad Sharab
    • Staff

    Hello Tricia,

    Hope you are doing well today and excuse my late reply.

    To investigate this issue I had to check the difference between the images before and after uploading to your site. So here are what I performed to troubleshoot this issue:

    1. I got a 600*600 px colorful image (like the ones you are using). The image is attached.

    2. Uploaded the image which automatically Smushed (laura-clugston-2.jpg), size reduced from 79KB to 35KB.

    3. I created a draft blog post with the smushed image (post name “test smushed”).

    4. Uploaded the same image but this time without smushing it (laura-clugston-1.jpg).

    5. Then created a new draft post with the not smushed image (post name “test original”).

    6. When I compared both, I could notice that there is a difference in quality where the one that is not smushed looks better.

    7. After that, I turned off the Super Smush feature and tested again.

    8. The smushed image – after disabling the Super Smush feature – size drops from 79KB to 5KB.

    9. Then I compared the two posts again and I can see that both images (the original and smushed) look fine.

    10 . Please check the two draft blog posts test smushed and test original. Also, please compare them to the original attached image.

    When I checked your Smush Pro setting I noticed that ‘’Store a copy of my full size images” feature is disabled. I enabled it so I could be able to restore the original image during testing. This feature saves a copy of your original full-size images separately so you can restore them at any point.

    Here is how you can restore the original image

    Also, I set Image the Resizing Feature width to 2048 as 800 was too low which could cause a pixelation for your large image sizes.

    Please re-upload your fuzzy image (after I turned off the Super Smush feature ) and let me know how it goes. Do you still still see the uploaded image fuzzy or not? Please check so we can proceed with the rest of Smush Pro features.

    Kind Regards,

    Mohammad Sharab

  • Tricia
    • Flash Drive

    Thank you for your help, but I can't get it to work with my photos. They look fine in Lightroom – clear, easy to read the words. But then when I upload they are fuzzy. I have tried uploading 300 dpi and 72 dpi. The latest two images this morning, exported and uploaded exactly the same and the top image is very large in the post, and the second image is really smaller with a yellow border. Do I need to just turn off the smush and change image sizes for each uploaded image?

    https://myrainydaydesigns.com/?p=733&preview=true – I don't know if that preview will work for you – preview of Draft Post How I Paper Piece. Attached post preview with the 2 image sizes plus how they appear in Lightroom.

  • Mohmmad Sharab
    • Staff

    Hello Tricia,

    I checked your preview and it looks fine from my end (as shown in the screenshot).

    Also, I restored the original images for the ones you've uploaded and I can't see a difference between the original image and the smushed ones (both are clear, easy to read the words).

    To get better insight would you please send me the original images of your latest draft post. Also, would you please try to deactivate Smush Pro and check if you still encounter the same issue or not.

    Please let me know how it goes.

    Best Regards,

    Mohammad Sharab

  • Tricia
    • Flash Drive

    Hi Mohammad,

    I disabled the Smush Pro plugin. I was trying to correct the images and I deleted and readded several times. When I disabled the plugin then I was able to get the clear image and the size of 600 pixels wide for uniform images in the post. But I have to do it one by one. I’m not sure what would happen if I reactivate the plugin and smush all. But I need clear images. Thanks for your help.

  • Mohmmad Sharab
    • Staff

    Hello Tricia,

    thanks for the update!

    Here are what I performed:

    1.1- Activated Smush Pro without performing Bulk smushing (so the images you uploaded without smushing still unsmushed.)

    1.2- Uploaded the two images you sent to me.

    1.3- Created a new draft blog post “New Test”. In this draft, you will find two versions of each image. One is smushed and the other is not. Honestly, I can’t see a difference between them. Please check and correct me if I am wrong. Also, please compare it to the original images.

    2- In Smush Pro > Bulk Smush > Automatic Smush, I’ve checked all the sizes that is used in your blog posts as shown in the screenshot. I didn’t check the other sizes as they belong to Divi builder and I notice that you don’t use it.

    Checking these sizes will automatically generate a resized version of each image you upload or smush. Like the one, I’ve uploaded to test.

    This means that when you select your image size to Medium, WP will use the 600×600 version of your image, not the full-size image. which is better in terms of optimization.

    3- Activated Smush Pro, CDN Smush Pro > CDN

    Means that your images are being served from the WPMU DEV CDN now. Which will help to deliver your images at fast speeds, and will also serve up the perfect size image for your site’s containers.

    I find this blog post useful to know more about how to “Properly Resize and Serve Scaled Images with WordPress” https://premium.wpmudev.org/blog/compress-resize-images-wordpress/

    4- Enabled WebP conversion, Smush Pro > CDN > WebP conversion

    WebP formats produce an image that is much smaller than their JPEG and PNG counterparts without sacrificing quality. It works only on compatible browsers, means, If someone visits your site on a browser that supports WebP, Smush will convert your images and serve up WebP images. If they’re on a browser that doesn’t support WebP, they’ll get your everyday JPEG or PNG.

    To know more about WebP format please check this blog post about best image formats: https://premium.wpmudev.org/blog/best-image-formats-png-vs-jpg-svg-gif-webp/

    5- Finally, I’ve activated Lazy Loading for your site, Smush Pro > Lazyload.

    Lazyload reduces load on your server and speeds up the page load time by delaying the loading of any images below the fold (the invisible part of your screen) until the page has loaded.

    Please check the above edits and let me know how it goes. We are standing by to provide further assistance.

  • Tricia
    • Flash Drive

    Hello,

    Thank you for all of your help. I think I know the problem, I just don’t know how to fix it. When I look at the main home page, the images to me are fuzzy. https://myrainydaydesigns.com But when I click on a blog post, the images appear clear to me, as they should be: https://myrainydaydesigns.com/2019/06/09/new-items-06-09/ I don’t know what the problem is or how to match the images on the blog post pages to the home page, for the same quality.

    Also, this blog post https://myrainydaydesigns.com/2019/05/27/how-i-paper-piece/ has each image set to be 600 px wide, but on the Home page (2nd post down), they are a variety of 600 and 800 wide, if they show up.

    It seems there is some setting about the home page, but I can’t find it. Any idea? Thank you!!

  • Mohmmad Sharab
    • Staff

    Hello Tricia,

    hope you are doing well today and excuse my late reply.

    I just don’t know how to fix it. When I look at the main home page, the images to me are fuzzy. https://myrainydaydesigns.comBut when I click on a blog post, the images appear clear to me, as they should be: https://myrainydaydesigns.com/2019/06/09/new-items-06-09/

    I checked this and found that both images on the home page and blog post are called from the same URL and have the same dimensions, In addition, that I (and my teammates) can’t notice any difference between them. Please check from different browsers and send a screenshot if you still see the fuzzy images.

    This blog post https://myrainydaydesigns.com/2019/05/27/how-i-paper-piece/ has each image set to be 600 px wide, but on the Home page (2nd post down), they are a variety of 600 and 800 wide, if they show up.

    1- I noticed that most of the time Images don’t show up immediately and it takes a long time to show up. This is due to the Lazy Load animation feature was set to Fade in with duration 400ms, to solve this I set the animation feature to none from Smush Pro > Lazy Load > Animation.

    2- Regarding the different sizes in home and blog post. I’ve noticed that some of these images are not smushed and after smushing those images appeared on the home with 600 px wide but after a while, the issue occurred again.

    I’ve forwarded this to our team and I will get back to you once any update comes up.

    3- Also I noticed you are using the AMP plugin which includes caching feature. Please keep in mind that it shouldn’t be activated with Hummingbird page caching option because this will cause conflict between the two plugins. So just keep one caching plugin.

    I will get back to you once I have an update regarding the image size issue.

    Kind Regards,

    Mohammad Sharab

  • Tricia
    • Flash Drive

    Hi Mohammad,

    Thank you for your help. I disabled the AMP plugin.

    I am still seeing a difference in images on the home page vs the blog post page. I checked Safari and Google Chrome. I don't have any other browsers installed on my computer.

    When I checked Internet Explorer on my son's PC laptop, I get small squares with Xs and image titles on the Home Page (No images will load) and what appears to be fuzzy photos on the blog post pages. So I guess fuzzy home page images are an improvement. Attaching 3 screen shots: Home Page on the left. Blog post on the right. The right to me appears a lot clearer, crisper – with the detail of the embroidery, and the wood background.

    Thanks for your help.

  • Mohmmad Sharab
    • Staff

    Hello Tricia ,

    hope you are doing great and thanks for the update.

    1- Regarding the different sizes in home and blog post images, this is fixed by deactivating JetPack Lazy Load option as it was conflicting with Smush Pro Lazy Load.

    2- About the difference in the quality of the images issue, Our devs reported that it is fixed so would you please check if this issue still persisted or not.

    Kind Regards,

    Mohammad Sharab

  • Tricia
    • Flash Drive

    Yes! The images look to be the same now on the Home page and the Blog Post page. They also appear to be the same size so the Home Page size load has been fixed. They are even showing up in Internet Explorer now! I checked IE, Chrome and Safari. Thank you so much for your help!

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.