Choice
Some people say that JPEG is always better than GIF.
To me, with these images, GIF gives as good quality as JPEG. Even for photos! For plain text or flat-colour drawings, GIF gives a better quality result. GIF is nearly always smaller than uncompressed JPEG. Compressed JPG wins on size (not quality) for these photographic images.
Conclusion
Don’t use JPEG for text! Use JPEG for photos.
Formats
GIF
Oldest. Only 256 colours. Transparency. Animation. Patent issues.
JPG
Lossy. No transparency. No animation. Designed for photos.
PNG
Latest. Alpha transparency. Lossless.
Examples
When you create a JPEG file you can specify an image-quality or compression-factor. A higher compression-factor leads to smaller JPEG files but with a poorer visual quality. In the images below, 100% means uncompressed, 75% means compressed for smaller size at the expense of poorer quality images.
Text on flat background
![JPEG 100% (4736 bytes)](images/text.jpg)
![JPEG 75% (1713 bytes)](images/text-75.jpg)
![GIF (3904 bytes)](images/text.gif)
![PNG 100% (764 bytes)](images/text.png)
The JPEG versions have fuzzy letters and the smaller jpeg shows some unpleasant artifacts in the background. Overall the GIF image is better quality than JPEG, PNG is equally good and is a lot smaller than JPEG or GIF
Text on graduated background
![JPEG 100% (7478 bytes)](images/button.jpg)
![JPEG 75% (2791 bytes)](images/button-75.jpg)
![GIF (5182 bytes)](images/button.gif)
![PNG 100% (4172 bytes)](images/button.png)
This time the compressed JPEG wins on size. However there is still a muddiness in the background. The GIF and PNG give good sharp text. PNG wins on size and quality.
Computer Generated Image
![JPEG 100% (16132)](images/orb.jpg)
![JPEG 75% (3975)](images/orb-75.jpg)
![GIF (13464)](images/orb.gif)
![PNG 100% (12182)](images/orb.png)
They all look the same to me. I’m surprised that GIF doesn’t look noticeably poorer than JPEG. JPEG wins on size.
Photographic Image
![JPEG 100%](images/house.jpg)
![JPEG 75%](images/house-75.jpg)
![GIF](images/house.gif)
![PNG 100%](images/house.png)
Again, there’s nothing in it as far as image quality is concerned. GIF looks as good as JPEG. JPEG wins on size.
Photographic Image
![JPEG 100%](images/cat.jpg)
![JPEG 75%](images/cat-75.jpg)
![GIF](images/cat.gif)
![PNG 100%](images/cat.png)
Again, there’s nothing in it as far as image quality is concerned. GIF looks as good as JPEG. JPEG wins on size.
Images created with Xara Webster