The logo in PNG format is smeared in Google Chrome, although the image quality is excellent

Question

The logo in PNG format is smeared in Google Chrome, although the image quality is excellent

I insert the logo in the block on the site as a background. In Safari (I have a mac), it looks great. In chrome-a shadow with some white things, and the quality generally suffers. PNG-24 color palette.

Here in Safari

alt text

But in Chrome (if you look closely, you can see that on a white background, the shadow (gray) is not very clear)

alt text

What is it? How do I get rid of this? What I did not do right?

Thank you for your answers.

2

html css google-chrome png дизайн

Author: Deleted, 2014-02-25

Source

1 answers

score 2 · Answer 1

If you use Retina display, try using the following styles, prematurely increasing the size of the png exactly twice:

@media only screen and (-Webkit-min-device-pixel-ratio: 1.5),
only screen and (-moz-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (min-device-pixel-ratio: 1.5) {
    .icon {
        background-image: url([email protected]);
        background-size: 200px 100px;
        background-repeat: no-repeat;
    }
}