Web vs. Print Basics: File Types

I've saved file types for last in the web vs. print basics series for a reason: things are not as cut and dry in this category as they are in dimensions, resolution, or colors.  But there are some general principles to understand about which file types work best where, and that's what I'm focusing on today.


To talk about images online, we first need to discuss a big dividing line in the image world: raster vs. vector.  In a nutshell, raster images are set to a certain size, comprised of pixels, and don't resize (especially enlarge) very well.  Vector images use what I call "magical math" to represent an image and can be resized easily without losing quality.  (You can consult the great Wiki here and here for details.  And I wrote about vectors in this post.)  For final products for most online projects, you'll stay on the raster side of the image divide.

Among the raster image types for typical online projects, the 2 you will encounter the most will be JPG and PNG.  JPGs lose some information when they save (this is called lossy), which can create smaller file sizes.  JPGs also allow for users to select the quality level to save.  PNGs save all data (which is called lossless), and this means that they can have larger file sizes and more detail.  PNGs also allow you the option of having a transparent background behind a graphic, which is not possible with JPGs.

Now, there is a 3rd raster format that you will sometimes see online, as well: GIF.  Most of the time these days, GIFs are used for low quality, short, animated loops.  There's practically a whole new form of GIF communication in social media now, but GIFs can also be used for still images, too.

So how do I choose which raster image type to use in different situations?  Well, I just don't use GIFs, so they're right out.  And to choose between JPGs or PNGs, it is usually an issue of file size for me.  For instance, if a website isn't loading quickly enough, I may switch PNGs to JPGs because they will load faster.  But if detail is more important than a file size or load time or I have to have a transparent background, I'll opt for a PNG.  For detailed discussions about these 3 raster image types and when to choose which format, go here and here.


Now let's talk about print files.  What type of file is your print shop going to be happy to get from you?

PDFs are very, very popular for print projects.  PDF stands for Portable Document Format, and they really do live up to that name.  They send loads of information easily, compactly, and clearly, including different types of images within them, text, and layout design.  And you can set the PPI (pixels per inch) or DPI (dots per inch) for the printed item to the correct amount for your desired print project type and quality (for more info on this, see my post in this series about resolution).

Vector graphics, such as EPS and AI files, allow someone to open the file with the right software and be able to edit it, which also makes it a popular choice with printers.  If something isn't quite right in the file received, a printer can have the opportunity to make a change.  Printers can also ensure that output parameters for printing are correct if they start with a vector file.

How do I decide which type of file to use for a print project?  In these cases, I let the printer be my guide.  Online or in person print shops will have recommendations about which file type they'd like to receive from you and any particular specifications it needs to have.  And because I want a print project to have the best odds of success, I just give the printer what they ask for.  Plain and simple.

Making it Messy

And now that I have put the file types into neat online and offline camps, allow me to make things messy again.  Let me give you some examples where file formats aren't used as I've already stated.

1) Vectors are very often used to create images for online projects, but they are then generally exported to a raster format that browsers can display easily.

2) Even though rasters rule online, occasionally a vector can be used for a button graphic or something similar.

3) JPGs or PNGs are put into PDF documents for print all the time.

4) PDFs are often used online and read on a computer only.


So no, there aren't hard and fast rules about file types for certain uses.  But the generalities I've discuss above will help you to understand what might be needed for an online project vs. a printed project and why there is a difference.  And I hope you have filed away this file type information away for your next project.

Posted in Creative Speak and tagged , , .