Given the three most popular image compression formats (i.e. JPG, GIF, or PNG), it can be confusing when it comes to deciding which to choose. Consider these tips when saving out an image:
- Do you need to save your image with transparency? Then you’ll need to save your image as a 24-bit PNG. (At this point, I have to get technical and warn you there’s another flavor of PNG, the 8-bit PNG…we’ll talk about it in step 3 below.)
The problem with 24-bit PNGs is that graphics software (here’s looking at you Adobe Photoshop) often saves out 24-bit PNGs with poor compression. That means large file sizes. To fix that you must do some post-processing. One option is to upload your images to TinyPNG or install their Photoshop plugin. - Does your image look like a photograph or a painting with those colors smoothly blending from one color to the next? If so, use JPG compression.
JPG is short for JPEG, and that’s an acronym for Joint Photographic Experts Group. The name says it all, the JPEG compression algorithm was designed to compress photographic (or “continuous tone”) style images. When saving in JPG format, keep your image sizes small by choosing between 40% – 50% quality. - If your image doesn’t look like a photograph (e.g. logos, clipart, etc), you should use GIF or 8-bit PNG compression. When saving, you can toggle between the two compression types to see which one produces the smallest file size. Additionally, you can further reduce your file size by limiting the number of colors in your image’s color palette.
GIF and PNG compression work by defining a reduced palette of colors for an image, and you’re able to specify how many colors are in the palette which further reduces the file size. Since these compression types rely on a smaller color palette, they’re great for images which don’t have many colors like logos, clipart, etc. - Bonus: If your image is animated, you can save it as an animated GIF, but I’m not going to get into all the nuance here for the moment.
Lastly, when saving in any of the above formats, pay attention to the file size of your compressed image. When choosing a compression scheme, you are balancing the final file size and the amount of image degradation you can live with. Try to have your image’s final file size as small as possible without degrading the quality of your image beyond your aesthetic goals. That being the case, keep these image file size “zones/categories” in mind:
- Greater than 1 megabyte – If you’re planning on embedding this image directly on a page, whoa! If this image will be “light boxed” (i.e. shown in some fashion when the user clicks on it), ok.
- 500 KB to 1 Mb – Use sparingly if embedding directly on a page.
- 300 – 500 KB – Considering today’s high-speed Internet connections, this is ok.
- 100 – 300 KB – Much better.
- Less than 100 KB – That’s good compression!
- Less than 50 KB – dynamite!
There are more technical details we can cover when it comes to your image compression choices, but the above decision matrix should cover you in the majority of cases.
Photo Credit: samer daboul from Pexels
