Bad picture in Explore
Permalink
Hi
I am using the Neat theme and I have my Logo inserted as a large picture. It looks good in both Firefox and Chrome, but in Explore the quality is very bad, its like when you otherwise zoom in and the shapes gets this squared box look.
Is there anything I can do ?
I am using the Neat theme and I have my Logo inserted as a large picture. It looks good in both Firefox and Chrome, but in Explore the quality is very bad, its like when you otherwise zoom in and the shapes gets this squared box look.
Is there anything I can do ?
can you give us a url to the site??
www.moveviews.com the logo on the first page, the edges are very different and look way better in Firefox.
Thanks :)
Thanks :)
That could be an aliasing effect of the rendering engine, so more an issue with chrome than with the css. The original image is very big compared to the window width, so is being downsized a long way by the browser.
Start by using a picture element with source sets and breakpoints to render images closer to the window size. That will reduce download size drastically and perhaps by reducing the scaling involved will also reduce the aliasing effect.
A few ideas are on this stackovewrflow post about tricking anti-aliasing effects of transforms, but I don't know if any will help with your graphic.https://stackoverflow.com/questions/6492027/css-transform-jagged-edg...
And another on css tricks:https://css-tricks.com/almanac/properties/i/image-rendering/...
You could also go back to the original in photoshop and play with the aliasing, feathering and transparency there to create a logo that browsers find more palatable. You will probably need to do that anyway to create optimum images for the srcsets in a picture element.
Fine graphics like that are pushing the limits, so it may take a lot of work to get it rendering just right.
Start by using a picture element with source sets and breakpoints to render images closer to the window size. That will reduce download size drastically and perhaps by reducing the scaling involved will also reduce the aliasing effect.
A few ideas are on this stackovewrflow post about tricking anti-aliasing effects of transforms, but I don't know if any will help with your graphic.https://stackoverflow.com/questions/6492027/css-transform-jagged-edg...
And another on css tricks:https://css-tricks.com/almanac/properties/i/image-rendering/...
You could also go back to the original in photoshop and play with the aliasing, feathering and transparency there to create a logo that browsers find more palatable. You will probably need to do that anyway to create optimum images for the srcsets in a picture element.
Fine graphics like that are pushing the limits, so it may take a lot of work to get it rendering just right.
Looking at the page in IE reminds me I had seen similar in recent past. IE is going to be fazed out soon, so I chose to just let it be, as it was displaying correctly in every other browser. There's some work that can be done as @johnthefish points out. Whether it's worth the while or not is up to you!
