8KB PNG Chart	36KB JPG Chart
18KB PNG Sunset	51KB JPG Sunset

PNG Sunset	JPG Sunset
PNG Chart	JPG Chart

The charts above show two different images at different levels of zoom and compression. As you can see, the PNG works for text based images, and keeps the files size low. JPG causes a file to be larger, but works much better for gradients/lifestyle images.

Both JPG and PNG are methods that describe how a program encodes an image file. Basically a JPG describes an image in blocks, and the greater the file size allowed, the smaller those blocks are. A PNG looks at each individual pixel and says there are 6 reds then 4 blues in a line etc. Look at it another way, imagine a book that you want to reduce in size. Using a JPEG method, you are summarising each page for example “The opening page talks about Joe, a butcher, and his childhood. There is a paragraph describing his shop” and so on. When the book is then opened the JPG system then rereads the summary and tries to create a book.

Using a PNG system would be to look at each word, and then write the word and the number of times it occurs. For our example, a novel that starts as “Joe was a butcher” translates to “Joe 1 was 1 a 1 butcher 1”, which would end up bigger than the actual novel. However if you had a string of text that might be some kind of code like “Alpha Alpha Alpha Charlie Charlie Bravo Charlie Charlie Charlie” that would be “Alpha 3 Charlie 2 Bravo 1 Charlie 3” and you could get back to the exact text.

Images that have gradients and lots of organic curved lines are like books. They have a lot of naturally occurring segments that are had to break down to the pixel level without lots of detail. This is why JPG compression suits sunsets and PNG suits logos. Selecting the right compression is a little bit of an art, and depends on the situation at hand. Not all browsers support 24bit PNGs with transparency, and so a GIF may be more appropriate. A JPG of a large logo will almost certainly result in some lossy areas, whereas a PNG is going to create a much crisper look that can be used at any size.