15 types of image file formats

As content on the web becomes more visual, it’s important to have a basic understand of file formats. Here's an introductory guide to image file types for anyone making web content.

Some formats are very popular, but shouldn’t be used in web content (I’m looking at you, GIF). Others are often used interchangeably, without any real understanding of their pros and cons (such as PNG files and JPEG files).

In this introductory article, we will outline the fifteen most common file formats, explaining what they are best used for and when you might want to choose them over others.

But first, we’re going to outline the difference between raster and vector images, and talk about the main image colour formats.

Let’s get started!

Publish stunning, interactive web content for free with Shorthand.

No code, no web design skills required.
Get started.

Raster images

A raster image is a digital image file type that is composed of pixels. Each pixel is assigned a colour, and the combination of these colours creates the image you see on your screen. Raster images are typically used for photographs, illustrations, and other types of graphics. Some of the most common raster image file formats are JPEG, PNG, GIF, and TIFF.

Learn more about raster images.

Vector images

A vector image is also a digital image, but it is composed of vectors rather than pixels. Vectors are mathematical constructs that define an image in terms of its shape, size, and colour. This makes vector images much more versatile than raster images, as they can be scaled up or down without losing any quality. They are also often used for logos and other types of graphics that need to be reproduced at multiple sizes. Some of the most common vector image formats are AI, EPS, and SVG.

Learn more about vector images.

There are a few different types of image colour formats that you may come across. The most common are RGB, CMYK, and grayscale.

RGB files

RGB files use red, green, and blue light to create colours. This format is used by most digital cameras and is the default colour format for photos on the web. The most popular file formats that use RGB are JPEG, PNG, and GIF.

CMYK files

CMYK files use cyan, magenta, yellow, and black ink to create colours. This format is used for printing as it provides the widest range of colours possible. The most popular file formats that use CMYK are PDF, PSD, and TIFF.

Grayscale images

Grayscale images only use black and white tones, which can be useful for saving file space or for images that will be edited later.

JPEG (Joint Photographic Experts Group) is a file format that is commonly used for photographs and other types of web images. It uses the file extension .jpg. It is a raster format, which means that the images are composed of individual pixels. JPEG files are typically compressed, which means that they have a smaller file size than uncompressed files. This can be useful for saving space, but it is a lossy compression algorithm and may lead to some loss of image quality.

JPEGs can be easily opened by any web browser or image editing software, such as Adobe Illustrator or InDesign.

Learn more about JPEGs.

GIF (Graphics Interchange Format) is a file format that is commonly used for images with limited colour palettes, such as logos and cartoons, and are most commonly seen on websites and social media. GIF files are also compressed, but to a lesser extent than JPEG files. This results in a file that is smaller in size, but with less loss of image quality.

What about the pronunciation? GIF format inventor Steve Wilhite says that it’s pronounced ‘jif.’ But Barack Obama thinks that it’s pronounced ‘giff,’ with a hard g. So...

Learn more about GIFs

PNG (Portable Network Graphics) is a lossless image format that is commonly used on the web. They are a raster file format, meaning that they store images as a grid of pixels. This makes PNG files a good format for images that need to be displayed on web pages, as they will look high quality regardless of the size of the image. PNGs also support transparency.

Learn more about PNG files.

TIFF (Tagged Image File Format) is a file format that is commonly used for images with high resolution. TIFF files uses the file extension .tif. TIFFs typically have a large file sizes as compared with other file formats, but this is because they store more image data and metadata.

This makes them ideal for images that need to be printed or used for other high-resolution purposes. Like PNGs, TIFFs also support transparency.

Learn more about TIFF files.

BMP (Bitmap) is a file format developed by Microsoft for Windows that is commonly used for images with limited color palettes, such as logos and cartoons. BMP files are uncompressed, meaning that they take up more space than other file formats.

However, they are also a bitmap file format, meaning that they store images as a grid of pixels. This makes them a good format for images that need to be displayed on web pages, as they will look sharp regardless of the size of the image.

An EPS file (Encapsulated PostScript) is a file format that is commonly used for vector images. EPS files are typically used for logos and other graphics that need to be reproduced at multiple sizes. They are also a vector file format, meaning that they store images as vectors rather than pixels.

This makes them ideal for images that need to be printed or used for other high-resolution purposes.

Learn more about EPS files.

An SVG (Scalable Vector Graphics) file is an XML vector image format. They're generally used for logos and other designs that must be reproduced at a variety of sizes.

This makes them ideal for high-resolution photos that will be printed or used for other high-resolution activities.

Learn more about SVG files.

PDF (Portable Document Format) files are a type of file format that is used to present documents in a layout that cannot be changed. This means that the document will look the same on any device, regardless of the software used to open it.

PDF files are often used for documents that need to be printed, as they will maintain their formatting and layout. PDFs are not generally accessible, search optimised, or responsive on phones, making them a poor choice for distributing content on the web.

Learn more about PDFs. You can also read our argument against using PDFs for modern content creation on the web.

An AI file format is a file format used for vector images. Vector images are made up of geometric shapes that can be made smaller or bigger without losing any quality. This makes them ideal for logos and illustrations. Some of the most common AI file formats are EPS and SVG.

PSD is a file extension for a Photoshop Document file. A PSD file contains an image with layers and masks. Each layer in the file is stacked on top of the other, allowing users to create and edit images using multiple levels of transparency.

RAW image files are the unedited, uncompressed images that are captured by a digital camera's sensor. They contain all of the image data that is collected by the sensor, which makes them a good format for post-processing. RAW files can be edited in software such as Photoshop or Lightroom to adjust the exposure, white balance, and other settings.

WebP is a file format that provides lossless compression of digital images. By lossless, we mean that the original image is maintained even as the size is reduced.

Developed by Google, it uses the VP8 video codec and the WebP image format. Images in the WebP file format are typically 20% to 25% smaller than equivalent JPEG images, allowing for faster loading times over a network and reduced storage costs.

HEIC file extension is used by High Efficiency Image Format. HEIC file format is a new image compression standard that offers better compression than JPEG, while preserving quality.

Apple introduced HEIC file format with iOS 11 and macOS High Sierra — which is why Apple Iphone users will come across this file format when sharing photos. HEIC files are saved with .heic file extension.

HDR, or high-dynamic range, is a file format that allows for greater detail and colour depth than traditional image files. This means that HDR files can show more information in the highlights and shadows of an image, as well as provide more accurate colours overall.

HDR files are created by combining multiple images of the same scene, each exposed for a different length of time. This helps to capture a wider range of light and colour than a single image file would be able to.

Last but not least, DNG is a file format developed by Adobe for digital photos. DNG is a RAW file format that is supported by many camera manufacturers. DNG files can be edited in a raster graphic editor such as Adobe Photoshop.

There are many file formats to choose from when saving and editing your digital photos. Each file format has its own set of benefits and drawbacks, so it's important to understand which one will work best for your needs. We've listed the fifteen most common file formats here, along with a brief description of each one. So which file format do you use?