A Marketer’s Guide to Design File Types

Digital marketers work with designers all day long, but unless they’ve had any formal design training, they don’t always “speak the language”. Successfully working with designers and production companies starts with a thorough understanding file types. Requesting the wrong file type can make your break your project’s success – and be a little embarrassing for you. So let us help you look great and feel comfortable with common design lingo.

Printed versus Digital Colors: CMYK vs RGB

CMYK and RGB are the two primary color models used for everything in design, but each has a very specific usage.

• CMYK files should be used for physical printed materials. It was named after a four-color printing process that stands for Cyan, Magenta, Yellow and Key (or black). These colors represent the four inks combined during the printing process.

• RGB files are used for everything that appears on a screen (e.g, web, mobile devices, film, video). It is a light-based color model that stands for Red, Green and Blue, representing the three primary colors of light that combine to create other colors found in monitor screens and television.

Understanding Image File Types: Raster vs. Vector

Computer graphics can be created as either raster or vector images, and both have unique, specific uses. 

• Raster image files include WebP, JPEG, GIF, PNG, TIFF  and PSD and are used for photographs, digital art and web graphics. A raster image is a grid of pixels, or dots, you can see when you zoom in, and each pixel is a specific color. These images exist in one size, or resolution, so if you try to enlarge these images, you’ll often blur them. This is known as pixilation. And it happens because your software is using the surrounding pixels to guess which image data is missing.

• Vector graphic files include SVG, AI, EPS, PDF and are used for logos, icons, typesetting (fonts) and digital illustrations or graphics. Vector graphics are a series of mathematical calculations from one point to another that form lines and shapes. Vector graphics always look the same, even when you zoom in, so they can be scaled to any size without compromising their quality because they’re based on mathematical formulas. You can print vector graphics as large as possible and still maintain their high quality. When beginning a website redesign project, the designer will ask for your logo as a vector graphic.

​When to Use Different File Types for Digital & Print Deliverables

The type of file you use for your many digital deliverables matters. Using the wrong file type can negatively impact load time on a website, create pixilation.

1. AI (Adobe Illustrator)


• File Name Extension: .ai

• Best for: Digital illustrations, iconography libraries.

• What it is: This file is produced by Adobe Illustrator, the industry-standard program for developing vector graphics. The document is fully editable with multiple layers and objects.

Use when:

• You’re creating vector graphics, such as logos.  

• You’re creating illustrations or icons.     

Don’t use when:

• You need to manipulate or retouch images.

2. EPS (Encapsulated PostScript)


• File Name Extension: .eps

• Best for: Vector and illustration graphics, Logos.

• What it is: An EPS is an image format that can use both vector and raster image data. It typically includes a single design element that can be used in a larger design.

Use when:

• You need to send a vector logo to a client, designer or printer. The EPS file will always appear at the correct resolution, no matter the size.  

Don’t use when:

• You’re dealing with photographs or artwork. An EPS can handle raster images, but this image file is for vectors primarily. Use a PSD, TIFF or JPEG with a photo project instead.

• You need to display an image online. Export to JPEG, PNG or GIF first.


3. GIF (Graphics Interchange Format)


• File Name Extension: .gif

• Best for: Animations and icons.

• What it is: A GIF can be an image or animation file that’s compressed to reduce the number of colors and image information, which reduces the file size.

Use when:

• You want to create web animation, because GIF images hold all animation frames and timing information in one file. Animations are typically created in Photoshop and exported as a GIF.

• You need transparency, because GIF images can be layered over any background.

• You need a small file with a limited number of colors for simple icons and web graphics.  

Don’t use when:

• You need a photograph-quality image, because GIFs have a limit of 256 colors. Photos typically contain thousands of colors and will appear flat and less vibrant when converted to a GIF.  

4. JPEG (Joint Photographic Experts Group)


• File Name Extension: .jpg, .jpeg

• Best for: Website Images, photographs, and social media assets.

• What it is: A flat, compressed image file that will always have a solid color background, usually white. There are varying degrees of compression: low compression produces a higher quality image with a larger file size, while high compression produces a lower quality image with a smaller file size. The more you compress the image, the more pixilated the image becomes.

Use when:

• You need online photos and artwork to be downloaded quickly.
• You want to print photos and artwork. A high-resolution file with low compression can be edited for printing.

Don’t use when:

• You need a web graphic with transparency because of JPEGs’ solid color background. GIFs and PNGs are recommended for transparency.

• You need a layered, editable image because JPEGs are flat. Consider a PSD file instead.

 5. PDF (Portable Document Format)


• File Name Extension: .pdf

• Best for: Posters, fliers, digital booklets, presentations, forms.

• What it is: This image format displays documents and graphics correctly, no matter the device, application, operating system or web browser. 

Use when:

