The primary way to reduce the file size of an image is by increasing the amount of compression. In most image editing applications this is done by the selections you make in the “Save As” or “Export As” dialog box when saving a PNG, JPG, or GIF. The more compression, the smaller the file will be and the faster it will load on a webpage.
But first, you’ll need to decide which of the three file formats you want to use. If your image is a photo with lots of colors or an illustration with gradations and you want to squeeze the file size down, JPEG will probably be your best choice. If a similar photo needs to have lossless compression or transparent areas, then a PNG-24 will be required. If you have a simple graphic with few colors and solid areas, then your best choice will be a GIF or PNG-8. We’ll take a look at how to get the best compression in each of the three file types starting with JPEGs. For information about compressing PNGs or GIFs, please scroll down this page.
Compressing a JPG
It’s easiest to compress a JPG (also called JPEG) because there’s just one thing to consider: quality. When you export to JPG from an image editing program, you’ll be prompted to select the quality level you want. You might just see a few choices like: low, medium, high, or maximum. You might be given a number range, for example 0 (lowest quality) to 12 (highest quality). Or you might be asked to select a percentage from 0% (lowest quality) to 100% (highest quality). You should always select the lowest quality that is still suitable for your purpose.
One strategy for selecting the best level is to start with a fairly high quality setting and if it looks OK, try reducing the quality a bit. If the reduced level looks good enough, then try another reduction. When you hit a quality level that is unsatisfactory, then back up to the lowest level that was still good enough for your purposes. Always keep in mind what the purpose of the graphic is. If you are posting a flower photo to a botanical encyclopedia website, you probably want it to be fairly high quality so small distinguishing details can be clearly seen. If you are posting a flower photo just to celebrate the arrival of spring, then a much lower quality would probably be fine. Let’s take a slice of a flower photo and export it out at six different quality settings.
100% quality, 103 KB file size
The image below was exported at 100% quality. One would rarely ever need this setting.
80% quality, 48 KB file size
The 80% setting is virtually indistinguishable from the 100% setting. But let’s see if we can compress it further.
60% quality, 28 KB file size
Even at 60% most people wouldn’t notice any difference from the 100% setting and since it’s a quarter the size, it would load four times as fast.
40% quality, 17 KB file size
For many general uses, even this 40% quality image would be acceptable. And five times faster to load than the original.
20% quality, 12 KB file size
Getting ugly here.
0% quality, 7 KB file size
The blockiness of extreme JPG compress in very obvious.
Sample photo from FCIT’s collection of stock plant photos on the ClipPix ETC website.
Another way to save file size with JPG is to slightly blur the image before you compress it. An image with fewer sharp edges and crisp details will compress much smaller. Perhaps you intend to use a photo as a background image. That’s a perfect case for using a blurred photo. You can even blur just parts of an image and achieve file savings. Below is a photo of a day lily with a busy background. The file size is 77 KB when compressed at 60% quality.
If we take that same image, select the background in an image editing program like Photoshop, and then blur the selection, only the background will blur and the flower will remain sharp. The photo below was exported to JPG at the same 60% quality setting as above and is only 54 KB—a savings of about 30% of the file size so it will load much faster. In this example, we end up with a slightly more artistic photo where the focus remains properly on the flower itself and also achieve significant savings in file size. That’s a win-win.
One last note about JPG. Remember that this is a lossy format. Every time you save a file as a JPG, you lose quality. If you think that you’ll ever want to use the same photo again, make sure you save your original in a format like TIFF or PSD and then just export the file to JPG. That gives you both the compressed JPG to use on the Web and your original uncompressed file that you can use again later. The one thing you definitely don’t want to do is save your only copy of a file as a compressed JPG, reopen it to edit, and save it out again as a JPG. That’s like making photocopies of photocopies. Each time the quality will get worse. It’s always better to go back to your original, uncompressed file.
Compressing a GIF
The traditional choice of file type for graphics consisting of simple areas and few colors is GIF, although one can now achieve the same results with a PNG-8 (and at a smaller file size).
GIF images are limited to 256 colors, but you can set a lower color depth for substantial savings in file size. For the best results try to get at or just under one of the following numbers of colors: 256, 128, 64, 32, 16, 8, 4, or 2. For example, if your image has 33 colors in it you’ll be able to shave off a lot of the file size if you can reduce the palette to 32 colors, but you won’t get the same savings moving from 32 down to 31 colors.
See “What is bit depth?” for more information and example images.
When you save (or export) as a GIF, first select the number of colors you want in your final image. Second, if you notice “banding” in areas of gradients, the image probably wasn’t a good candidate for GIF in the first place but you can make the banding less obvious by selecting a dither pattern—usually the “diffusion” pattern will work best. Third, if you have transparent areas of your image, make sure to select “transparent.”
There are a few settings you can ignore. Leave “Web snap” set to zero. This setting is a left-over from the days when most monitors didn’t display the millions of colors that they do today. The “Matte” setting used to be very useful for helping blend the edges of a transparent GIF into the background, but if that’s a problem for a particular image, you should probably switch to PNG anyway.
And, of course, GIF has been the traditional choice for animated images, although PNG is poised to take over that area as well.
Sample graphic from FCIT’s collection of robot illustrations on the TIM website.
Compressing a PNG
We finally get to PNG. It’s last on the list not because it’s the least important, but because it incorporates features of both JPG and GIF. Its popularity has been growing steadily and, by some estimates, is now used on more websites than either JPG or GIF. It may seem a bit more complex at first, but if you will be creating web graphics on a regular basis, it’s certainly worth mastering.
First, you’ll need to decide whether to export as PNG-8 or PNG-24. PNG-8 is similar GIF in that it’s best for graphics with few colors and solid areas like logos. The major difference between PNG-8 and GIF is that the PNG-8 file will generally be smaller than a GIF file. PNG-24 is similar to JPG in that it’s best for continuous-tone images like photographs or other images with more than 256 colors. The major difference between PNG-24 and JPG is that PNG-24 is lossless so the file size will be somewhat larger than a JPG, but the quality will be higher.
Exporting as a PNG-8. If you export to PNG-8 from a graphics program you will see an interface that is very similar to GIF. Like a GIF, you’ll need to select the number of colors (2, 4, 8, 16, 32, 64, 128, or 256), whether to add a dither pattern or not, and whether you need transparency or not. The only significant difference is that the PNG-8 will be slightly smaller.
Here’s a cartoon exported as a 32-color GIF. The file size is 13.6 KB.
Here’s the same cartoon exported as a 32-color PNG with exactly the same settings as above. The file size is 10.2 KB. That’s a 25% savings in file size.
Sample graphic from FCIT’s collection of tech cartoons on the TIM website.
Exporting as a PNG-24. Since PNG-24 is a lossless format, you really don’t have any options about quality when exporting. Unlike a JPG, no image information is discarded. That also means the file size can be quite large.
Here’s a photo of macaws exported as a PNG-24. Its file size is 400 KB. That’s pretty large.
Here’s the same photo exported as a JPG at the maximum quality (100%) setting. Its file size is 259 KB.
And here’s the same photo exported as a JPG at the high quality (60%) setting. Its file size is only 69 KB.
Sample photo from FCIT’s collection of stockanimal photos on the ClipPix ETC website.
Wow, if the PNG is 5 or 6 times the file size of a serviceable JPG, why would I ever want to use it? Well, there could be multiple reasons for choosing the PNG-24 over a JPG.
1. If you need transparency in the image, the PNG is necessary because JPGs don’t support transparency.
2. If you want a lossless format, you’ll need the PNG because even at the maximum setting, a JPG loses information and the image degrades even if it is not apparent at first glance.
3. If you absolutely need a clear image with no JPG compression artifacts, PNG is your choice. A good example is a screenshot that includes lots of small type. By its very nature, a JPG is going to “smudge” the type making it slightly harder to read. The PNG will reproduce the type pixel-by-pixel just as it appeared originally on the screen.
Related pages
What is the difference between bitmap and vector images?
What is bit depth?
