JPG, PNG, or GIF… what should I use and why does it matter? Part 1.
Hi again. After writing that long post on the value of vector images, I’ve decided to dive a bit deeper into some raster image formats, so today I’m launching the first of two posts that will break down some of the advantages and disadvantages of the common raster image file types you’ll find on the internet: JPG, PNG & GIF. Like my previous post, this will be based on my experience with those formats, more than on any actual research, so it’s possible that I will miss something important. If I do, and you would like to share, please do so in the comments section below.
Why talk about these formats? How can this help you? Well, if you have anything to do with the image side of building websites, it’s important to know what the options are for image formats, and how they will effect the load times of your websites. I think a lot of people default to using JPGs when a PNG or GIF might look better and have a smaller file size. As everyone should know from their own web browsing habits, if a site takes more than a few seconds to load, the visitor might get bored and move on. If you have a page loaded with images, you’ll want to be sure they all look as good as possible while loading as fast as possible. It can be a bit of a balancing act: quality vs. speed.
Let’s start with JPG, and what I know about it:
- It’s a “lossy” compression format, meaning that it compresses by throwing away bits of data.
- The more a JPG image is compressed, the worse it looks.
- It doesn’t allow for transparent pixels.
- In Photoshop, when saving for web and choosing your compression quality, you might think that “Highest” means highest compression. It’s actually the opposite. It’s referring to the visual quality of the image. So “Lowest” is the most compressed, lowest quality image.
On to PNGs:
- It’s a “lossless” format, meaning it compresses without throwing anything away. How? No idea, apart from it makes use of LZW compression in some way. What’s LZW compression? Look! Behind you! moving on…
- There are two PNG options I know of from my work in Photoshop; PNG-24 and PNG-8. PNG-8 limits the number of colors to get a smaller file size. PNG-24 doesn’t do that.
- Both PNG formats allow transparent pixels.
- Some of the older web browsers that people still use, for whatever reason, don’t support the PNG’s transparency setting (as I recall from my experience years ago; I might be wrong on this one).
Of the three, the one I have the least experience with is GIFs, so don’t expect much:
- It works by limiting the number of colors allowed to be in the image to 256 or fewer.
- Because of the color limitation, it works best for images that don’t have many gradients. The fewer colors there are in the final GIF, the more banding in gradients appears.
- It allows transparent pixels.
- It can be animated.
- Many of the options available when saving a GIF remind me of the same options for PNG-8, and the output quality seems similar, so… Yeah.
Now let’s move on to some “show-and-tell.”
In this set of pictures I’ll be comparing six different compression levels in JPGs, discussing each one, and then at the bottom I’ll include a PNG and a GIF version and discuss them. If you hover over the images, you will see how each one compares visually to the initial JPG.
JPG 100 Compression Quality example
JPG: Compression Quality = 100 : 39kb
This is the smallest amount of compression available to a JPG. It may actually be no compression at all, for all I know, and the end result is the largest file size at 39kb. It’s also the sharpest/clearest a JPG can be. It’s downhill from here.
JPG 80 Compression Quality example
JPG: Compression Quality = 80 : 26kb
The 20 point drop in quality still looks okay to me. For each of these examples you will want to look to the red square first. I’ve noticed that red seems to suffer the most in JPG compression. Right now the edges of the text & numbers still seem pretty sharp. The file size dropped from 39kb to 26kb; so a savings of 13kb. Not bad.
JPG 60 Compression Quality example
JPG: Compression Quality = 60 : 18kb
Now we start seeing some jaggies* showing up in the colors around the numbers. It’s not too bad on the white and black squares, and they actually hold up best throughout this experiment. This is why, if minimizing jaggies is necessary, I don’t usually drop below 70 Compression Quality. The file size dropped from 26kb to 18kb; so a savings of 8kb, and the file size is now a bit less than half of the original 39kb.
* I don’t know if “jaggies” is the proper term to use to describe the compression artifacts (jagged pixels) that appear along edges inside an image the more it’s compressed, but it’s what I’ve always used and I’m not stopping now.
JPG 40 Compression Quality example
JPG: Compression Quality = 40 : 12kb
At this point it should be pretty obvious that the image quality is getting worse, especially in the red box. The rest of the numbers are still mostly sharp, but red is really starting to look fuzzy. The file size dropped from 18kb to 12kb; so only a savings of 6kb. The only time I dip into this range is if I have a raster image that needs to go into an animated Flash banner ad, where the entire file size limitation is usually between 40-55kb, and every kb counts.
JPG 20 Compression Quality example
JPG: Compression Quality = 20 : 10kb
More jaggies. The black & white squares are holding up the best compared to the other squares, but they still don’t look good. The file size dropped from 12kb to 10kb; so a savings of another 2kb. Again, unless you need to get an image down to as small a file size as you can, there’s no reason to go down this far. The lowest I will go in a Flash ad is around 30, and then only if the image has low detail and going any higher will make the end SWF file too large.
JPG 1 Compression Quality example
JPG: Compression Quality = 1 : 6kb
This last one I did just to show the most compression available to the JPG format. The file size dropped from 10kb to 6kb; so a savings of 4kb, but it looks about as awful as it possibly can.
PNG-24 : 8kb
Here we are at PNG. It looks as sharp as the JPG:100, maybe even a bit sharper, but that could just be my imagination. So how does it compare in file size? It’s 8kb. A bit smaller than the JPG:20. WOW! right? Now before you think this is the obvious choice for all graphic compression, I must say that it’s only that small because it’s a simple image without gradients. When gradients are introduced, as you will see in the next post, the file size shoots up. That said, if you are making an image that uses text or solid shapes against a solid background, you should be able to save on file size and keep the text as sharp as possible by going with PNG-24 instead of JPG. Don’t just take my word for it though; test & compare.
GIF-32 : 6kb
Lastly, a GIF with the color setting set to 32 (so 32 individual colors, at most). I went with 32 because there isn’t too much difference between how it looked and the options with more colors. If you look closely at the black half of the “G”s you will see some of the stair-stepping that I mentioned in my previous post, especially on the bottom curve of the “G”. This is one of the things you get when you start limiting the number of available colors. The file size is only 6kb, and even with the stair-stepping, it looks better than the JPG:20. Still, it’s only 2kb better than the PNG-24 version, so depending on where the image needs to go, you would be better off sticking with the PNG.
Wasn’t that fun? In the 2nd part we will have even more fun taking a look at how each of the formats handle/mangle an image with gradients.
Thank you for reading, and I look forward to any feedback you want to share.