: Logo looks weird on mobile but not desktop I created this logo in Illustrator (I am not a graphic designer, so be nice =]) and have used the "Save for Web" feature. I saved the file below

@Gail6891361

Try making your graphic double the size, the retina display of your phone has a bigger resolution than your desktop screen

For example, to load a 300x150 logo use a 600x300px image and load it like this:

<img src="http://www.youdomain.com/logo600x3000-2x.png" width="300" height="150">


You can also ask to the person doing your website to enable CSS rules for retina devices:
@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) {
/* Your css rules for retina websites here*/
}


More informations here: code.tutsplus.com/tutorials/the-right-way-to-retinafy-your-websites--net-31793

Vote Up Vote Down

@Eichhorn212

I've noticed this problem as well and it seems to be that mobile browsers compress your images to save on data usage. Chrome on android does this I'm not sure exactly what other browsers do it. Try turning off bandwidth management.

Vote Up Vote Down

@Lengel450

That caused by, lets say, 'compatibility'.

There is such think on the web as 'PNG alpha transparency' and specification how browser should show it.
Well, shortly, there are lot of ways to make PNG semitransparent, but for web works some of them. While the most browsers should work (http://caniuse.com/png-alpha) there are always exceptions.

To test how it works, go entropymine.com/jason/testbed/pngtrans/ with Your mobile browser.

To bypass it, just use plain white background in AI. Not ideal, but solution.

Also, You can outline all logo by thin white line, that cause 'PNG bleeding' turn white in semitransparent areas.

Vote Up Vote Down