Question

Why do I see many websites, both big and small, using JPG logos that were created on a solid white canvas instead of a GIF or PNG with a transparent canvas? It bothers me to see a round logo in the center of a white square as the image placed in a div with a gradient (or non-white color) background.

Is there some reason that I dont know about that makes the ugliness of a JPG in a white square better than a logo that can be dropped on any color background or are these websites just not doing it proper?

Answer 1

This is subjective, but I’ve found a lot of folks implementing websites (both designers and developers) are unfamiliar with the differences between JPGs and PNGs. They’re used to everything being a JPG, so they put everything in that format.

When this happens, I try to explain the pros and cons of each format:

• JPGs are great when you have continuous-color photos
• PNGs and GIFs are great when you want transparency: when you want something to merge into the background. GIFs only have “transparent or not”, PNGs can have varying levels of transparency (like a drop shadow)
• PNGs and GIFs are great when you have a limited number of colors, like a diagram or most logos, and they can be smaller than a JPG
• PNGs and GIFs are great for things with hard transitions, like text. JPG will give compression artifacts.

I really think it all boils down to education.