Image File Types Guide

There are different color modes for print and web/screen. Web color mode is RGB (red, green, blue) because that is how a screen displays color. Some web-based file types also store color as "Index," which is a reduced color palette used for smaller images that need to load quickly.

Print color mode is CMYK (cyan, magenta, yellow, black) because printers combine those 4 ink colors to create all color variations. The black ink is called "k" so it is not confused with blue.

• Web color modes: RGB or Index
• Print color mode: CMYK

RGB

Screens display using RGB (red, green, and blue) dots.

CMYK

Printers use four colors of ink (cyan, magenta, yellow, black) to create a matrix of dots that may appear to be any color. If you have a magnifying loop, you can see the dots.

Image resolution is how much data the image file contains, usually noted as dpi (dots per inch) or ppi (pixels per inch). Resolution reduces as an image is made larger. If a 300dpi 5” x 5” image is increased in size to 10" x 10" the resolution reduces to 150dpi and the image will not print as clearly. Forcing the resolution back up to 300dpi will not increase the quality of the image. Standard resolution for print is 300dpi. Standard resolution for web is 72dpi. In order to look normal to the human eye, printed images require a higher dpi than images displayed on a screen.

• Web resolution: 72dpi
• Print resolution: 300dpi

This photo is correct resolution for the web. If you were to print it, it would print blurry if not reduced greatly in size. Decreasing the size can increase the resolution.

This photo has very poor resolution (20dpi). It is advisable not to use photos that look like this.

Zoom in on the low-resolution image to the left and you may be able to see jagged boxes. Those are individual pixels, which should not be noticeable to the eye if your image is the correct resolution.

Raster

An image that is raster is made up of tiny dots (dpi or dots per inch). It can only be enlarged a limited amount before it becomes blurry. The resolution of a raster image cannot be increased.

Image types that may be raster include: JPG, PNG, GIF, PDF, and TIFF.

Vector

An image that is vector is comprised of data that plots mathematical points and lines or curves between those points. A true vector image can be scaled up infinitely without losing quality. Vector is used for logos and other clean-line graphics. It is not typically used for web graphics unless it is in SVG format.

Image types that may be vector include: EPS, PDF, AI, and SVG.

TIFF

A TIFF is a high-quality, lossless raster image file. Lossless means it is not compressed. This tends to yield a large file size and is used primarily for print and by photographers. It is not advisable to use a tiff file on a website.

• Print or web? PRINT.
• When to use: Only when printing images that must be large and very high quality.
• Raster or vector? Raster, but can also contain vector data.
• Stands for: Tagged Image File Format.

JPG

A jpg (pronounced “jay peg”) is a lossy, compressed raster image file. A jpg can be a very high-quality image at the right resolution and most people will not be able to see any loss of quality due to the compression. A 300dpi JPG is ideal for printing and a 72dpi JPG is ideal for web. This file type is used for raster photographs and graphics.

• Print or web? PRINT or WEB or HTML EMAILS.
• When to use: Any photographs on the web or for print.
• Raster or vector? Raster.
• Stands for: Joint Photographic Experts Group (the committee that standardized this file type).

A jpg might look like this. JPG images are typically raster photographs or graphics.

GIF

A GIF is a lossy, compressed raster image file with a limited color palette. This format is useful for creating small file sizes and is normally used for graphics rather than photographs. Photographs saved as GIF format tend to look grainy and low-quality. A GIF can contain 100% transparent areas (such as a transparent background) but it cannot contain pixels with partial opacity (such as soft fades and translucent shadows).

A GIF file may contain multiple frames, which allows it to be animated. Use caution when creating animated GIFs, as the files can become so large that they slow down your website's load time.

• Print or web? WEB and HTML EMAILS.
• When to use: Graphics that need to be animated or need to be in an HTML email.
• Raster or vector? Raster.
• Stands for: Graphics Interchange Format.

PNG

A PNG is a lossless, compressed raster image file. This file type was invented to replace GIF. A PNG cannot contain animated frames, but it can contain different levels of transparency. A PNG is an excellent file type for creating web-based graphics. Avoid using it for photographs, as this typically results in a very large file. This file type is not widely supported in HTML emails.

• Print or web? WEB, but not HTML emails.

• When to use: Any graphic for the web; preferable over GIF.
• Raster or vector? Raster.
• Stands for: Portable Network Graphics.

A GIF can be transparent, but it cannot have different levels of opacity.

A PNG can have levels of transparency, as you see in Buzz's wings and the shadow behind the hexagon.

SVG

SVG is the only vector file type suitable for the web. SVG graphics can be edited using code or vector graphics software.

• Print or web? WEB.
• When to use: To add clean, scalable graphics to a website.
• Raster or vector? Vector.
• Stands for: Scalable Vector Graphics.

This is SVG code that creates a small chevron graphic:

EPS

EPS is a vector file format typically used for clean-line graphics and logos.

• Print or web? PRINT.

• When to use: Any time a logo or clean-line trademark needs to be printed.
• Raster or vector? Vector, but can contain raster data.
• Stands for: Encapsulated PostScript.

This image is not actually an EPS since it appears on a web page rather than a printed piece. However, the EPS file format is typically used for a trademarked graphic, which needs to print very crisp at any size.

PDF

PDF is a format that can contain both text and images, and both raster and vector data. It can be viewed using Adobe Acrobat software or opened in a web browser. A PDF can also be made into a form that users can fill out, save, and email. A PDF file is not used for web-based images and graphics, but rather for documents.

• Print or web? PRINT or WEB as downloadable documents.
• When to use: If you need to provide a document that includes both images and text that anyone can download and view.
• Raster or vector? May contain both raster and vector data.
• Stands for: Portable Document Format.