FILE FORMATS AND DESIGN

Why do PNGs and PDFs print differently? Why can’t I get a white jpeg of my logo? What’s the difference between CMYK and RGB? 

If you’re a client who’s working with a designer for the first time, or if you’re just learning graphic design, these are questions that you may not have considered before. I put together this list of the pros and cons of different design file formats as a cheat sheet—hope this helps!

But first, some vocab

RGB:
RGB stands for Red, Green, Blue. All the colors that you see on a screen are made up of combinations of red, green, and blue. But where is yellow, you ask? When light shines through overlapping red and green channels, yellow is formed. Color formed by light shining through something works differently than color formed by light hitting an object. What’s more, there are some colors that appear bright and vibrant in RGB color space that are very difficult to achieve in printed form. Any files that are destined for life on a screen should be in RGB. 

CMYK:
CMYK stands for Cyan, Magenta, Yellow, and Black. Why do they use K for black and not B? I don’t know. This standard comes from Process Printing, where dots of these 4 colors are laid down in floret patterns on a miniscule scale, overlapping at different angles so that our eyes see different hues and shades of color. Most files that are destined for print should be in CMYK. There are some exceptions to this. If you are using a different printing technique, you may specify ink color using a color standard such as Pantone Color Matching System, and the specific ink color you chose will go directly onto the paper without using the four color method. This is used for limited color printing, color consistency, and colors not achievable through CMYK process. But that’s a conversation for another time. 

Dimensions vs. File Size:
For the purpose of this article, I’ll use dimensions or resolution to talk about the physical size of a file as you would see it on screen or in print, and file size to talk about the Kilobytes/Mebabytes/Gigabytes it takes up on your computer or website. 

Raster:
Raster artwork is made up of pixels. If you zoom in close, you will see the square, pixelated shape. Through pixels, subtle texture and color variations can be achieved. With raster artwork, it’s important to know how big the final file needs to be, and to build the file to at least that size. Will it be a large poster, or a small website image? Also, as a rule of thumb, files destined for print should have 300px/inch, while files destined for screen should have at least 72px/inch. Note that with the high resolution displays of new phones and computers, images at 150px/inch are recommended as well. Images with a higher resolution have more pixels and more information, which also makes them have a larger file size. 

Vector:
Vector artwork is made up of bezier curves and anchor points, which form shapes of flat color. If you zoom in close, there is no loss of quality. Vector artwork can be resized to any dimensions. The disadvantage is that texture and complexity can be difficult to achieve. You can export vector files to raster formats, but not the other way around. The only way to make an image vector is to trace or create it in a vector program like Illustrator. A large vector banner may have a smaller file size in terms of kilobytes/Megabytes than a raster image with much smaller dimensions. Vector file size increases with the complexity of the shapes and number of anchor points, not with the dimensions of the file.  

File types

JPEG:
JPEG stands for Joint Photographic Experts Group, which is the name of the organization that introduced this digital form. JPEG is a raster format. 

Advantages: JPEGs are a popular file type because they use “lossy” compression, which makes the file size small. They are also commonly accepted in most layout or web applications. They can be saved in either RGB or CMYK color space. 

Disadvantages: JPEGs keep their small file size by throwing away less important image data when you save them. If you save the same JPEG multiple times, so much information is thrown away that the image becomes degraded and looks bad. Also, JPEGs do not support transparency. That’s why a white logo cannot be a JPEG—it would just look like a white square. 

PNG:
PNG stands for Portable Network Graphic. It is a raster format.

Advantages: PNGs can be used interchangeably with JPEGs in many situations. They usually display detail and type better than JPEGs, and they support transparency. They use a different type of compression than JPEGs, and all image information is restored when the file is decompressed for viewing. 

Disadvantages: The more colors a PNG has, the larger the file size, so a 2 color PNG will probably be smaller than a JPEG, but a normal photograph will usually be significantly bigger. Also, PNGs do not support CMYK color space, so colors may look unexpected if printed.

PDF:
PDF stands for Portable Document Format. PDFs support RGB and CMYK, spot colors, and both raster and vector formats. 

Advantages: PDFs are very versatile and can be easily shared. They are often used with layouts that have lots of text. They tend to print well, and are often requested by printers. 

Disadvantages: PDFs are only as good as the content that you use. Like all file formats, it’s important that any images used in the PDF are in the correct color space and are high resolution enough for their final dimensions. PDFs sometimes preview on screen in an unexpected way, or make certain lines look thicker/thinner than they are. PDFs aren’t usually supported as image files on websites. 

GIF:
GIF stands for Graphics Interchange Format. It is raster.

Advantages: GIFs are known for their ability to show short animations, but they can also be still. They are sometimes easier to make than videos, and can be used online in many of the same places that JPEGs or PNGs can. 

Disadvantages: High quality GIFs tend to have a large file size, which is why the ones you see online tend to look low-quality. 

Editing file formats

The above formats can be exported and optimized via industry-standard design software. 

PSD:
Photoshop Document. Designers use photoshop to edit photos, and optimize them for their final use. Photoshop is a raster program, so all exports will be raster. The most common export formats are JPEGs and PNGs. You can also use Photoshop to make GIFs. Many designers prefer to store their images as PSDs and place the PSDs directly into layouts in Indesign to preserve editability and not worry about data lost through compression. 

INDD:
Indesign Document. Indesign is the standard tool for long-form layouts such as books, brochures, etc. Shapes and type created in Indesign are vector. The most common exported file format from Indesign is a PDF, but you can also export many other file types including JPEGs and PNGs. 

AI:
Adobe Illustrator. Illustrator is the standard tool for making vector graphics. It’s often used for things like logos and illustrations (as the name suggests). You can add raster images and textures to illustrator, but then you need to be aware of final file size, as it loses its ability to be used at any dimensions. Many designers like to store their vector files as Illustrator documents and place them directly into other programs like Photoshop and Indesign. 

There are many other file types, and many other advantages/disadvantages, but this is probably way more than you wanted to know in the first place, so I will stop here!