Understanding Image Formats

One of  jobs of being a designer is helping clients understand the mysteries of file formats. Anyone who has spent any time around a digital camera probably has heard the term “jpeg” (pronounced jay-peg) and some have also mastered the ability to email said jpeg to someone else. Beyond this, for many, the understanding gets a bit murky.

Take this daisy, for example. It’s a nice crisp image with clearly defined detail and bright, saturated color. Nothing much to complain about.

If, however, you decided you wanted to enlarge the image of the daisy to 3 or 4 times its size, you would be dismayed to see that it looks somewhat like the next picture of the daisy. It’s what those used to working with images called “pixelated” or having “jaggy” edges. Not good.

On many occasions I have had frustrated phone calls from clients demanding to know why this happens, thinking I will be able to tell them which key to press on their keyboard to make it look pretty again.

Alas, it’s not so simple, and the answer can end up getting very long-winded and eyes glaze over if I sneak the explanation upon someone without warning. The quickest answer is: You cannot enlarge photographic, or “raster” images without losing resolution. It’s a one-way street. You can only reduce them. But people don’t often like to hear the word “cannot” because they are sure there is a way around if they look hard enough.

Yes, Photoshop does have sharpening tools, but these are really meant for situations where the image is barely out of focus. One of my clients called me in desperation recently wondering why the images she took off the web didn’t look good when printed out poster size. I launched into my explanation and could feel her eyes glazing over.

“But there must be a way to do it,” she pleaded. “There isn’t, unfortunately,” I replied. “Unless you can get a hold of the original images at a high resolution.” She was in a time crunch and seemed to have promised one of her higher-ups that she would deliver nice crisp images on a poster. Alas all she had was low resolution files. What to do?

I ended up helping her get the poster done by using the images at a smaller size and making them part of a larger design on the poster. She was relieved. There is nothing like a hands-on project to get the point across.

Image Resolution

Okay, now for some numbers. I hate memorizing numbers or facts, but in this case it must be done, and the numbers never change. The laws are immutable on this one. I guarantee these will be the only numbers you will have to remember. Commit them to memory.

When it comes to photographic or “raster” images, you are dealing in “pixels” (what you see on your monitor screen), or “dots” if you come from the printing world. First know that “resolution” is explained by how many pixels that can fit into one square inch. When it comes to contemporary monitors, that number is 72. No matter which monitor you are using the number is always 72.

If you were to print this image, which looks great on the monitor (72 pixels per inch), it will look like puke, pucky, shiat, whatever term you like…when printed out. That is because the printer speaks in “dots” now, and these dots look nice and crisp when you have 300 or more per inch. If you only have 72 dots per inch, the image won’t be tight and crisp. Might be acceptable in certain situations just to see what is on the page, but not for anything important.

If you really want to impress your friends, you will create your printed piece with images that are saved at 650 dpi (dots per inch), which is closer to museum quality. The conundrum comes in when you try to do a lot of fancy stuff in Photoshop with a large image saved at 650 dpi. You need quite a bit of RAM to be able to crank that out in any reasonable amount of time.

All right, now repeat after me: images for the web are 72 dpi, and images for print are at least 300 dpi. That’s it. Two numbers. Web, 72. Print, 300. Got it?

File Formats

We’ve already talked about jpeg images. What about the others? For the most part, jpegs will suffice in a myriad of situations. There are, however, times when someone may give you a different format.

Some of the more common file formats are .gif, .jpg, .png, .eps, ai, .pdf, .tif

Why do you need to know this? Well, let’s say you need an image for a project due at the end of the day. Your contact emails you the image, and you don’t get to it until 4 p.m., and then realize that the file won’t open in your image editing software because it’s the wrong kind of file. You call your contact back and he or she has already left for the day!

Here’s a quick rundown of the formats and what they are used for:

• GIF (Graphic Interchange Format): can be a static or animated image, used on the web for basic graphic images when really small image sizes are needed. It doesn’t render gradients or photographic images well.
• JPG/JPEG (Joint Photography Experts Group): most commonly used photographic/raster image format used on the web and in low-end digital photography.
• PNG (Portable Network Graphics): newer image format that allows for transparency in an image on the web.
• EPS (Encapsulated Post Script): image format that contains information useful to printers when outputting high-end graphics.
• AI (Adobe Illustrator): A proprietary document format for vector illustrations and graphics.
• PDF (Portable Document Format): that enables viewing of multi-page documents on a variety of platforms.
• TIF/TIFF (Tagged Image File Format): High-end photographic image format that contains more information for fine-grained editing and printing.

