Hi, I happened to be at Best Buy today and I was checking out my site on some of their 1920x1080 res monitors as I don’t have that resolution at home. I was using MS Edge browser as that was loaded on the machines. I found with that browser and resolution was my circle images on this page (8th screen down) were pixelated around the edges.This occured on multiple machines there with Edge and that resolution. I haven’t had this problem on on any other browser,device, or resolution. Any idea why this is happening? Thanks!
Here is the section with the problem. This is not a screenshot from the problem devices, just to show which section of the page has the problem.
Your images are 600x600 .pngs that have been heavily optimized for minimum byte size. To do this, they are converted into colormapped .pngs and the colors reduced to only the few that are needed to render the image at its native size. The image, Process-TGIcon600.png, has only 81 colors in its colormap, so that is all it can render. When scaled way down, heavily optimized .pngs and .gifs suffer from severe pixellation like this because of their sparcely populated, fixed (indexed) colormaps. I do not know of a “workaround” other than to use appropriately sized images to start with and avoid this degree of “optimization”. In other words, give the pngs enough leeway to approximate what they do best which is render a lossless image.
HI ronpat, thank you for your explanation, it makes perfect sense. When I first setup my site, I optimized my images to improve page load. I have since coded many of my images to defer loading, so optimizing them may not be an issue anymore because there will be no instance where a user will enter my page at that section. Thus the images can keep loading before a user scrolls to the point in the page.
My images were loaded large and scaled by html because for some reason, they wouldn’t be crisp on some devices unless i structured it that way. Im sure there is a way to do it, I just cant figure out how to load an image to size and have it be crisp in all scenarios…
Ill try un-optimized images first and see if that works, thank you for looking into this!
I hope that the non-optimized .pngs solve the problem, but I am becoming a bit leery of my well-thought out explanation because I cannot duplicate the effect that I see on your site in any of my browsers. Please do let us know how this turns out.
Yes, 1920x1080, but the images don’t display any larger than110px in diameter, so there is no advangage to using a large monitor. I’m not sure why the monitor size seems important to you… or maybe I’m missing something.
I was just checking because that is the resolution where I saw the problem where the images were pixelated…I haven’t checked on higher resolutions than than 1080p and I haven’t had any problems on lower resolutions.
This screenshot is an attempt to clarify exactly what you saw by comparing it to what I see when I look at your site with Firefox and when I download your images.
It also shows why I doubt my earlier explanation.
The bottom row of images is your web site as I see it in FF. The images are 110px in dia. and moderately pixelated around their perimeters.
The top row of images are your optimized images exactly as I downloaded them from your server. Notice that the perimeters are smooth and the drawing is likewise smooth (as smooth as the size permits.). This is also what I would expect to see when viewing your site.
These images are not zoomed larger or smaller.
How do these images compare to what you saw at the store on the large monitor?
The bottom row looks like the store on the large monitor, actually the store was a little worse.
The pixelation you see in FF, I see in FF as well. Edge too. They are smoother in Chrome. All images are also perfectly smooth on my android tablet with a resolution of 2560 x 1600 (pixel ratio: 2) in all browsers.
Why are they smooth when downloaded but pixelated when displayed in FF and Edge on a desktop?
I don’t know, but because your site’s layout is “adjusted” by JavaScript to fit different widths, I’m inclined to suspect that some sophisticated JS might be contributing to or causing the problem. (Fair warning: I would try to blame world humger on JavaScript if I could make a case for it.)
Someone else with more insight into the workings of WordPress and JavaScript will have to pitch in now.
Yeah they look rubbish on my 22inch monitor (1920x1080). I’m pretty sure the reason is because they are being scaled by the browser! The image is 600px x 600px but you are only showing it as 110px x 110px so the browser is doing the work for you in the best way it can.
If you want them to look good resize them all correctly and upload them in the correct size for the space. Think this is what @ronpat is pointing out.
As an aside if you do have to specify a width/height you should really start using
style="width:110px;" instead of width='110'
Better yet assign this to the class you have set for those images rather than having to specify it in the html.
The screen shot that I included showed the downloaded set of 600x600 images being scaled by the broiwser. The downloaded images look properly dithered around the edges, the images on the live site look not-so-good. The reason for that is a mystery to me at the moment. It could well be a browser issue that I’m unaware of but the screenshot comparing the circles suggests otherwise.
It is highly recommended that the HTML height and width attributes be used to set the initial dimensions of images. In that way the page reserves space for them while it loads.
I just checked to see if the image from the server was preshrunk or not, and it appears to be full size and is being scaled down within the browser somehow. Interestingly, while the image on the web page looks a little rough around the edges, the image in the “View Image Info” box looks very good. The mystery deepens.
I’d like to say it was because i knew about the image-rendering selector but it was more trial and error. I tried the image on codepen with height and width and it rendered fine so must have been something on the site causing it. So then just used firefox - inspect element and turned off the css a bit at a time for the images in question
I just plugged that property into my test table and both rows of the images, one row set to 600x600 and the other set to 110x110 (I was testing your question), developed the pixelation. Makes me wonder what Mozilla’s definition of quality is?
Whatever it is, that property is too poorly supported to use on a real site.
Great find! So since this is a WordPress site, I cant turn off that image-rendering per say because it is coded into the parent theme. and I don’t want to have to change it each time the theme updates. I have to modify it to make the property behave differently.
So I tried:
body {
image-rendering: none;
}
This didn’t do anything. Then I tried:
body {
image-rendering: auto;
}
This fixed the problem in FF, yay! However it didn’t help with IE or Edge nor did any of the Moz suggestions for IE.
Ill try the suggestions of resizing the images and changing to style=“width:110px;” to see if that helps as well. Thank you both for your efforts!
