The Difference between JPEG and GIF and Which to Use
There are so many extensions for images, including: .gif, .jpg, .png, .tiff and .bmp. Knowing which one to use can be confusing and you always want to have the correct one for the design output you are working on.
There are photographs, logos, animations, line-art, etc. If you use the wrong extension, what you thought was a beautiful photograph can become fuzzy and grainy. You want to make sure you are saving it the correct way in order to have a fast website, beautiful brochure or sharp logo. The two extensions I will blog about today are .jpg and .gif.
The acronyms JPEG and GIF stand for the text below:
- JPEG: Joint Photographic Experts Group – developed by Joint Photographic Experts Group. It is a compressed image file format used mainly for photographs.
- GIF: Graphics Interchange Format – designed by CompuServe. It can be compressed and quickly transmitted over the internet and mainly used for smaller color palettes such as small icons.
JPEG vs GIF
There are two important factors to consider: file size and image quality. Both JPEG and GIF can be used on the web, but a GIF cannot be used in printed documents as it is a lot smaller in size and it would lose its quality.
See the example below. These images are the same but as you can see the one at left (JPEG) the quality is better. To get a better view, look at the clouds in the example photograph. JPEG is far better for photographs, while GIF is great for computer generated images, logos and line-art with limited palettes.
A GIF will never lose its data. It uses lossless compression. It uploads quickly since these files are usually low resolution. GIF files have a small file size, which make it ideal for website usage for logos, line-art and simple cartoons. It has a maximum of 256 colors so you would use it for a graphic with a low number of colors. It can be used as animation and is often seen on the web and Facebook, but not as much as you would with Flash support. You would not use for a graphic with gradients, but they do support transparency.
A JPEG file also can compress and be smaller for websites, and it keeps the basic look and crispness of the photograph. It uses ‘lossy’ compression which means some quality is lost when the image is compressed. Instead of 256 colors, JPEG files support up to around 16 million color so this is the best format for large photographs printed in brochures, flyers and books that still want to look clear and smooth. Sometimes when uploaded to the web you may notice the image comes in blurry at first but then clears up and becomes super crisp. The more complex the image the better to use JPEG for.
Summary
The extension to use for your graphic files will depend on your project. Think about the project and research what image extension will be best for your project output. Programs such as Adobe Creative Suite will help you to import and export what you need.
To understand how to save a JPEG you can find Adobe’s tutorial here:
https://helpx.adobe.com/photoshop/how-to/save-as-jpeg.html
For more information on GIFs please see the link on Adobe’s website here: