Image File Types JPEG, GIF, PNG – Which do you use?
- On March 18, 2019
Choose the right image file format to save your images. The three common image file formats for the web are GIF, JPG and PNG. It’s important to use the correct file format to save in file size and reduce load time without compromising detail. Below are recommended guidelines of when to use a JPEG, GIF or PNG file.
JPEG (Joint Photographic Experts Group) or JPG file formats compress photos up to 5x without losing quality and are best used for:
- still images
- photos
- complex colors and shading of light and dark.
Mozjpeg format was created by Mozilla and reduces the JPEG file size up to 15% more without losing quality.
The GIF format (pronounced “jif” and stands for “Graphics Interchange Format”) uses 256 indexed colors. The GIF’s dithering process makes two-pixel colors combine to one to reduce the number of colors needed which results in smaller file size and faster loading time. GIFs are best used for:
- Web graphics with few colors
- Small icons
- Animations
- Simple images (ie line drawings, images with single color borders, simple cartoons
PNG (Portable Network Graphics) files include attributes from both the JPEG and Gif file formats. PNG files also have 256 colors and 1-bit transparency however png-8 files are even smaller than GIF files. PNG-24-bit color files are similar to JPEG files and can include over 16 million colors however the file sizes are bigger than JPEG files. Alpha-channels allow PNG files to set transparency between opaque and completely transparent. PNG images can be put on any color background without losing detail.
PNGs are best used for:
- Web images (PNG-8) such as logos that involve transparency and fading
- Images in the middle of the editing process (PNG-24)
- Complex images like photographs if size if not a factor (PNG-24)
Tip: A great source to use for compress file sizes is: https://tinypng.com. Simply drop up to 20 images (max 5MB each) onto the site and it will reduce the file size without compromising quality.