Are you a small business owner who is struggling with digital art? Or are you tech savvy and know all about file extensions and color channels, but still want to learn about the correct file formats for digital art? Whichever you lean more towards you can gain the knowledge you need to create digital files that are shareable with the network of designers you work with.
If you are in the first category it may be helpful to explain what file extensions are and what they mean. File extensions are the letters that follow the period in a file name such as filename.docx for a Word document, another example might be photo.jpg for an image file. These letters show what type of file it is, and the program(s) you need to open it.
Vector Images vs Rasterized Images
Most images that you view online are comprised of compressed files that have been rasterized. Rasterization is the conversion of a vector shape into pixels or dots. It is mapped by a program to tell devices how to display it as a digital image or how to print the image. Compression is how your images are saved via a specific algorithm in order to make a smaller file size (less bytes) and to move them to another file extension.
These compressions and rasterization make images unable to be quickly scaled to the size needed for a promotion or digital ad. When using a file format that is rasterized and compressed your images are saved as copy of the source file. These files save according to the exact size and pixels per inch measurement, meaning they are not scalable. This is why graphic designers use vector files for artwork when creating promotions and templates for promotional products.
VECTOR IMAGE VERSUS RASTERIZED IMAGE
Vector files are a not compressed or rasterized. Vector images are created from paths that are composed of lines and cubic Bézier curves, this gives you the ability to have curves in your paths, these paths comprise the image you create and allow for scaling of that image to any size. The paths can be filled, stroked or used to clip out portions of an image.
The common file extensions for vector files are .ai (Adobe Illustrator Artwork), .eps (Encapsulated PostScript), and a vector version of .pdf (Portable Document Format).
Common Vector Formats
- AI – Adobe Illustrator Artwork
- EPS – Encapsulated PostScript
- PDF – Portable Document Format
The file extensions .eps and .pdf are compound file formats. Compound files can be saved with both vector and rasterized images within, allowing for greater conversion and workability within the files. However compound files should be used with vector data only if you are planning to use them for promotional products or apparel designs.
Graphic designers and other digital art professionals prefer to save you time and money by having you produce vector files as they can be scaled to any medium. However if you do not have the ability to create these types of files or do not have artwork yet, graphic designers can trace your files (create new paths over existing rasterized art) or create new artwork for you.
After your artwork has been finalized for print or digital application the images may be rasterized and compressed. Although there may also be times when artwork is sent to a printer as a vector file. When saving files for print or digital keep in mind that there are two types of compression: lossless and lossy.
Lossless compression saves the vector image as a perfect copy of the image according to the image size (ex. Instagram photos are 1080 x 1080) and bits per pixel (8-32 bits depending on the application). Lossless files once saved are typically larger (more bytes) than that of lossy compression file formats, but are higher quality rasterized images.
Lossy compression saves a representation which is not a perfect copy. The image quality depletes with each save of this type of file, but the benefit is typically a smaller file size (less bytes).
Common Web Image Formats
- PNG – Portable Network Graphics
- GIF – Graphics Interchange Format
- JPG or JPEG – Joint Photographic Experts Group
Due to lossless compression .png (Portable Network Graphics) or .gif (Graphics Interchange Format) are typically used for web images. Files that are .png also have the advantage of being able to save with transparency. The lossy file type you have probably seen used is .jpeg (Joint Photographic Experts Group) or .jpg.
Color Channels for Digital vs Print
Color channels are grayscale images in one color stacked together to create the full color image. For instance digital applications use the RGB (red, green, and blue) color channels. The red channel isolated by itself shows the portion of the image that has red tones, it is then layered with the blue and green channels to make the full color image.
The pixel data in each of these channels is typically 8 bits per pixel, combining the channels together creates an image that is 24 bits, this image is considered “true color” because the amount of colors it can display is above what the human eye can discriminate.
The reason that the digital channels and print channels are different is due to the four color print process. The four color print process, like that of your inkjet printer, is called CMYK and is made up of cyan, magenta, yellow, and key, which is typically black. This printing process uses subtractive coloring meaning, it uses the complementary colors of red, green, and blue to filter the color.
It is the opposite of digital applications as digital itself is emitting light, the print absorbs it to create the image. Cyan absorbs the red color allowing the blue and green spectrum to reflect back to our eyes. When you see a pure red in a print it is basically the absence of cyan in that portion of the print.
CMYK CHANNELS SEPARATED
Because of this process it is important for print based promotions to be created in the CMYK format, as these channels tell the printer how and where to print each color. It will also keep you from making design mistakes as most printers cannot replicate the bright bold colors that the digital display RGB format can.
Resolution
Have you ever tried to print an image and it came out pixelated or blurred? The culprit is a low resolution image. Low resolution images are images that are small in size, such as a thumbnail image that is typically 100 x 100 pixels or smaller.
The reason it can not be scaled larger is because it is a rasterized image that is a perfect copy of the original vector image, meaning if you try to print it larger the quality of the image will be compromised. Raster images are constrained by the pixel data saved during compression to the image size it was saved at. Vector files are made of paths so they are able to be scaled.
If you want to print an image you will need a much higher resolution image (larger in pixel size) than its digital counterpart. Images for print need to be 300 dpi (dots per inch), this may also be seen as ppi (pixels per inch).
For digital images the standard is 72 dpi/ppi, meaning you will need to make your image for print 4.16666666667 times larger. If you want to print a 12” x 12” image you would need to make your image 3600 x 3600 pixels.
File formatting can be complicated, and it may take time to fully understand the intricacies of each detail needed for graphic design. Once you grasp the concepts it will be a breeze to quickly send your artwork to your production partner.
If you have anymore questions on the file formats needed for print or digital promotions please contact us. Please also visit what we do page to see what we can create for you and your company.
Vukovic, Peter. “Correct file formats: RGB and CMYK” 99 Designs,
https://99designs.com/blog/tips/correct-file-formats-rgb-and-cmyk/
“Vector vs Raster Graphics in Printing” Olympus Press,
https://olypress.com/vector-vs-raster-graphics-in-printing/
Gosha, Gabrielle. Farley, Jennifer. “GIF, PNG, JPG or SVG. Which One To Use?” Sitepoint,
February 08, 2017 https://www.sitepoint.com/gif-png-jpg-which-one-to-use/
