As designers, we need to deliver our finished works with the right file types to the clients so that they can use our design in their marketing materials or web design or wherever they need to use, smoothly and effectively. For example, if you deliver the website content graphics with the larger file format like PNG, your client’s website will be slow in loading time. So, it’s important to know when to use JPEG, GIF or PNG. Here’s my suggestion.
As you know, the file extension of JPEG is .jpeg or .jpg. JPEG stands for “Joint Photographic Experts Group”. The first jpg file ever made was created in 1986 and it’s pronounced “Jay-peg”. It can display millions of colors and can be used when a small file size is more important than maximum quality. The smaller file size means less storage space needed and quicker upload.
A modified version of JPEG is created by Mozilla in March 2014. It’s called mozjpeg and reduces the file size up to 15% more without losing quality. Tools like JPEG Mini also let you compress photos up to 5 times.
JPEG is the standard file format of most digital cameras. It’s suitable for still images, real-world images like photos, complex coloring and shading of light and dark.
GIF is pronounced “jif”. File extension is .gif which stands for “Graphics Interchange Format”. It’s created by CompuServe in 1987 to transfer images quickly across slow connections. GIF can be interlaced Progressive loading shows a low-quality version first and then better detail is added. It uses 256 indexed colors. Fewer colors mean files start even smaller than JPEG and compression does not lose any data. It allows for single-bit transparency so one color can be chosen to be transparent. The unique property of GIF is it can be animated.
Best uses of GIF are web graphics with few colors, small icons, animations and simple images like line drawings, single-color borders and simple cartoons.
PNG stands for “Portable Network Graphics”. It was designed in the mid-1990s as a way around patent issues with the GIF format, including benefits from both GIF and JPEG.
There are two types of PNG files.
PNG-8 is very similar to GIF. It uses 256 colors and 1-bit transparency. But PNG-8 files are even smaller than GIF files.
PNG-24 is 24 bit color which makes them similar to JPEG files. They can include over 16 million colors. But PNG-24 files are larger than JPEGs.
PNG files allow transparency to be set on a scale between opaque and completely transparent, allowing for a faded, translucent look. They also can be put on any color background and maintain original appearance but some older browsers may have trouble supporting PNG files.
The best uses of PNG files are web images such as logos that involve transparency and fading, images in the middle of the editing process, and complex images like photographs if file size is not an issue.