Sometimes JPG is the Wrong Choice
Screen Shots Screen Shot of a Box of Files Screen Shot of a Toolbar Pictures from Painting Programs Map Drawn in a Painting Program Black and White Outline Drawing Outlined Text Repeated JPG Saving—More Text Paintings in 16 Colours Masses of Flowers Tiny Images on a Background Complex Drawings from Special Programs With Thousands of Colours, JPG is a Better Choice With Few Colours, Go for Gif Special Cases Transparency Animations—Moving Images Bytes, Kilobytes, Megabytes?
Since I wrote this, PNG has come into general use, and is the default Save format in Paint for Windows 7. I'd certainly use it for a screen shot, since there's no limit to the number of colours, and it doesn't appear to blur text as jpg does.
However, I haven't experimented enough to see if quality deteriorates with multiple saves, so I can't really say for sure that it's a better choice than GIF for simple cutouts intended to be pasted into new pictures.
For photos, stick with JPG.
Most computer users are familiar with three “everyday” graphics formats. They are bmp, gif and jpg. The 24 bit bmp format is very big on disk, so if a picture is to be made as small as possible, one of the other two formats, both of which compress the picture and thus make it smaller, must be chosen.
The jpg format is useful and popular because it can compress photographs very efficiently. Unmanageably large photos can be made small enough to use on a web page without any degradation that can be picked up by the human eye. A small jpg can be saved as a 256 colour gif and the only change noticeable is a huge leap in size. This little jpg is 13kb in size. A visually identical gif weighs in at almost 50kb! So jpg is always the way to go. Right?
Well, the best way to make icecream is to put the mixture into the freezer—but the freezer won't do much for a tinful of cake batter! Horses for courses. Photographs have subtle shading, so the jpg format tries to include subtle shading into every picture—but some pictures just don't have subtle shading. They have a small number of distinct colours that aren't meant to shade into each other. Such pictures are brighter and clearer—and very much smaller—when saved in the gif format.
When you reduce the colour depth of a picture, some programs offer a choice between Optimised colours and Windows colours. Others ask you to choose whether to have dithering or not. What choices you make are beyond the scope of this article. I have shown one example of a screen shot saved with both optimised colours and Windows colours, but as the choices aren't always there, it's better for you to see what your particular program offers and experiment.
I saved my gifs with PSP4 and my jpgs with Irfan View. Either program will save in both formats.
Screen Shots
When you take a picture of your screen, or of a window, you probably call it a screen shot, a screen capture, or just a screen cap. Its purpose is to convey information. You want the person who looks at the picture to see what you see, and you probably want them to be able to read any included text.
The following examples try to demonstrate that the readability of screen shots is at its best when the gif format is used.
Screen Shot of a Box of Files
 Actual appearance |  Close-up view |
This 16 colour gif image of a box of files is 5,291 bytes.
| | |
 Actual appearance |  Close-up view |
A jpg saved from the same shot is 19,561 bytes. The close-up view explains why the white background looks greyish. More disk size, less quality! With the softly rounded icons and boxes that come with newer operating systems, this slight blurriness can make things very hard to see.SUMMARIES
Screen Shot of a Toolbar
 Actual appearance |  Close-up view |
This 16 colour gif was saved using Windows colours. It's 3,901 bytes or about 4kb.
Close-up shows clean lines and clear colours. White is white.
 Actual appearance |  Close-up view |
This 16 colour gif was saved using optimised colours. It's 4,191 bytes or about 5kb. Close-up shows clean lines and clear colours, although the white areas are not quite white.
 Actual appearance |
 Close-up view |
A jpg from the same shot is 13,755 bytes or 14kb.
Close-up shows the format's attempt to blend colours where blending is a backward step. Colours bleed and look muddy.
 Actual appearance |  Close-up view |
Here the colours were reduced to 16 before the picture was saved as a jpg. The picture looks even worse, and the size isn't much less—13,425 bytes—still about 14kb.
Pictures from Painting Programs
A Map Drawn in a Painting Program
 Actual appearance |  Close-up view |
A simple map, made with a 16 colour palette. The picture uses only 7 colours and 1,897 bytes—about 2kb.
 Actual appearance |  Close-up view |
Saved as a jpg, the map becomes 9,135 bytes and the colours have changed markedly.
 Actual appearance |  Close-up view |
An attempt to then save the jpg back to a 16 colour gif does reduce the muddiness and the disk size, 1,744 bytes, but the original colours have been lost.
Black and White Outline Drawing
 Actual appearance  Close-up view |  Actual appearance  Close-up view |
A simple border using just black and white. The original is 922 bytes or .9 of a kilobyte. Saved as a jpg, the same drawing is 4,844 bytes, or 4.7kb, nearly five times the disk size—saving with the jpg format has added 68 shades of grey!
Outlined Text
 Actual appearance |  Close-up view |
 Actual appearance |  Close-up view |
The original GIF “Hello” has three colours—yellow, red and white. It is jaggy, yes, but it's fine for its purpose—to be part of a simple greeting card. Its size on disk is 1,277 bytes. The jpg version isn't as bright, and the jagginess hasn't really been reduced—but the disk size is 5764 bytes!
Repeated JPG Saving—More Text
 Actual appearance |  Close-up view |