• You’re ready to print. As the near-universal standard, printers typically request PDF files to send a final design into production. Check with your printer to find out how they’d like you to prepare your file.

• You want to display documents on a website. You wouldn’t use a PDF for a single icon or logo, but it’s great for posters, fliers, magazines and booklets because PDFs keep your entire design in one package that’s easy to view, download or print.   

Don’t use when:

• You need to edit your design. Edit your raster images with Photoshop and vector graphics with Illustrator. When you’re done, combine those into a PDF for easy viewing.  

6. PNG (Portable Network Graphics)


• File Name Extension: .png

• Best for:  Icons and graphics with transparent backgrounds, logos.

• What it is: A PNG is similar to a GIF but features more color depth to produce a more vibrant image. 

Use when:

• You need high-quality transparent web graphics.

• You need a small file, because PNG files can condense in file size. This feature makes PNGs the ideal image file type for web graphics.

Don’t use when:

• You’re working with photos or artwork. PNGs can easily handle high-resolution photos because of its color depth, but that leads to enormous file sizes. For photos on the web, go with a JPEG instead.   

• You’re working on a print project, because PNGs are optimized for screens. Use a JPEG or TIFF instead.  

7. PSD (Adobe Photoshop)


• File Name Extension: .psd
• Best for: Digital graphic creation, photo editing, image sizing/compression
• What it is: This document is produced by Photoshop, the industry-standard program from Adobe for digital image manipulation. The document is fully editable with multiple layers and image adjustments. A PSD is also used in conjunction with InDesign, specifically as an image file linked to an INDD file.

Use when:

• You need to manipulate and retouch images.   

• You’re creating web-based graphics.

• You are creating image-based artwork for other Adobe software, such as InDesign.

Don’t use when:

• You’re working with large print-based graphics or typesetting printed materials directly from Photoshop.

8. SVG (Scalable Vector Graphics)


• File Name Extension: .svg
• What it is: SVGs are vector-based images or graphics that can be scaled without any quality loss. They are ZAG’s recommended file format for vector graphics for web design because they adjust to responsive screen sizes.  Make sure your CMS accommodates SVG files (some older CMS versions do not).
• Best for: Logos, icons, websites

Use when:

• You need an image to support animations or other sorts of interactivity.

• You need an image to scale within a responsive design without losing quality.

Don’t use when:

• You’re working with illustrations with intricate detail or when designing for print.

9. TIFF (Tagged Image File Format)


• File Name Extension: .tiff, .tif

• Best for: Print materials: posters, photography, brochures, documents, etc.

• What it is: TIFFs are compressed image files at extremely high quality. 

Use when:

• You need high-quality print graphics, because a TIFF is along the best formats available. If you’re printing photos, especially at large sizes, use a TIFF.

• You are making a high-quality scan of documents, photos and artwork, because a TIFF provides the best original file to work from.

Don’t use when:

• You’re working with web graphics. Use a JPEG or PNG when you need to display high-quality images online.

10. WebP (Web Picture Format)


• File Name Extension: .webp

• Best for: Website imagery

• What it is: WebP is a raster graphic file format that allows images to display at a quality but at a much smaller file size in comparison to Jpeg and PNG. These are ZAG suggests using these raster graphic file formats because they can help speed up websites and enhance the user experience.

Use when:

• You’re looking to reduce page load time and better user experience of your website, while keeping image quality.

Don’t use when:

• Designing print pieces as WebP is intended for digital use only.

• Your website is not built to support the image file format. Newer CMS' should support this.

If you are a professional photographer or work with high-quality images, compression of any kind still can lessen quality of the image.

FAQs

Q: Which Image File Format is the Best Format to Use for my website?
A: It’s recommended to save web images in next-gen formats like WebP for raster images and SVG for vector images. WebP usually offers better compression than PNG or JPEG, leading to quicker load times and less data usage. Whenever you can, try to use WebP or SVG for your website images.

Q: I have an image that needs a transparent background, which format would be best? 
A: WebP or PNG Format (if your website does not yet support WebP format)
 
Q: What format should icons be for my site?
A: SVG Format
 
Q: What is the suggested file size each image should be?
A: Keep smaller images under about 70KB. For internal image headers and larger homepage images, you can go a bit higher, aiming for around 100KB to 150KB to maintain good quality at a larger size.
 
Q: How do I optimize Images for my website? 
A: Export images directly from the application you use to create them, like Photoshop, to ensure the best quality with the smallest file size. After that, it’s best to run the raster images (like JPGs and PNGs) though an image optimization tool (such as ImageOptim) before uploading them. Some newer CMS' also include this feature.

We're here to help

ZAG Interactive’s design experts can help you understand the various formats and which ones should be used with which types of projects. Whether you need assistance in branding & positioning, website design or integrated marketing, trust ZAG Interactive to help you become fluent in the language.

• Website