Education: PNG vs. JPG
Tags: Alma's Work
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!)
Just the other night, we were watching the beginning credits of a movie and my husband said, "Hey, isn't that the font Alma hates."
And thanks for the education.
So you don't know me, but I love your work! I was just wondering what site you got your flash template from. I've been looking for a good one and can't seem to find what I want. I love your website, but thought you had built it yourself. Flash is also on my list of things. Love your stuff… wish I was in Orem to take a class!
Thanks, Holly! We got our templates from bludomain.com. We felt the prices were reasonable (they start you at the $400 options, but if you look, you can find $100 options, and then it costs another $100 to allow you to host your site elsewhere).
How do you get png….
I was actually wondering this today and then I was reading littly sussy and what do you know… ha ha! THanks!
Wow! Thanks!! That was totally helpful. I am modernizing my ancient design degree through lynda.com and I'm loving Photoshop and Illustrator, but I am blown away with how much I don't know.
hahah, reminds me of the mac & Pc commercials!
This is a great post! Thank you for the education!
didn't know!! thx
This is great! Thanks for sharing this. I'm wondering if you use a Mac or PC? If you use a Mac I'm wondering if you have any problem with the colors you see in your photoshop or illustrator and the color looking washed out when you view it on the web? Thanks for your talent and time!! I love your work…and I too wished I lived up north to take a class from you!
Chelsea
aquapoppydesigns at yahoo dot com
mike! so wonderful to hear from you. and your work and alma's work…beautiful! i've just spent an hour combing through your sites and i just am loving what you guys do. congratulations.
Thank you!
I just did a little test on some of my blog graphics and it worked!
It was actually something that has driven me mad for ages.
Thank you so much for this tips.
Susy,
It depends what program you're using. In photoshop and illustrator it's usually a save as feature, or export.
Chelsea,
We do have that problem! I haven't looked it up or learned anything about it yet, but it does drive me crazy.
Thanks for the little lesson! I never knew. I've already used this little tip.