PNG vs JPG

Often times when I’m teaching clients how to best utilize their websites they’re confused by the various types of images they can save and upload to their site. Anyone who has ever been taught by me knows I’m a huge advocate of the PNG :) Not so much a fan of the JPG and here’s why… When you design web graphics you want them to appear as clearly as possible and you want the colors to remain intact. A JPG is fine for a photograph, but when you start adding colors and text to that photograph things get a bit fuzzy. Literally. There are, of course, quite a few other file types out there but these are the two main types bloggers and website owners will use. Here’s an example of what a graphic I created looks like when saved as both types, side by side for you to see the difference.

The JPG below has been saved at the maximum quality allowed of a JPG in Photoshop.

Here’s the same side by side comparison saved at medium JPG quality. As some image editing software doesn’t allow for you to choose what quality, this is most commonly seen on the web.

Another comparison of graphics saved as different file types…

and…

Perhaps one of the most obvious examples of PNG vs JPG is when you see text on a photograph. Notice the clarity of the text on the PNG and the blur on the JPG text, as well as the pixelation of the sky in the images below.

The clarity in your graphics is what can set you apart from other websites. Some may argue that JPG files load faster, and they do, but when using graphics like above I’d say the extra few seconds are well worth the wait.

For details on each file type and more, visit this link: http://en.wikipedia.org/wiki/Image_file_formats

Comments

  1. 1
    Zully says:

    Thanks! I love using PNG too!!! :)

  2. 2

    i was just going to mention your last point. i prefer png’s hands down, but i find they can weigh down a site even with compression applied. do you have any special trick on making them smaller??

  3. 4

    Awesome! I thought PNGs were only used for transparent backgrounds. I will definitely be using them more from now on.

  4. 5

    Thanks so much for the tutorial and the visual examples! I definitely will switch to PNGs for now on. ~Dee

  5. 6

    thanks for the compression ideas – i will try those out :)

  6. 7

    PNG is definitely better. I also personally observed that ONG images are better quality. However, for web JPG offers small size.

  7. 8

    Thanks for the clarification, Lindsey – I’ve only recently started to read about why I should be using .png and not .jpg – I will definitely be looking into going with .png for any images that include text!

  8. 9

    This is great. I love using png’s too

  9. 10

    I feel this is among the most vital info for me. And i’m satisfied reading your article. But should statement on some basic issues, The website taste is wonderful, the articles is in reality excellent : D. Just right process, cheers

  10. 11

    Any thoughts on what is best for printing?

  11. 13

    This paragraph is genuinely a nice one it helps new net
    viewers, who are wishing in favor of blogging.

  12. 14

    I have been using jpg for the past 4 years when trying to create my own graphics and could not figure out why they were so blurry. Such a simple fix! Thank you so much!

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>