Squeezing your Filesize (KB) - Tutorial

There are lots of cases where you want to squeeze a picture's filesize. Sometimes a small picture can be 250+ KB while a bigger picture can be only 10KB. This is because of the different filetypes. Today I'm going to teach you, how to choose the optimal filetype for your picture. Although this tutorial uses GIMP (all the instructions about plugins and menus are for GIMP), this should help users of other programs that have basic understanding of their program. First of all, let's get to know the 3 common picture file types: Jpeg (aka Jpg) - Joint Photographic Experts Group. A filetype that has many compression options. Anything from ppor quality to high quality. PNG - Portable Network Graphics. A filetype for high quality pictures. Unlike JPG, this filetype supports transparency and semi-transparency. Compression is based on the amount of colors in your picture. The less colors you have, the smaller the filesize will be. Gif - Graphics Interchange Format. Supports animation and transparency. The main limitation on the filetype is that it's limited for only 256 colors per picture. The only reason to choose this filetype, is if you have an animation. If your picture has only few colors, or if it has transparency, I recomend using PNG. Otherwise, use JPG. I'm going to use the picture below for the tutorial:

Jpg - How? I recomend using Jpg when you really need to squeez a file. Let's save the picture as a jpg. Assuming you are using GIMP, Go to the save as screen and type MyFile.jpg to save it as a jpg. If it has more then 1 layer or a layer mask you might get an export screen. Click Export. Now you should see this screen:

Check the box that says "Show preview in image window" to see a preview with the final quality. I got this:

As you can see, there is some loss of quality. So let's increase the quality to 100:

This is nice, but a close look would reveal that there is some loss of quality - take a close look on the black line of the letter F, and compare it with the source. If you still need more quality, it's possible:

I clicked the '+' sign next to the advance options, and changed the subsampling to 1X1 1X1 1X1 (best quality). Now, it's almost impossible to find and loss of quality - this is good! Jpg Tips and Tricks:

1. In order to reduce filesize, notice that the quality increases the filesize logerithmically. This means that decreasing the quality from 100 to 99 will decrease the filesize much more then decreasing the quality from 90 to 89. I usually try to save the Jpg on quality of 97.
2. Changing the subsampling to 1X1 and reducing the quality, can sometimes give better results then the default subsampling (smallest file) with higher quality. Play with the subsampling and quality untill you find the best ratio between quality and filesize.
3. Jpeg doesn't support indexed images - convert them to RGB or Grayscale before saving (Image->mode->RGB/Grayscale)

PNG - How? PNG supports transparency and semi transparency, and the filesize is usually based on the amount of different colors. When you save your image as a PNG when it has more then one layer, it will show this screen:

If your image has transparency in it, choose Merge Visible Layers, in order to merge all the layers to one layer while keeping the transparency (it won't affect the opened image, it will only tell the plugin how to work with the image). You should then see this screen:

I strongly recomend to uncheck the checkbox next to Save color values from transparent pixels. If it's checked, the color of all 100% transparent pixels will be saved - this is usually a waste of memory as it's probably not necessary (unless you hid a watermark or anything else on transparent pixels). Unchecking this checkbox will save you lots of memory. PNG - No Transparency If your image shouldn't have any transparency, you should flatten it. Flattening merges all the layers and causes all transparency to be replaced by the background color, it causes the removal of the alpha (transparency) channel. The PNG plugin will save the transparency channel even if everything is 100% opaque (o% transparent). However, if the image is flattened, it won't save the alpha channel. To flatten your image, First save a backup with all the layers (save it as an .xcf/.psd or whatever filtype your program uses), Then go to Image->Flatten Image (Click). Notice that all hidden layers in your image will disappear, and all the visible ones will be mreged. The name of this layer will become bold to mark that it has no alpha channel. Now, let's get back to the export window:

Choosing flatten image will do the flatening as described above on a temporary copy in your computer's memory. It will save a flattened image and will keep your current copy untouched. Now, the same screen should pop but with the save color values from transparent pixels should be grayed out.

PNG Tips and Tricks

1. If your image has only one layer, you won't see the export screen where you can choose to flatten your image or to merge the visible layers. You will need to flatten it manually (image->Flatten) if you want it flattened.

2. If your image doesn't have to many colors (like the screenshots of the windows above), save them as PNG. It saves lots of memory and has no loss of quality.

3. PNG transparency won't be displayed in Internet Explorer - instead you will see some bright blue background, so take that into consideration if you use it in a webpage. Here is a neat way to fix this bug.

4. Finally and most important, In order to squeeze a PNG file, simply reduce the colors! Image->Mode->Indexed (Click). Choose the amount of colors you want (up to 256). When converting to an indexed image, you can control the dithering - it's in the bottom of the window that will pop when you choose "indexed". If your PNG file has many similar colors you might want to index it and by this saving lots of disk space. Note: This technique will probably reduce the quality of the image. You shouldn't try it on an image with lots of different colors (Click to see why)

5. Is your image grayscale? If so convert it to grayscale mode (Image->Mode->Grayscale) to reduce the filesize.

That's it - I hope you enjoyed the tutorial and that you learned a bit. Feel free to leave a comment below with Questions/Thoughts/Opinions. If you have any comment about the site, also feel free to comment.