You have a great logo for your business. In fact, you probably have several versions of your logo, with different names and file extensions like .jpg, .png, .eps, and .pdf. But, like many business owners, you may have no idea what to do with these logo file formats.

Do any of these situations sound familiar to you?

Scenario #1

You’re setting up an online profile for your business, and the first step is to upload your logo. You navigate to the folder on your hard drive and select a file that looks right. But when you see the result online, the logo is blurry.

Scenario #2

You’ve hired someone to create a new brochure for your business – it’s a big investment for you, and you plan on having it professionally printed. The graphic designer asks you for your logo as a vector file. You respond with “a vec-ta-what now?”

Scenario #3

You’re creating a PowerPoint presentation, and your favorite template has a colored background. You’ve been working on it for hours, and the last thing you do is add your logo to the footer. But for some reason, the logo appears in a white box which messes up your whole design.

With so many options available, it can be difficult to know when to use the various graphics file formats for your logo. And the wrong choice can negatively impact the quality of the logo in which you have invested so much. Frustrating, right? The good news is that each of these exasperating situations is easily solved when you understand the different file formats.

First, some graphics-related definitions

The image requirements for web and print use are very different.

What is: vector vs. raster

We can create computer graphics as either vector or raster images. Each option has unique properties and best uses.

Vector Graphics
Vector graphics are made up of lines and curves called paths, each of which is assigned a color value. Vector files – such as EPS or PDF – store the lines, shapes, and colors that make up an image as a mathematical formula. This formulaic approach allows images to be enlarged or reduced in size without degrading or becoming pixelated – a very important factor when it comes to your logo.

Vector graphics are created using graphic design software such as Adobe Illustrator, and often require graphic design software to open or edit. A logo should always be originally created as a vector graphic.

Raster Graphics
A raster graphic is made of countless tiny squares (called pixels or dots) that collectively compose an image. Each square is coded with a particular color. When used correctly, these individual pixels blend seamlessly into the overall image – but if a raster graphic is enlarged or the quality has degraded, you will start to see the edges blur or squares to appear. In other words, the image will become “pixelated.” This makes raster graphics, created using software like Adobe Photoshop, a poor choice when creating a logo. However, the logo files that you’ll work with most often will be rasterized versions of your vectorized logo – JPG, PNG, and GIF are all raster image formats.

Raster graphics are widely supported by all types of software as well as websites.

What is: RGB vs. CMYK

Unless you’re a professional designer or printer, all you need to know about these color models is that RBG is better for digital use (such as on your website), and CMYK is best for print. But in case you’re curious, here are a few of the differences.

RGB Color Model
This color model mixes various intensities of red, green, and blue light (get it? RBG = Red/Green/Blue) to create any imaginable color. Each pixel of a raster graphic contains a particular mixture of these three colors, and each color is assigned a code that tells the computer display exactly what to do. The RBG code for the Caffeinated turquoise color, for example, is 6/167/156. Knowing this allows us to ensure consistent use of color throughout all of our digital designs.

CMYK Color Model
Unlike a computer screen, a printer can’t use light to display the colors. Instead, it mixes the colors Cyan, Magenta, Yellow, and Key (black) to create thousands of color variations on paper using tiny dots. The CMYK code for the Caffeinated turquoise color is 78/11/46/0.

What is: Low Resolution vs. High Resolution

The term resolution is often used interchangeably to describe the quality of an image, the dimensions of an image, or the size of a screen – which can confound even seasoned designers. We’ll be using it to discuss the quality of a raster graphic (vector graphics do not have a fixed resolution).

Low Resolution
Low-resolution graphics are used primarily for the screen and when printing files at home. Websites, social media, email, and even word-processing software typically work faster with or require low-resolution graphic files. Low resolution, often between 72 and 150ppi (pixels per inch), is faster to load on websites but may not appear as crisp and clean as a higher resolution file.

High Resolution
Anything printed professionally should use high-resolution files of at least 300dpi (dots per inch). A graphic with less than 300dpi may print out fuzzy or pixelated and will not look professional.

