Hi, @unais4.
Thanks for reaching out to us, and for sharing the steps you’ve taken to try and resolve this issue.
If I may ask, what Image Resolution are you using? If you haven’t already, please try setting the Image Resolution to “Full” (either on the background image or the Image widget itself) and see if this makes a difference. Ref: https://www.loom.com/i/943cc8638e404fbfb794f5c2c41d703d
If that doesn’t help, please let us know.
Kind Regards.
Thread Starter
unais4
(@unais4)
Hi, @aracelil.
Thanks for your reply, unfortunately it didn’t work for me. I’ve also tried to see if it was because of the jpg format of the image and I’ve changed it to others, but that’s not it either.
I’ll make a list of the things I’ve reviewed to rule out things:
Check if the image was already pixelated before uploading it (check the original file).
Try uploading it as a PNG and JPG with different compression.
The following lines in functions.php:
add_filter(‘jpeg_quality’, function($arg){return 100;});
add_filter(‘wp_editor_set_quality’, function($arg){return 100;});
add_filter( ‘wp_calculate_image_srcset’, ‘__return_false’ );
add_filter( ‘jpeg_quality’, function() { return 100; } );
add_filter( ‘wp_lazy_loading_enabled’, ‘__return_false’ );
Insert the image as a normal Elementor widget and as a section background.
Try different image sizes in the “Image Size” option (thumbnail, medium, large, full size).
Check that a plugin isn’t causing this. I haven’t deactivated them one by one, but none of the ones I have should be causing it.
Check that it isn’t a CSS I added.
Check that it is not an individual image configuration within Elementor, like some CSS filter.
The image also looks fine in all object settings except the cover setting, i guess it’s not an individual image adjustment because I have more images of the same type posted in other sections of the page and the same thing happens.
Thread Starter
unais4
(@unais4)
Update:
I think I’m getting closer to the root of the problem. I’m at a point where I don’t really know what I’m doing because I haven’t seen any of this and I don’t know how it works.
Trying things out, I went into the php.ini file and removed the ; from extension=gd, restarted Apache and MySQL, and uploaded the image again. Surprisingly, the quality improved. It still has that graininess, but it’s noticeably less. I also noticed that now when I upload the image to the WordPress library, it scales it automatically. This means that the image that was 4672×7008 becomes 1707×2560. I thought the remaining graininess was due to the image losing quality when scaled, so I added the following to functions.php to disable scaling:
add_filter( ‘big_image_size_threshold’, ‘__return_false’ );
This disabled it, but it also made the grain look just as bad as it did before.
I have also verified that scaling the image manually with gimp and leaving it at practically the size of the container 450×720 eliminates the grain, obviously the image loses quality and when you zoom in on it it is even more noticeable, having an image with such quality it would be sad to have to choose to leave it with a worse quality so that it does not look grainy, the grainy image loses grain as you zoom in on it and it gets bigger, which I suppose confirms more that it is a problem when viewing an image with such a high resolution in a smaller space, honestly I don’t know if there is a solution or simply all black and white images should be seen like this in any editor not just Elementor.
Now I’m at a standstill again, but I guess this gets me a little closer to the root of the problem.
-
This reply was modified 8 months ago by
unais4.
Plugin Support
Milos
(@miloss84)
Hi there,
Thank you for contacting us.
This is more about how the browser handles huge black-and-white images when they’re forced to “cover” a container. With color images, the artifacts are hidden, but grayscale makes them very noticeable.
A couple of things you can try to fix this:
- Don’t disable srcset. If you turn it off, the browser only gets the full-size image and has to shrink it down itself, which looks terrible.
- Make sure you’re not uploading a 7000px photo for a 450px container. Export a version that’s about 2× the size of the box (for example, ~900×1440 if the container is 450×720). That gives you clean results even on Retina screens.
- If you can, enable Imagick in PHP (instead of only GD). The downsizing is much smoother, especially for black and white.
- If you still need to use a CSS background, prepare two versions of the image (one at display size and one at 2×) and swap them with a media query.
- When exporting black and white photos, disable chroma subsampling (use 4:4:4 in Photoshop/GIMP) and maybe add a little dithering. WebP or PNG often look better than JPEG for these kinds of images.
The issue comes from feeding the browser a giant grayscale image and letting it shrink it.
Hope this helps.
Kind regards
Thread Starter
unais4
(@unais4)
Hi @miloss84,
Thanks for your reply, IT WORKS!!! I was going crazy scraping and testing things, it was definitely the imagick along with the image size, personally I haven’t noticed a difference between the jpg and webp formats for the problem I had, but I will use webp because I understand that it works better.
The imagick along with using x2 the size of the container for the image has been the solution, the image looks perfect and I can put it in cover without problem, so now the responsive of my website looks great!
I am worried about how a black and white image that occupies the entire width of the page and has to exceed 3500px the image will be seen, I will use this to let me upload the image of that size without letting WordPress scale it: add_filter(‘big_image_size_threshold’, ‘__return_false’);
I’ll try it tomorrow, and if it’s not possible I’ll upload a slightly smaller image. I’m very grateful to you and @aracelil for the help. It’s clear that you know your stuff. Thanks again.
