Blurry/fuzzy images

Beaver Builder
1

Hi, I’m having the same problem that others have seem to report of getting blurred/fuzzy images.

I already did the following that I found in here, but it did not work for me:

  1. Go to your WordPress Admin Dashboard > Settings > Media and increase the largest size significantly i.e. 3000x3000 and save the changes.
  2. Then use the Regenerate Thumbnails plugin to regenerate your images.
  3. You may also want to clear the Beaver Builder cache via WordPress Admin Dashboard > Settings > Page Builder > Cache .

The above did not work in my case, it still looks blurry/fuzzy.
Does anyone have another suggestion?

2

Do you have a link you can share? Are these blog post thumbnails?
I recommend against setting the largest size to 3000 - depending on how many images you have an how many you’re adding in the future, it could add unnecessary bulk to your site and reduce load speed.

3

These are on the blog posts. It happens in images with the entire width of the module and also if I put a module with 2 columns. Also, on the dropdown, changing from full size or large (3000) doesn’t make any difference.

The website is not online yet, so if it’s okay, I’d rather share a printscreen.
Here’s a comparison.
Original design X printscreen of how it looks after uploaded

fuzzy
fuzzy1000×934 426 KB
fuzzy2
fuzzy21066×533 235 KB

4

Can you provide a link to the site, please.

5

I don’t know that I really see much of a difference? I only have a 1600px screen though. Do you use Photoshop? Did you use Save for Web to make sure they’re formatted correctly? Also, are you using Beaver Builder to create Blog posts?

6
Summary

Here’s the link: http://paulabrani.com/japp/

Yes, I’m using Beaver Builder. The images were originally created in Sketch. But I did try saving as in save for web in photoshop and it didn’t make any difference.
If you click on the images I provided to enlarge them, there’s a big diference specially in the legibility of the text and in the photo of the person .

7

What browser are you using and operating system/version? As I’ve checked the images in Chrome macOS and they look crisp.

CloudApp

CloudApp

CloudApp

CloudApp

8

Hi Danny, that’s true. I opened your screenshots and they are in fact good! I guess that makes things more weird then. I don’t understand then what’s happening. I’m using Chrome and macOS Mojave.

9

Same here, macOS Mojave and Chrome. What resolution is your mac configured to?

10

BUt it can’t be my computer’s configuration because I can see the difference between my original JPG and what I see in Chrome after I upload (the images I attached above show this)

11

I strongly advise against using a Page Builder in a Blog Post (unless you’re using the page builder, like BB and Beaver Themer, to SET UP the blog post Template). Here’s a good article. https://beyondbeaver.com/set-up-a-blog-with-beaver-builder-the-right-way/

12

Also, are you seeing a quality issue in the image if you look at it in Media? Like if you open it using the image’s URL?

1 Like
13

No, if I just go to the image’s url I see it perfect, super crispy.

14

Can you add your image using a HTML module and the image tag <img> and see if the image is crisp. If you tell me what your mac resolution is set to I can check on my end.

15

It’s set in “deffault for display”
But hey! Thats was a great idea! Using the html worked!!! I guess I will just do it always like this! Thank you very much for taking the time to answer me. I really appreciate all the help!

16

OK, so if using the HTML module with an img tag worked then it must be related to srcset. When you say your resolution is set to default what size is that?

Mine looks like this:

CloudApp

17

Actually, I see the difference only in the image that occupies the entire width of the block. Not on the version that was only half module.

Screen: 1440x900

18

It could be related to srcset max-width. Can you add the following to your child theme’s functions.php file and see if this resolves the issue.

function increase_max_srcset_image_width( $max_width ) {
	return 2000;
}
add_filter( 'max_srcset_image_width', 'increase_max_srcset_image_width' );
19

Sorry, I don’t know anything about development/coding.
Am I in the correct place? Is there a specific line number to write it in?

arnold
arnold1420×510 71 KB

20

You’re, but that doesn’t look like a child theme. If you don’t use a child theme, you can add the code to a plugin like the one below.

1 Like