This is a real life example. I had a photograph, in the middle of which was a notice similar to this picture. Everything else in the photo—trees, grass and water— looked as it should. The notice, however, was blurred and blotchy. I had to open the jpg and clean up the notice—and of course, part of the blothchiness was put back in by the jpg format! Some high-end graphics programs have a special jpg format to deal with such problems, but with ordinary programs that isn't an option.
 Actual appearance |  Close-up view |
Here's the same picture as a jpg. 10,632 bytes
 Actual appearance |  Close-up view |
Now here's where things can get really mucky. Having saved the picture as 1.jpg, I opened 1.jpg and saved it as 2.jpg. I opened 2.jpg and saved it as 3.jpg and so on. What you see here is 5.jpg.
In this case I shouldn't have been saving in that format anyway, but when the jpg format is appropriate, always go back to the original picture if you want to save a new copy, because the quality of the picture deteriorates with each repeated save. In my experience, that isn't true of gif images. A “Save as” yields exactly the same picture with the same byte size.
Paintings in 16 Colours
Masses of Flowers
 Actual appearance |  Close-up view |
Original 16 colour painting, 7,148 bytes.
The close-up shows that it's jaggy, but it's that sort of picture.
 Actual appearance |  Close-up view |
The same painting saved as a jpg, 17,572 bytes. The size has zoomed up, but what about the colours? They've been "smoothed". Edges aren't as jaggy, but the colours aren't as clean, either.
Tiny Images on a Background
More Colours Should Make a Better Picture—Shouldn’t They?
 Actual appearance |  Close-up view |
Original. How many colours? 13. Disk size? 12,185 bytes
 Actual appearance |  Close-up view |
First jpg save. How many colours? 38,261. Disk size? 25,765 bytes
 Actual appearance |  Close-up view |
After repeated jpg saving. How many colours? 43,464. Disk size? 22,749 bytes.
Complex Drawings from Special Programs
When you've made a drawing or painting in a proprietory format, things become more difficult. You can't publish it on the web, because the format won't be understood by browsers—and it's usually far too big in disk size anyway. You have to choose one or other format—gif or jpg—and you can't make a rule that will work for every picture. To begin with, 16 colours is almost certainly out. Brightness and contrast is sometimes reduced by jpgs. You often get very nice results with 256 colour gifs, but often you pay for it in disk size. The best idea is to experiment: save one copy of the picture as a jpg and another as a gif. Be sure to get each copy from the original. Compare the results. You have to weigh size against appearance.
With Thousands of Colours, JPG is a Better Choice
This jpg is 26,036 bytes.
It looked slightly sharper as a 256 colour gif, but the size was 68,175 bytes.
With Few Colours, Go for Gif
 GIF |  JPG |
Saved as a 256 colour gif, this is very close to the original vector drawing, and its size is 9,456 bytes. Saved as a jpg it loses the clear lines. Its size as a jpg is 8,502 bytes.
 GIF |  JPG |  GIF |
Reduced to 16 colours, it loses some colour but still saves reasonably well as a gif, and the size goes down to 3,909 bytes. When copied and saved as a jpg, however, the size becomes 8,538 bytes and the result is messy.
The missing colour can easily be restored or even changed using the flood tool in a painting program, and the finished gif is just 3,894 bytes.
Special Cases
There are two cases where gif is the only choice, no matter how much smaller the jpg version of your picture might be.
Transparency
The gif format allows you to nominate one colour as transparent. You usually choose whichever colour makes up the background. It's wise to flood the background with a couple of different colours before doing the final save. That way you can see and eliminate any odd pixels of some other colour. Also, take care to choose a colour that is not in the picture. Black and white can both be dangerous, because we tend not to notice very small areas of either colour, and a poor choice can mean that your picture has unwanted holes.
Animations—Moving Images
There are programs—some free—and modules within bigger programs, that will help you join several small pictures consecutively to make an animated image. Both the original frames and the finished animation must be in gif format.
One free animation program is UnFreez, less than 20KB!
Bytes, Kilobytes, Megabytes ?
Counting from the right, as one would to say “units, tens, hundreds, thousands” and so on, the fourth number is kilobytes. If we continued left until there were seven numbers, the seventh from the right would be megabytes.
In all of the “bytes” numbers on this page, any numbers to the left of the comma can be understood as kilobytes or kb. You get about a thousand characters, or around 150 words, to the kilobyte. Pictures use up more space than words, and sounds take more than pictures. Sounds that are electronically produced (mid, midi) are lots smaller than recorded sounds (wav, au).
For sending electronically to someone on dial-up, 40-50kb is about as far as you should go unless you've discussed it with them beforehand. You can write a very long letter in that much space—unless it has pictures and sounds!
Questions or comments? I’d love to hear from you. My email address is here.
Return to top
Drop-Down Menu from Brothercake
Everything below this is a javascript menu. If you are using a reader,
please use the links here.