How To Decrease The File Size Of A Jpeg

The primary fashion to reduce the file size of an image is by increasing the amount of pinch. In almost prototype editing applications this is done by the selections you lot make in the "Relieve As" or "Export As" dialog box when saving a PNG, JPG, or GIF. The more pinch, the smaller the file will be and the faster it will load on a webpage.

But outset, you'll need to decide which of the three file formats you lot want to utilise. If your paradigm 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 all-time choice. If a similar photo needs to have lossless pinch or transparent areas, then a PNG-24 will be required. If you have a simple graphic with few colors and solid areas, and so your all-time option will be a GIF or PNG-8. We'll accept 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

Information technology's easiest to shrink a JPG (also called JPEG) because there'south just ane thing to consider: quality. When yous consign to JPG from an image editing programme, you'll exist prompted to select the quality level you want. You might just see a few choices like: low, medium, high, or maximum. You lot might exist given a number range, for instance 0 (lowest quality) to 12 (highest quality). Or y'all might be asked to select a per centum from 0% (lowest quality) to 100% (highest quality). You should always select the lowest quality that is still suitable for your purpose.

1 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 effort another reduction. When you hit a quality level that is unsatisfactory, then support to the lowest level that was still good enough for your purposes. Ever keep in mind what the purpose of the graphic is. If you are posting a blossom photo to a botanical encyclopedia website, you lot probably want it to exist adequately loftier quality and so small distinguishing details can be clearly seen. If y'all are posting a bloom photo simply to celebrate the arrival of spring, then a much lower quality would probably be fine. Let's take a slice of a bloom 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 eighty% setting is well-nigh indistinguishable from the 100% setting. Just let's come across if nosotros tin compress it further.

60% quality, 28 KB file size
Fifty-fifty at 60% near people wouldn't notice any difference from the 100% setting and since it's a quarter the size, information technology would load four times every bit fast.

twoscore% quality, 17 KB file size
For many general uses, even this twoscore% quality image would be acceptable. And 5 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 photograph from FCIT'south collection of stock plant photos on the ClipPix ETC website.

Another way to salve file size with JPG is to slightly blur the image before you lot compress it. An paradigm with fewer sharp edges and crisp details will compress much smaller. Maybe you intend to use a photograph every bit a background image. That's a perfect case for using a blurred photograph. Yous can fifty-fifty mistiness just parts of an image and attain file savings. Below is a photo of a 24-hour interval lily with a busy background. The file size is 77 KB when compressed at 60% quality.

Day lily

If nosotros have that same image, select the background in an image editing program similar Photoshop, and and so blur the selection, only the groundwork will blur and the flower will remain sharp. The photo below was exported to JPG at the same 60% quality setting equally above and is only 54 KB—a savings of most 30% of the file size so information technology will load much faster. In this instance, we cease up with a slightly more artistic photograph where the focus remains properly on the flower itself and also achieve significant savings in file size. That's a win-win.

Day lily with background blurred

I final note about JPG. Think that this is a lossy format. Every time yous save a file as a JPG, you lose quality. If you think that you'll e'er want to use the same photo again, make sure you save your original in a format similar TIFF or PSD and and then but export the file to JPG. That gives y'all both the compressed JPG to use on the Web and your original uncompressed file that you lot can utilize again later. The one thing you definitely don't desire to exercise is save your only copy of a file as a compressed JPG, reopen it to edit, and save it out over again every bit a JPG. That's like making photocopies of photocopies. Each time the quality volition get worse. It's always improve to go back to your original, uncompressed file.

Compressing a GIF

The traditional pick of file type for graphics consisting of uncomplicated 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, simply y'all can prepare a lower color depth for substantial savings in file size. For the best results endeavour to go at or just nether one of the following numbers of colors: 256, 128, 64, 32, 16, 8, 4, or ii. For example, if your image has 33 colors in it you'll exist able to shave off a lot of the file size if you can reduce the palette to 32 colors, only yous won't get the aforementioned savings moving from 32 down to 31 colors.

Run across "What is bit depth?" for more information and example images.

When yous salvage (or consign) as a GIF, commencement select the number of colors you want in your final image. 2nd, if you notice "banding" in areas of gradients, the prototype probably wasn't a good candidate for GIF in the first place merely you can brand the banding less obvious by selecting a dither blueprint—usually the "diffusion" pattern volition work best. Third, if you accept transparent areas of your image, make certain to select "transparent."

There are a few settings you can ignore. Get out "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 exercise today. The "Matte" setting used to be very useful for helping blend the edges of a transparent GIF into the background, just if that's a problem for a particular image, you lot 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 too.

Dancing robot

Sample graphic from FCIT's drove of robot illustrations on the TIM website.

Compressing a PNG

We finally go to PNG. It's concluding on the list not because it's the least important, simply because it incorporates features of both JPG and GIF. Its popularity has been growing steadily and, by some estimates, is now used on more than websites than either JPG or GIF. It may seem a bit more circuitous at outset, but if you lot will exist creating web graphics on a regular basis, it'due south certainly worth mastering.

Beginning, yous'll need to decide whether to consign as PNG-eight or PNG-24. PNG-eight is similar GIF in that information technology'south all-time for graphics with few colors and solid areas like logos. The major difference betwixt 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 deviation between PNG-24 and JPG is that PNG-24 is lossless so the file size will be somewhat larger than a JPG, simply the quality will be higher.

Exporting as a PNG-8. If you consign to PNG-eight from a graphics program you will see an interface that is very similar to GIF. Similar a GIF, you'll need to select the number of colors (2, iv, viii, 16, 32, 64, 128, or 256), whether to add a dither design or not, and whether you demand transparency or not. The only significant difference is that the PNG-8 volition be slightly smaller.

Here'southward a cartoon exported as a 32-colour GIF. The file size is 13.6 KB.

Cartoon saved as GIF

Here's the same cartoon exported as a 32-color PNG with exactly the same settings as above. The file size is x.two KB. That's a 25% savings in file size.

Cartoon saved as PNG

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. Dissimilar a JPG, no image information is discarded. That too ways the file size tin can be quite large.

Hither'due south a photo of macaws exported as a PNG-24. Its file size is 400 KB. That's pretty large.

Photo saved as PNG

Here's the aforementioned photo exported equally a JPG at the maximum quality (100%) setting. Its file size is 259 KB.

Photo saved at makimum quality JPG

And here's the aforementioned photograph exported as a JPG at the high quality (60%) setting. Its file size is only 69 KB.

Photo saved as high quality JGP

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 employ 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 yous desire a lossless format, y'all'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 option. A good instance is a screenshot that includes lots of modest type. Past its very nature, a JPG is going to "smudge" the type making it slightly harder to read. The PNG will reproduce the blazon pixel-by-pixel just as it appeared originally on the screen.

Related pages

What is the departure between bitmap and vector images?
What is bit depth?