Pixel Dimensions
Pixel Dimensions refers to the actual size – the height and width in pixels – of the image. Whether you’re uploading your logo to the web or inserting it into a Word document, try to use the exact dimensions needed or larger – never something smaller. You will most commonly be using a rasterized version of your logo, such as a JPG or PNG, so if the graphic is enlarged, it will become stretched and/or pixelated.

What is: Lossy vs. Lossless Compression

While compression isn’t a factor that the layperson needs to know much about, it can help to understand the differences in the file types.

Lossy Compression
Lossy Compression reduces file size by permanently deleting pixels from the file. You’ll get a smaller file size, but every file save degrades the quality of the graphic, which can result in fuzzy, pixelated images over time.

Lossless Compression
With Lossless compression, every bit of data remains when a file is uncompressed. The result is a graphic that is more stable but generally with larger file size.

Logo File Formats for Web Use

Image Resolution: typically 72ppi
Pixel Dimensions: Sized as needed or larger
Color Model: typically RGB

These are some of the most commonly used logo file formats when your logo (or other graphic) will be used digitally or on the web.

PNG

WHAT IT IS

• PNG stands for Portable Network Graphics
• PNG files are raster images
• PNG format supports a transparent background
• Best for line drawings, illustrations, and graphics with text (including logos!)

WHEN TO USE IT

• When saving computer-generated graphics
  When designers create graphics & illustrations on the computer – such as logos, icons, or graphics with text – we often save them as PNG files.
• When inserting your logo into a document that will be viewed on screen
  Be sure to use the exact size needed or larger. You can usually reduce the dimensions of a PNG graphic without losing quality but if you enlarge it, it will become pixelated.
• When your logo will be uploaded to the web
  PNG files are widely used for on websites, especially when the logo or other graphic is not on a white background. When uploading your logo to someone else’s website – such as a social media site or SaaS, it’s always a good idea to check their image requirements.
• When you are placing your logo anything other than a white background
  PNGs are the best choice when you need a transparent background on your graphic, such as when placing your logo on a colored background or photo, to avoid that ugly white box.
  

JPG

WHAT IT IS

• JPG (or JPEG) stands for Joint Photographic Experts Group
• JPG files are raster images
• JPG does not support a transparent background
• JPG files use a “lossy” compression
  Lossy compression means that the graphic will lose some quality each time you save it.
• Best when the graphic you’re using includes a photograph

WHEN TO USE IT

• When inserting photos into a document that will be viewed on screen
  Be sure to use the exact size needed or larger. You can usually reduce the size of a JPG image without losing quality. If you enlarge it, it will become pixelated.
• When a photo or graphic with a photo will be used on the web
  JPGs are the best choice for web use when your graphic contains a photograph such as sharing a photo on social media.
• When you are placing your logo on a white background
  If you try to place a JPG on a background with color, your graphic will have an unattractive white box around it.
  

GIF

WHAT IT IS

• GIF stands for Graphics Interchange Format
  Incidentally, there is some dispute over whether to pronounce GIF with a hard or soft g. We’re partial to a hard g, as in “graphics.”
• GIFs were frequently used in the past, but have been widely replaced by PNGs for most uses.
  GIFs are still often used for very simple web graphics with limited colors and lines, such as icons, and for animated graphics, but we don’t use them for logo files.

WHEN TO USE IT

• When you want an animated graphic
  GIF animated graphics are a popular trend on websites and social media.
  
• When uploading a small, simple graphic to the web
  While PNG and JPG files are used more commonly these days, GIF files are still popular with some website developers for particular types of simple graphics like icons.

SVG

WHAT IT IS

• SVG stands for Scalable Vector Graphic
• As you can tell by the name, SVGs are vector files
  This can make them ideal for logos, icons, and illustrations on the web, as the resulting graphics will be crisp and clear at any size.
• WordPress does not support SVG files by default due to security concerns
  This is because SVGs aren’t a typical image format like raster images; because they’re created with code, they can be manipulated for malicious purposes. This makes them a security risk. Learn more about the risks and benefits of using SVG files on your website.

