Logo looks weird on mobile but not desktop

Question

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 as a PNG (24 for true color) and selected optimize for text (optimize for graphics made some of the image a little fuzzy and not as crisp). It looks great and as expected when I open it on my computer and when you look at it in a browser on desktop, but on mobile it looks all kinds of weird..

As expected:

Not so good:

There is a faint red outline around the stars and some of the overlapping text (most notably the C and bottom of the S). Also, the edges look a bit jagged. Is there anything I am or could possibly be going wrong? I would like to stay with PNG to maintain a transparent background.

EDIT

So.. I ended up choosing export (not save for web) and using 300dpi.. The jagged edges are gone and it looks like the red is gone as well. I am not sure if 300dpi solved it or using export solved it..

Answer 1

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.

Answer 2

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 http://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.

Answer 3

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: http://code.tutsplus.com/tutorials/the-right-way-to-retinafy-your-websites--net-31793