Tag Archives: PNG

Don’t use JPEG for logos… and don’t think you can solve the problem by re-saving the JPEG as a PNG

Once you go JPEG, you can’t go back.

You may recall having seen this previously on my blog:

DON'T USE JPEG FOR LOGOS…...USE PNG INSTEAD

I’ve been singing the “Don’t use JPEG for logos!” refrain for so long that most of my clients (and whoever they’re dealing with to deliver logo image files to them) know logos on the web should be in PNG format (or even better, SVG), not JPEG.

But a lot of people don’t seem to understand that you can’t turn a JPEG into a PNG.

Oh, sure, you can technically do that. By which I mean, you can open a JPEG in Photoshop or a similar image editing program, and save it as a PNG. But doing that won’t fix anything.

JPEG is a “lossy” format. That means that its compression algorithm permanently loses data about the image for the sake of a smaller file size. There’s no way to get that data back. PNG is not a lossy format, which means that it compresses the image data in a way that it can faithfully recreate the original input image.

So, what do you think happens when you open a JPEG and re-save it as a PNG? That’s right… it looks exactly like the JPEG did.

Like I said at the beginning, once you go JPEG, you can’t go back. The only option is to track down the original source image in a lossless format, or to manually clean up the results as best as you can.

I wish I could say I’ve never done this, but I’m a pragmatic individual, and I also like to try to solve problems myself… it’s often faster and easier than tracking down the original source. More times than I can remember, I have used the flood tool to turn splotchy logos back into blocks of solid color — doing my best to clean up the anti-aliased edges. And when the characteristics of the logo are right, I’ll often re-set the text in the original fonts (recognizing fonts by sight is a valuable skill), tweaking Bezier curves if the logo has any customizations, and then try my best to faithfully recreate object shapes by tracing them with the pen tool.

It’s perversely kind of fun, and I especially like when I can do it without even bothering to tell the client. They usually just care about the results, not about how the sausage gets made. Except when the client is an Italian restaurant. Then I let them worry about the sausage.

Don’t use JPEG for logos, example #24,315

A client just sent me a logo to add to their website. I let out a little whimper when I looked at the file and noticed that, as is so often the case when someone sends me a logo, it’s a JPEG.

Don’t use JPEG for logos!

Without naming names (or, hopefully, showing enough of the logo to give away the identity), here’s a close-up detail of the actual JPEG I was sent, which does a really good job of illustrating the issues. I zoomed way in on the file in Affinity Photo (my preferred alternative to the 800-pound gorilla of design software), and captured a screenshot which I am sharing here as a PNG — the correct format for logos, because it doesn’t introduce these “compression artifacts“:

Just in case the problems are not readily apparent to your eye, here’s a version where I’ve cranked up the contrast to accentuate the inconsistency of the colors in the image:

And for comparison, here’s what the same level of detail would look like if the image were delivered in PNG format instead of JPEG:

Of course, these days we can do even better than PNG. If a logo is a vector-based design (which it really should be), we can use SVG to get a perfectly sharp rendering of the logo at any size. Here’s what that would look like, zoomed in the same amount:

To be clear: the logo is not for my client’s organization itself. If that were the case I would have pushed back. It’s the logo of a partner organization that was provided to my client to add to the site, so there’s probably little that could be done. (OK, that’s not true; I could — and did — do what I often do in this situation. I went out and found a PNG version of the logo myself.)

All hail PNG!

According to the official spec, it’s actually pronounced “ping,” which I dislike: “ping” already means something very specific (and very different) in the Internet world. But I’ll go along and stop calling it “pee-en-gee”. Apparently I have to start calling GIF images “jiffs” as well, since that’s what the creator of the format calls it. (Maybe as a form of rebellion I’ll start saying “LIE-nux” — or not.)

Anyway… savvy reader(s) will know I’ve actually been using PNG images featuring the all-important alpha channel transparency for nearly a year on my site; it’s what allowed me to swap in the various 34-themed photos in the old design as an underlay below the logo and navigation bar without having to create separate versions of the logo and navigation button graphics for each separate photo. Alpha channels allow you to build transparency information right into an image, so images can be overlaid directly on each other with complex layering effects, regardless of the color of the background. (This is all exceptionally arcane for anyone who doesn’t do web design, or more generally, graphic design; but to us in the field it’s potentially huge.)

Now, PNG has been around for several years, but almost no sites I’ve seen are really taking advantage of alpha channels yet, and with good — or at least, understandable, if lamentable — reason: Internet Explorer did not properly support PNG alpha channels until version 7, which just came out earlier this year. As a result, even though Firefox and Safari have both been able to display these images properly since their inception, no one could really use the format unless they were willing to have upwards of 90% of their visitors look at garbage.

I for one am willing to have my visitors look at garbage: if they’re using Internet Explorer 6, that’s what they’re dealing with anyway! Hence, for those of you who may still be using IE6, I present my annoying JavaScript alert whenever you enter the site. (The rest of you have no idea what I’m talking about, and be glad for it.)

But now, according to log stats on the sites I’ve developed at work (where I actually have stats to look at), the majority of Internet Explorer users have upgraded to version 7. Combine that with the fact that increased usage of Firefox and Safari (corollary: increased use of Macs) has pushed overall IE traffic down to around 80%, and I felt like the time was ripe to dive into a full-fledged transparency fest with this new web design.

Maybe I’ve just been slipped more of Steve Jobs’ special Kool-Aid, but since I’ve gotten to the point where I almost like Leopard’s translucent menu bar, it only seems fitting that I should honor (or, if you prefer, imitate) this new direction in computer interface design, legibility be damned! (OK, I know Microsoft’s on the transparency train too, and it’s hard to say who’s really pulling the mixed-metaphor cart here; Vista came first but Leopard is still ahead of it, and the whole concept behind Vista’s interface seemed to be another attempt at playing catch-up to Apple. But I digress, as usual.)

I actually no longer have access to any Windows computers that haven’t been upgraded to IE7, so I have no way of knowing what the new pages look like in IE6. I expect they’re pretty terrible. Guess what: blame Microsoft!

All hail PNG!!!

Note: I’ve just discovered that there’s a weird problem with an unexpected background image showing up across the top of the page in Safari 2.x, which is the browser most Mac users are running unless they’ve wisely switched to Firefox or zealously upgraded to Leopard. (In other words, it looks great on my MacBook, but I noticed the problem on SLP’s iBook!) I’m hoping to have it fixed soon… once I figure out where the hell it’s coming from!!!