WHEN TO USE IT

• When you have professional support for your website
  We don’t recommend using SVGs unless you understand what they are and how to use them

HOW TO CHOOSE

While this flowchart doesn’t cover all available logo file formats or situations, most of your typical needs for web graphics are covered.

Logo File Formats for Print Use

Image Resolution: 300dpi
Color Model: CMYK

Logo file requirements for print can be very different from web or digital-only uses. These are some of the most common file formats when your logo (or other graphic) will be printed, or inserted into another document or project that will be printed.

TIFF

WHAT IT IS

• TIFF stands for Tagged Image File Format
• TIFF files are raster images
• TIFF files are used most often for photographs
  TIFF files are commonly used by photographers to store and transport high-resolution pictures. We don’t save logo files as TIFFs.
• TIFF files use “lossless” compression
  Lossless compression means that the graphic maintains a full-quality copy of the picture each time you save it.
• File sizes are significantly larger than JPG files, and can support transparent backgrounds

WHEN TO USE IT

• If you’re sending a high-resolution photograph to a graphic designer
  Choosing a TIFF file will ensure that the designer can edit the photo and save multiple times without losing image quality.

JPG

WHAT IT IS

• JPG (or JPEG) stands for Joint Photographic Experts Group
• JPG files are raster images
• JPG does not support a transparent background
• JPG files use a “lossy” compression
  Lossy compression means that the graphic will lose some quality each time you save it.
• Best when the graphic you’re using includes a photograph

WHEN TO USE IT

• When inserting photos into a document that will be printed on a home or office printer
  If you’re inserting a photograph into a document using standard word processing or spreadsheet software, for example, a JPG file is easy to work with. The quality will depend on the resolution at which the JPG was saved, however – a 150dpi JPG will not print as crisp and clear as a 300dpi JPG.
• When inserting a graphic, such as a logo, into a document with a white background that will be printed on a home or office printer
  Remember, JPG files do not support a transparent background. If the document has a colored background, you’ll need a PNG file.
  

EPS

WHAT IT IS

• • EPS stands for Encapsulated PostScript
  • EPS files are vector graphics

EPS files preserve vector editing capability, meaning that the graphic can be edited or resized as much as desired without losing any quality if one has the right software.

WHEN TO USE IT

• If you need to send a logo file to a designer for use in a project
  Graphic designers will rarely want a JPG, PNG, or any other raster file. An EPS or properly saved PDF file will allow them to resize the image as needed without losing any quality.
  

PDF

WHAT IT IS

• PDF stands for Portable Document Format
• PDF files CAN be saved as vector graphics
  While you may be familiar with PDF files as “snapshots” of a document that you can open on any computer system with a PDF reader, designers love PDFs for another reason. Adobe’s Illustrator and Photoshop have the ability to save files as a PDFs that can be re-opened and fully edited, retaining all vector lines and graphic layers. Remember that not all PDF files have been saved to maintain editing capability. Vectorized PDFs will have a much larger file size than a standard PDF.

WHEN TO USE IT

• If you need to send your logo to a designer for use in a project
  A PDF art file that is saved correctly can be opened and edited in Adobe Illustrator and is the preferred format for many graphic designers. If you aren’t sure about your PDF, an EPS file will work just as well.
• When sending or uploading a completed design file to a professional printer or print shop
  Most printers can handle PDFs, and many prefer them over native files such as AI (Adobe Illustrator) or PSD (Photoshop).
• PDFs are NOT a good option when inserting a graphic, such as a logo, into a document
  Most word processing software cannot handle using a pdf image as a graphic. You should use a JPG or PNG unless you can access Adobe Illustrator.

HOW TO CHOOSE

This flowchart covers the most commonly used formats and offers some guidance for file selection, but be sure to check with your designer or printer to find out their preference!

While this blog post doesn’t cover every graphics format, we included the best options for your logo and other simple needs. Do you have questions or comments? Just post them in the comments! We’re happy to help.

The post How to Choose the Perfect Logo File Formats appeared first on Caffeinated Design Studio.