Can You Explain the Difference among Image File Formats like JPG, PNG, GIF, TIF and BMP?
Tags: webdev, image
Published: 2020-09-03 08:57:52

## JPG/JPEG
JPEG stands for **Joint Photographic Experts Group**.

### Difference between JPG and JPEG
You may have seen two types of extension, **.jpg** and **.jpeg**. In fact, there is no difference in functionality between the two, just a difference in the extensions. That's because MS-DOS, which is a OS widely used in the 1980s, has a restriction on file extensions of up to 3 characters.

### Characteristics
It is a format for compressing image files. Its way of compressing is a little complicated and is **lossy compression** so you can't restore the image to its original state. If you want to know its compression algorithm, click [here](https://medium.com/breaktheloop/jpeg-compression-algorithm-969af03773da). 
24-bit color depth is mostly used. 24-bit color is a method of expressing about 16.7 million different colors by assigning 8 bits, or 256 shades, to each of red, blue and green.
You can use jpeg format on web. But its background cannot be transparent. 

### Purpose
Digital cameras often use jpeg format for their photos. It is suitable for **phots**. It's not suitable for images with a few colors because of its compression algorithm. Also, it is used on web because of its high compression rate.


## PNG
PNG stands for **Portable Network Graphics**.

### Characteristics
It is a format for compressing image files. Its way of compressing is very simple so I'm going to explain the algorithm in next header. You can restore the image to its original state.
24-bit color depth is mostly used.
You can use png format on web. Also, its background can be **transparent**. 

### Compression Algorithm
In a image, there are always a lot of pixels that are the same color, pixel by pixel. So instead of storing each pixel data, you can store data like the image below.

![comp](https://i.imgur.com/BXP7AgH.png)

Mostly, its compression rate is lower than jpeg.

### Purpose
If you want the background of your image **transparent**, it's the only choice. It is suitable on web. 

## GIF
GIF stands for **Graphics Interchange Format**.
### Characteristics
It is a format for compressing image files. Its way of compressing is called **LZW compression**. If you want to learn LZW compression algorithm, click [here](https://en.wikipedia.org/wiki/Lempel%E2%80%93Ziv%E2%80%93Welch). Using its algorithm, You can restore the image to its original state.
8-bit color depth is used. So the data size is small.
You can use gif format on web. 
You can use gif for **animation**.

### Purpose
It is suitable for images with a small number of colors, like **logos** and **illustrations**. It's good on web. Also, if you want to save easy animation for a small size, it's a choice.
### Extra Talk

There's been a debate whether the pronunciation is "gif" or "jif" over years. If you have an interest, click [here](https://time.com/5791028/how-to-pronounce-gif/) to see the history.


## TIF/TIFF
TIFF stands for **Tag Image File Format**.

### Difference between TIF and TIFF
It is the same reason as jpg/jpeg.
### Characteristics
It is basically **uncompressed** format. 24-bit color depth is mostly used. You can't use tiff format on web. 

### Purpose
Digital cameras often use tiff format for their **photos**.

## BMP
BMP stands for **bitmap**.

### Characteristics
It is basically **uncompressed** format. 24-bit color depth is mostly used. You can't use bmp format on web.
### Purpose
When you want a high resolution image and you don't care the file size, it can be an option. Or, when you want to render or edit an image by programming, it can be one of the easiest formats.