If you are going to add or edit digital images to your website, you’re going to need to know what digital image file types there are and the benefits of each.
There are almost as many image file types used on the internet than there are websites, but there are three that are the most commonly used in website design.
List of Digital Image File Types
Graphics Interchange Format (GIF or .gif)
GIF is an image file format commonly used for images on the web. GIF uses lossless compression that does not degrade the quality of the image. However, GIFs store image data using indexed color, meaning each image can include a maximum of 256 colors.
Digital images saved as a GIF can have transparent backgrounds, include image metadata and support animations by allowing a stream of images to be stored in a single file.
Since GIFs may only contain 256 colors, they are not ideal for storing digital photographs. Photos saved in the GIF format often look grainy and unrealistic. GIFs are better suited for buttons and banners on websites, since these types of images typically do not require a lot of colors.
According to Steve Wilhite, the creator of the original GIF format, it is pronounced “jiff” (like the peanut butter brand). However, most people still pronounce it “gif” (with a hard G). Therefore, either pronunciation is acceptable.
Portable Network Graphics (PNG or .png)
PNG, which can be pronounced “ping” or “P-N-G,” use lossless compression and supports 24-bit color, so a PNG image may include over 16 million colors.
The PNG format supports RGB and provides 256 levels of transparency. This allows developers and designers to fade an image to a transparent background rather than a specific color.
While the PNG image format has many benefits, the file size is larger, so keep that in mind when considering your page loading time.
Joint Photographic Experts Group (JPEG or .jpg)
JPEG is a compressed image file format. JPEG images are not limited to a certain amount of color and are best for compressing photographic images.
While JPEG images can contain colorful, high-resolution image data, it is a lossy format, which means some quality is lost when the image is compressed. If the image is compressed too much, the graphics become noticeably “blocky” and some of the detail is lost.
In case you were wondering, lossless compression means exactly what you probably thought – it reduces a file’s size with no loss of image quality. Lossy compression on the other hand, degrades the image slightly to make the size of the file smaller.