What is a JPG? What is the difference between a GIF and a PNG? Why does my image look good on screen but terrible when I print it? This page is meant to clarify what different image file types are for.
First, some terminology.
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. Print color mode is CMYK (cyan, magenta, yellow, black) because printers use those 4 ink colors to make all colors. The black ink is called "k" so it is not confused with blue. 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.
- Web color mode: RGB or Index
- Print color mode: CMYK
Screens display using RGB (red green and blue) dots. This is similar to how your eyes perceive color.
Printers use four colors of ink (cyan, magenta, yellow, black) to create a matrix of dots that appear to be any color. If you have a magnifying loop, you can see the dots.
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 you have a 300dpi image which is 5" x 5" and you increase the size to 10" x 10", your resolution reduces to 150dpi and the image will not print as clearly. If you force the resolution to go back up to 300dpi, you will not increase the quality of the image. Standard resolution for print is 300dpi. Standard resolution for web is 72dpi. Your screen does not require as many dots or pixels per inch to look good to the human eye as printed materials do.
- 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. Decreased size=increased resolution.
This photo has very poor resolution (20dpi). Don't use photos that look like this--get a better quality image file.
Zoom in on the low-resolution image to the left and you may be able to see jagged boxes. Those are individual pixels, and they should not be this visible.
An image that is raster is made up of tiny dots (remember dpi or dots per inch) which means that it has a resolution. Any image can be raster. A raster image can only be enlarged a limited amount before it becomes blurry. You cannot increase the resolution of a raster image, so make sure not to stretch them too big.
Image types which may be raster include: JPG, PNG, GIF, PDF, TIFF
An image file that is made out of math. It has plotted points on x- and y-axes and mathematically calculated lines and curves connecting them. A true vector image can be scaled up infinitely without losing quality--the lines will stay crisp. It is used for logos and other clean-line graphics, but not for photos. It is not typically used for web graphics unless it is in SVG format.
Image types which may be vector include: EPS, PDF, AI, SVG
A TIFF is a lossless raster image file which is typically high-quality. Lossless means it is not compressed. This tends to yield a large file size and is used primarily for print and by photographers. This file type is used for photographs but it can contain vector data as well. It is unlikely you will use this format.
- Print or Web? PRINT
- When to use: Only when printing images that must be quite large and very high-quality
- Raster or Vector? Raster, but can also contain vector data
- Stands for: Tagged Image File Format
A tiff might look like this. This is not a tiff, because putting a tiff on a website is a bad idea. The quality won't be noticeable on screen and it will be a very, very large file.
A lossy, compressed raster image file. Don't worry though, a jpg can still be a very high-quality image at the right resolution and most people will not be able to see any loss of quality from 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.
- 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.
A lossy, compressed raster image file with a limited color palette. Good for creating small file sizes and usually used for graphics rather than photographs. Photographs saved as GIF format tend to look grainy and poor quality. A GIF can have transparent areas, as long as they are 100% transparent (you can't have any translucent areas in a GIF).
The fun thing about a GIF is that it can contain multiple frames, which means it can be animated. Be careful though--even though a GIF is usually a small file, an animated GIF can become too large and 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
A lossless, compressed raster image file. This file type was invented to replace GIF. Unlike a GIF, it cannot be animated. Also unlike a GIF, it can contain different levels of transparency. A PNG is an excellent file type for use on the web for either photographs or graphics. However, it has limited support in email browsers, so a PNG should not be used in emails.
- Print or Web? WEB, but not HTML emails
- When to use: Any graphic or photograph 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 transparency.
A PNG can have levels of transparency, as you see in Buzz's wings and the shadow behind the hexagon.
This is the only vector file type suitable for the web. They can be animated and transformed using code. They can be edited using code or with graphics software. Adding an SVG graphic to your web page is normally done with code, so unless you write CSS and have access to your site's back end, you may not have the ability to use them.
- Print or Web? WEB
- When to use: To add clean graphics to a website using code
- Raster or Vector? Vector
- Stands for: Scalable Vector Graphics
This is SVG code which creates a small chevron graphic:
content: url(‘data:image/svg+xml;utf8,<svg version=”1.1” id=”Layer_1” xmlns=”http://www.w3.org/2000/svg” xmlns:xlink=”http://www.w3.org/1999/xlink” x=”0px” y=”0px” viewBox=”0 0 9.514 15” style=”enable-background:new 0 0 9.514 15;” xml:space=”preserve” width=”9” height=”15”><polygon style=”fill:%23EBB211;” points=”5.093,0 0.091,0 4.421,7.5 0.091,15 5.093,15 9.423,7.5 “/></svg>’);}
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 such as this which needs to print very crisp at any size.
A format which 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. It can also be made into a form which users can fill out, save, and email. Typically not used for web images and graphics, but rather for documents and multi-page documents.
- Print or Web? PRINT or downloadable documents
- When to use: If you need to provide a document which includes both images and text that anyone can download and view
- Raster or Vector? Can contain both raster and vector data
- Stands for: Portable Document Format