Grainy and pixelated background images in Google Chrome: how to solve?
Hi all, i'm working on a Wordpress custom theme and I have this issue on Chrome. I'm using the thumbnail image as a background in various parts of the theme, set with background-size: cover and background-position: center, but they appear to be grainy or pixelated, as if they were low quality. I already tried the image-rendering property, but with no results. I also noticed that the issue exists when using Chrome, while on Firefox is working fine, and that occurs only when using the image as a background, as the same image used as an element in the post content does not have the same issues. It's driving me crazy, how can i solve this?
20 Replies
nothing comes to mind. but can you show screenshots of the visual difference and share the code of how you apply them
and this is the Chrome's one. Sorry for the double message, I messed up
are you per chance zoomed in on chrome? the text also looks a bit thicker
and here is the grainy one as a background and as an image element in the post
nope, i just checked
hhm, looks like the browsers choose to render it differently. Probably nothing you can fix yourself . Keep the question open, maybe someone has ideas
difference between the normal and bg-cover could be explained. it is resizing a bit
yeah, i've read online that chrome does it. Thank you for your help
good luck with the project
they are both scaled, the original image is like 5000x5000 px (yeah, it should not be this big, was just trying), but the background one is also cropped by the background cover to adjust to the container dimension, while the second one it's not
ahh, yea, with that size, little differences in rendering could be accentuated.
but why only as a background and only on chrome? btw i'll try with smaller images to see if chrome persists with this behaviour
no idea why, different browser engines under the hood
e.g. these are way smaller (but still big, like 1600-2500 px wide)
try to make them not larger then they will appear. also for the performance
yeah, i'll give it a try. Thank you
👍
@DanRos88 - I came across your post. Did you ever find a good solution? I have a similar issue where Windows + Chrome the down-sampled image looks horrible. Windows + Firefox looks fine. Looks fine on Mac.
Unluckily, no.
I've trying image-rendering and some other things found on google such as setting transform to force GPU. none of it seems to make a difference. Windows + chrome just looks worse when compared to Firefox on Windows or Chrome/Firefox on Mac. The down-sampling of Chrome+Windows is clearly inferior.