1

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:

enter image description here

Not so good:

enter image description here

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..

  • Which mobile browser is this? – user568458 Jun 29 '14 at 11:27
  • This is IE on windows phone. My friend using chrome on android reported similar issues. It seems that the simi-transparent pixels of the image are the ones causing the issues. I also see the problems when I save the image to my phone and view it. – Kenny Thompson Jun 30 '14 at 19:43
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.

  • I don't think this is the case.. I saved the image to my phone and the bottom parts of the s and the top parts of the c are extremely jagged. There are other issues as well. I look at it on my desktop and all is well. My friend is also seeing some weirdness with it. I am trying to save it in different ways (still PNG) and with different aliasing techniques. No avail.. – Kenny Thompson Jun 28 '14 at 1:11
0

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.

0

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

  • I will try this. It sounds like it could be an answer. I know this is venturing into web territory =] – Kenny Thompson Jun 30 '14 at 17:56

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.