“But it looks fine on my computer…”

While working on web and print design projects, the question
we get most often from clients is:

“This graphic looks fine on my computer.
Why can’t we use it?”

Here’s why . . .

Monitors only show 72 dots per inch (dpi), so even low-resolution files look fine on your computer. If you want to use a low-resolution image or graphic on your web project it’s probably fine, but if you’re looking to create a PRINTED piece, low-resolution graphics aren’t what you want to use.

To get you started on the right track in getting your designer the proper images, we’ll share some common file formats for images — and when to use each — depending if you have either a print or a web design project in mind.

Before we get into the “guts” of file formats, though, it’s important to first ask yourself one key question about your graphic:

“Should I create my art as BITMAP (pixel-based) art
or as VECTOR (mathematical-based) art?”

Here is the difference . . .

Bitmap Graphics — These are graphics created from pixels in a grid. Each pixel contains color information for the image, which has a fixed resolution. Photographs are bitmap graphics. Increasing the size of a bitmap image or photograph can result in distortion and jagged edges, called “pixelation.” Because of this, it is unwise to scale bitmap art files larger than 100% of their created or original size. So, how do you avoid issues with your bitmap art?

When creating bitmap art or using photographs for the WEB, create/size your graphic/photo to 100% of the size you intend to use it at 72 dpi.

When creating bitmap art or using photographs for PRINT projects, create/size your graphic/photo to 100% of the size you intend to use it at 300 dpi.

Failure to create bitmap graphics or use photographs with these two basic minimums will result in blurry, pixelated images that are unsuitable for use on the web or in print.

Vector Images — These are images made up of many scalable objects. Vector art is defined by mathematical equations, rather than by pixels on a grid. That means that these file types can be enlarged without losing any quality. For example, a vector image can be created 1 inch wide and enlarged to the size of a semi-truck without any distortion. How is this possible? Unlike pixel-based art, vector images are resolution independent and don’t need to follow the same dpi requirements that bitmaps do.

NOTE: Vector graphics can be converted into pixel-based graphics, but pixel-based graphics cannot be converted into vector graphics.

The 5 most common file formats used in print and web pieces are JPG, GIF, PNG, TIF, and Vector Art. These formats can be created in various design programs, which may also save files in their own native format (e.g., AI = Adobe Illustrator; CDR = CorelDraw; and DXF = Autocad).

TIP: If you are creating art that you might modify for future use, keep a copy of the file in your software’s native format to ensure that all elements and layers are adjustable (e.g., save as PSD for Adobe PhotoShop as well as saving your final JPG to be used).

GENERAL USE GUIDELINES

For WEB: Use JPG, GIF, or PNG files.

For PRINT: Use JPG, TIF, or Vector Art (e.g., AI and EPS).

JPG — This is a common file format for digital photographs. It can be used for web and print and for photos and colorful graphics. This format is good to keep the file size small. Depending on compression level, the overall quality will be affected to reduce the size of the file. The more you compress, the lower the quality of the graphic, so be aware of how the quality of the file changes. Avoid large areas of text and color blocks in this type of file. As the compression level is increased, crisp lines around text will blur and colors will shift and become pixelated. When shooting photos with your digital camera, remember to use the highest resolution possible. It’s easy to reduce the size of the photo/graphic when creating your project, but increasing the size is restrictive, so it’s better to be safe than sorry and use the highest resolution possible when taking your picture in the first place.

GIF — This format is used for web projects and is not recommended for print use. For the web, it is best used for graphics with a limited amount of colors (e.g., logos, graphics with solid colors). GIF files will be reduced to a maximum of 256 colors or less. The more you reduce the colors used to optimize this file type, the lower the quality of your image gets. This format works well for buttons, banners, text, cartoon drawings and animations since GIF can support multiple images within a file. GIF should not be used for photos or for graphics with gradients.

PNG — This format is an alternative to the GIF format. It provides better quality with simple, full-color images because it can reference over 16 million colors rather than only 256; however, although better quality than GIF files, they tend to be much larger in size and do not support multiple images for the creation of animations. For these reasons, the PNG format is not as widely used as the GIF format.

TIFF — Use this format for print only. It works well for pixel-based images (photos) with no compression loss, resulting in crisp, clean images when printed in brochures, sell sheets, banners, etc.

Vector Art (AI and EPS) — This is the best format for company logos or graphics that you will need to enlarge to any size imaginable. Vector art is infinitely scalable, as it is created through mathematical calculations consisting of lines, curves, and shapes with editable attributes. Vector art has the advantage of being scalable, and it’s resolution independent, but it’s unsuitable for creating photo-realistic imagery.

Now you’re ready to take on your next design project. That’s the kind of Forward Thinking we at Heritage do best!

Have a design question we can help you with? Let us know in the Comments below. We’re always here to help.