PNG vs JPG

      There are many different types of files you can save your image as. The two most popular, JPG and PNG, are sometimes confusing to choose from. Today, I’ll explain the difference between a JPG and a PNG.

      The first major difference is the quality. As seen above, you can tell that when saved as a PNG, the photo looks clear, but when saved as a JPG, the photo is slightly fuzzy. The blurry fuzziness is particularly noticeable once words are added to a photo on a JPG. PNG’s are usually known to make photos look clearer than a JPG.

      PNG’s do take up more storage, and can take slightly longer to load on a web page. The JPG above is 24.2 KB, whereas the PNG is 270 KB. For some people, like me, I say a slight amount more of storage isn’t a big deal and is usually worth it. I also think it’s worth a few extra seconds waiting for a PNG to load.

      If you still think there’s a problem with the storage and web page speed, there are software programs such as Adobe Photoshop that let you change the size of a PNG. If you’re using Adobe Photoshop Elements 10, you can resize your PNG using this tutorial.

      For some people, photo quality isn’t a big deal. Those people might be thinking, “What’s the big deal with all of this? I can’t even tell the difference! If a JPG is slightly blurred, who cares?” If you’re one of those people who doesn’t care about this at all (but you’re still reading this somehow), there’s still another great feature to my favorite file type, the PNG.

      This is the feature of a transparent background. Let’s say for example, your website had something like a dark gray background. And let’s say you wanted to add text to that website with a dark gray background, except you wanted the text saved as an image. Here’s what will happen:

      With a PNG, you can have a transparent, invisible background if you wanted to, but with a JPG, you’re forced to stick with a non-transparent background.

      Think of these two images shown above with a gray background like a layered cake. A PNG with words only will only save that layer of words, but a JPG will save the layer with words, and it’ll also add one annoying white background. This can get really annoying sometimes.

      Here’s how Adobe displays it. This is a JPG:


      Notice the two “layers of cake,” the text and the forced-on-you background.
      Now look at the PNG:

      The PNG has only one transparent layer of text!

      So now you know about PNG vs. JPG, and that my favorite of the two is the PNG file type.

      Tomorrow I’ll write GIF vs. JPG. A GIF is the third most-used file type I’ve seen on the web.

Advertisements