Education: PNG vs. JPG


Just wanted to post a little lesson that I had to learn back in the day and that has blessed my design life ever since. It is about the difference between JPG and PNG (pronounced ping) when it comes to crisp graphics.

JPG is a great file format for photos. PNG is the preferable file format for text and illustrations—anything that has very clean lines. Everyone has heard of JPGs and most people assume that they’re appropriate for any type of image. On the other hand, people are less familiar with PNGs and commonly are concerned about whether all computers can properly process and display PNGs (the answer is yes).

Let me show you what I’m talking about. When you use JPG for clean graphics, there is fuzzy pixel breakup around the edges. Lika-so:

When you use PNG, your beautiful, crisp lines are preserved. Observe:

I have intentionally saved the image at the lowest quality for JPG so that the problem is exaggerated, but this fuzzy pixel breakup will happen to some degree at pretty much any web-quality JPG.

So if you want to look your best, use PNG! When saving PNGs at web quality, the file size is still relatively small, so you won’t need to worry about slow page loading. Feel free to ask me any questions about this. I admit that I’m no expert, but I’m sure you can at least see what I’m talking about.

By the way, I Googled this to see if anyone else has talked about it and found this that made me laugh.

(If you’ll notice, my portfolio has JPGs instead of PNGs and having to do it that way was like having to design with Papyrus. Unfortunately, because we purchased templates for our portfolios online [next on to-do list: learn Flash!], I had to adhere to their requirements. So I’m really not trying to be hypocritical, and believe me, my eyes bleed every time I see the inferior image quality in my portfolio!)