If you are dealing with image files for a logo, you will want to get it in an .eps or .ai or .pdf format, which will enable it to be scaled up or down easily without affecting resolution. If you are having it professionally printed, the printer will want your logo in one of these formats.

For situations where you need a high-resolution photographic image for print or editing, you should ask for a .tiff file. If you are working with smaller size images for the web, a .jpeg will do just fine.

If you need to email a multipage document or series of images, converting it to a PDF file will make it easy to email and also for people to view it. They will not need any particular software to view your content, except for the free Acrobat Reader, which most people have already. More and more printers like to receive materials in PDF format as well.

Unless you are a web designer or developer, you will likely not find yourself dealing much with creating .png files, but if you ever download or print out images from the web you may come across this format. It is used when transparency is needed, but if you print it out on its own you will likely get a plain white background.

Vector Images

You’re heard the term “vector” but aren’t really sure what it means. The quick explanation is this: vector images differ from raster images in that you are not dealing with a field of pixels or dots, but a series of dots and lines. Think of farmland viewed from above. The field of sunflowers is like a raster image, and the fence surrounding them is like a vector image. The posts are the points and the metal wires in between are the lines connecting them and forming the image.

The advantage of vector images over raster images is that file sizes are much smaller, and you can scale them up or down at will without losing any crispness or detail in the image. This is because what happens between the dots and lines is defined by the distance between them, and the angle of the “handles” that you can angle or lengthen or shorten to set curves. When you are enlarging a raster image, for example, the computer has to “guess” how to fill in the pixels based on the colors already existing in in the image, and as of this writing, no one has yet figured out a way to take the guess work out of this process.

The disadvantage of vector images is that photographs are by nature raster images, and to achieve the look of a photograph in a vector format requires many hours of expert work to achieve and lots of practice and patience. If you want to see examples of this, do an online search for “gradient mesh”, which is the tool in Adobe Illustrator that can be used to achieve this effect.

Don’t worry if all this isn’t entirely clear. My goal is to give you a basic idea of what the various image formats do. Next, let’s look at a few image editors.

Image Editors

Okay, so now you know a little about what do to with your images, but what is the best way to edit them? In the not to distant past I might have given you a list of desktop image editing software, but there are now quite a few free of low cost image editors available online these days, so I’ll limit my list to those.

Most of them will require you to register if you want to save or store your images, but several allow you to demo their product anonymously to see which one you feel comfortable with. There are more than what I’ve listed here, but these seem to be the most prominent on the scene right now.

• Adobe Photoshop Express This editing system seems pretty responsive, and the tools are organized into basic categories with more available when you choose what you’d like to do, whether it’s just cropping and resizing, or decorating or emailing.
• Picnik Picnik has a very simple set of tools, but it’s clear and easy to navigate. It even has an “auto-fix” feature for those who don’t want to bother with doing their own fixes. It has basic resizing, rotation, cropping, exposure control, red-eye reduction and sharpening tools. No registration required to use.
• Pixlr A more advanced editor that lets you upload images from your desktop or the web. It also let’s you create an image from scratch with paintbrush, pencil, paintbucket and type tools. Pixlr also has a Firefox plugin and a very basic “Express” version of their editor for those who want fewer options to choose from. I also found it to be very responsive with little wait time for image processing.
• DrPic.com Probably the simplest editor of the group. The page opens up to the editor and give you the option to load a picture and choose the format you want to save it in. Editing tools include resize, crop, rotate, contrast, autofix, text, blur, sharpen, frame, Polaroid, oilpaint and grayscale.
• Sumo Paint This is more of a tool for creating an illustration from scratch, but you can still use it with any type of existing image. It has many more “painting” features than the other editors, and quite a few effects to choose from, including 3D, reflection and lighting filters.
• Aviary Phoenix Very popular editor with live previewing and layers. Could be intimidating for the novice user, but more advanced users will appreciate the thought put into this image editor. Aviary Phoenix is part of a large set of online tools made by Aviary, including a color editor, audio editor, effects editor and a vector editor.
• WebResizer.com If all you want to do is resize an image, this tool is for you. Gives you a side by side comparison when looking to make your web images as lightweight as possible. Also allows for sharpening, rotating, exposure, contrast and saturation.

My advice is to visit them all and see which one seems to be the easiest for you to work with. Have fun and don’t forget to bookmark the one you like best.