Can we skip to the good part?
In this blog post, The Azori Guide to Understanding Design File Types’. We will be covering:
04. Common Raster Files
– JPEG
– PNG
– GIF
– TIFF
05. Common Vector Files
– PDF
– EPS
06. Common Artwork Files
– PSD
– AI
– INDD
Click on any of the above links to direct you to the exact section you’re looking for!
Have you ever wondered when you should use a JPG instead of a PNG? Maybe you’re just wondering what a JPG or PNG even is?
File types can get confusing and when you’ve paid good money for great quality designs & images, you want to make sure you’re getting the best out of them. There’s nothing worse than uploading a graphic to your website only to find it’s distorted and blurry. While the large variety of image formats may seem overwhelming, there is a method to the madness!
This guide will give you the lowdown on which file types work where, to keep your graphics & images looking immaculate!
Raster vs Vector File Types
Raster images are quite a rigid file type, they are composed of pixels and have a specific proportion determined by their resolution. This means if they were created at a certain size, that size cannot be stretched or altered without becoming distorted. You should always save raster files at the size they are intended for use, to help maintain their quality.
Let’s say you’ve created a raster image the size of an Instagram profile picture, if you decide you want to use this as your computer desktop background – trying to stretch it to that size will result in a dramatic loss in quality & probably leave everything a bit blurry.
Standard raster files are JPEG, PNG, and GIF (more on these file types below).
Vector images are far more adaptable, rather than having a defined proportion or a set number of pixels, they are composed of proportional formulas. In simple terms, this means vector files are very “flexible.’ If you need a graphic that requires resizing – like a logo that is used on multiple publications or even as a bus wrap – Vector is your guy!
Common vector files are EPS, AI, and PDF.
Hi-Res vs. Low-Res
Hi or Low Resolution refers to the density of pixels in an image. Dots per inch (DPI) or Pixels per inch (PPI) are units of measure that show the density of pixels in an image. Images used for the web will have a lower resolution as opposed to images used for print, which will have higher resolution. Images for print require a lot more quality than those which are just used on the screen!
Be careful not to send off a design to print that is low-res; otherwise, you may find yourself with a blurry or distorted printed image. Likewise, if an image for your website is too hi-res, you’ll be waiting forever for it to load.
Lossless vs. Lossy
Lossless or lossy refers to the way data is compressed in a file and how much information it keeps. Compression is used to reduce file sizes and change various attributes of an image file.
Lossless compression means that as the file size is compressed, the picture quality remains the same – it doesn’t get worse. Also, the file can be decompressed to its original quality. Lossy compression permanently removes data, meaning that some of that original data is lost when compressed or converted.
Have you ever downloaded a few files at a time and found that your files are stored in a zip file, which then need to be extracted? When you extract those files & reconstruct them, if the files are lossless, they’ll reappear as good as new. If they are lossy, you might be missing some of the quality.
PNG files are lossless, while GIF and JPEG files are lossy.
Common Raster File Types
JPEG
This is the most commonly used file format, and you should find most of your graphics will be in this file type. Jpeg is commonly used for photos and graphics. You’ve probably seen JPEGs on print ads or created Jpegs yourself by taking photos on your camera or smartphone.
Jpegs are ‘pixel based’, which means that when you try to make them bigger or smaller, your image will start to lose quality and become blurry or pixelated. They are known as “lossy” files because when a JPEG is created, to maintain a smaller file size, some unnecessary information is permanently deleted or lost.
Have you ever saved a photo off Facebook and tried to get it printed despite the small file size or low-resolution warning? You likely ended up with a super blurry, pixelated photo! That’s because once they are saved to a specific size, JPEGs cannot be enlarged (scaled up) – their purpose is to make large photographic files smaller whilst using less information.
JPEGs can be used for both print and web, you just need to be mindful of the resolution.
A rule to remember: web images can have a lower resolution (like 72 DPI, so that the image loads quickly), while print images require a higher resolution (like 300 DPI, to retain as much image information as possible).
When to use JPEGs:
- You want to upload your logo or other graphics online and on social media such as Instagram
- You want to add an image / graphics to your website
- You are sending anything high resolution in the correct size to be printed.
When not to use JPEGS
- You need a logo or graphics with a transparent background
- You are sending anything low resolution to be printed, for example anything below 300dpi. When it’s pixel based, they are often low quality and will leave you with a low quality result.
PNG
PNG’s are a pixel based file format. However, PNG’s are different from JPEG, as they are transparent, meaning that the background will be removed from any of your graphics.
One of the factors that make a PNG stand out most is that they support transparency. Which basically means that any designs such as a logo file, can have a transparent background, instead of the file having a white background that cannot be altered.
PNG file compression is lossless, so there is no loss in quality, which gives them the ability to handle detailed, high contrast information. PNGs are great for use on the web but are not ideal for print. They are crucial to producing files that JPEGs can’t effectively create and are the perfect choice for when you need a clean logo or text over other visual elements on the web.
When to use PNGs
- You want a graphic with a transparent background, such as a watermark over photos or a header on your website.
When not to use PNGs
- You want to upload to Instagram. Instagram always decreases the quality of PNG files.
- You are sending anything to be printed. As they are pixel based, they are often low quality when printed.
GIF
We’ve all heard of a GIF! Those short animations that make it possible to send a short “YAAAS QUEEN” dance to your group chat.
GIFs are a lossless format for image files that support both animated (moving) and still images. GIFs are commonly used in the digital world, where images need to load quickly: like digital banner ads, websites, or emails. Rather than using a high-resolution image, many GIFs have a very basic form. This allows the file to be much smaller in size, due to the limited colour, and helps them to load more quickly.
When to use GIFs
- You want to decorate your online presence, such as instagram stories, with branded moving gifs (also known as stickers)
- When you need to express your emotions to the girls group chat & a text message just will not do!
When not to use GIFs
- You want to add to your website for a decorative touch. GIFs are often too low quality and jumpy to use for your online graphics.
TIFF
A TIFF is a large raster file that doesn’t lose quality no matter what you put it through. You can stretch, enlarge, compress this file and all original data will be maintained. If you’re a photoshop user, you may have used TIFFs in Photoshop or Lightroom, and received a prompt to save your file as a TIFF over a PSD.
The main difference between a PSD and TIFF is their size limits. A PSD can only go up to 2GB, while a TIFF can handle more than 2GB. You can use both file types for photos and creating graphics for the web. However, because of their ability to handle larger file sizes, TIFF files are commonly used when saving high-resolution photos for print. I would recommend avoiding using TIFFs on the web, as they are large files and could leave you waiting a long time whilst they load.
Common Vector File Types
PDF files, short for “Portable Document Format” files, are a commonly used file type that many of us work with on a regular basis. PDFs can be created and edited in many different programs and are known for their versatility in being viewed. They are typically used for read-only documents, but some PDFs can retain information that makes them editable. If you want to print any of your brand assets, printing companies will require your pdf files.
Another advantage to PDFs is that they allow you to input new information with form fields without disrupting the document format – like when you download and fill out a tax or health insurance form. This is helpful because it allows users to input new information without altering the layout.
If you’re sending out resumes or important documents, always do this as a PDF. Why? With such a variety of computers available nowadays, not everyone shares the same software. Meaning that if you send your resume as a word document, and the recipient uses Google docs, they may have a hard time opening your file. Save the hassle by sending a PDF – almost every computer can open it, unlike Docs, Microsoft Word or Pages.
When to use PDFs
- You are sending designs to be printed. Most printers prefer pdf’s as they are easy to prep and preview.
- You need to display any documents online or over email (price lists, e-books, posters etc.)
When not to use PDFs
- You want to upload graphics anywhere. PDFs aren’t often able to be uploaded.
EPS
An “Encapsulated PostScript” file or EPS is a vector-based file that is designed to create high-resolution graphics for use in print. Many kinds of design software create EPS files because they are a universal file type. That means that designers can use EPS files across multiple programs, unlike AI files.
EPS files contain the raw vector design and can be edited in software like Adobe Illustrator. If you ever find yourself working with a designer, they will need access to these, but generally you shouldn’t need to touch them for everyday use.
When to use an EPS
- You are working with another designer. They will appreciate having the raw files as they are high quality
- You are sending large-scale designs to be printed such as billboards or signs.
When not to use an EPS
- You need a transparent graphic.
- You are wanting to upload your graphics anywhere; eps files aren’t often able to be uploaded.
Common Artwork File Types
PSD
PSD stands for “Photoshop Document”— the program used to create and save this file type. Some PSD files contain a single image, but mostly they contain multiple images, objects, text, filters, and more, stored in layers within the Adobe Photoshop file. This allows the user to make edits to the files individual layers, even after the file has been saved.
For example, when we created the banner for this blog post, we used a PSD file that stored the images, background colour, and different shapes. There are multiple images and objects in that file. Even though the image is saved to a PNG for the blog, if we want to edit the colours or any of the images, we can open the PSD to make those changes. It may look like a flat image, but it’s actually a dynamic and fully editable file!
AI
An AI file, short for “Adobe Illustrator Artwork file” is a single-page vector-based graphic file.
AI files are mainly used to create logos and printed assets. A great advantage to AI files is that they are flexible, allowing them to be resized without losing quality. AI files can also be saved or exported in many different formats too. In fact, every other file type mentioned in this list can be saved from an AI file!
There is one setback with AI files, which is that unless you have Adobe Illustrator, you might find it difficult to open or edit these files. Which isn’t great if you’re sharing and editing your files with other users.
INDD
Finally, we have the INDD file, short for “InDesign Document,” created in Adobe InDesign.
Whenever you’re working in InDesign, you’re working with an INDD file. These files are mainly used by graphic designers, journalists, marketers, and publishers who work with Adobe products, the INDD format is the default file type for InDesign.
The INDD file has everything a page layout needs — from fonts and formatting information to page content, swatches, and styles.
What are they used for? Anything from print & web layout design, e-books, presentations & Incopy.
INDD files are great for multi-page projects. You can create templates across pages, chapters, and publications. The downfall with INDD files is that they are only fully compatible with InDesign and other Adobe Creative Cloud software, which isn’t great if you need to share your files across multiple users. The file sizes are also extremely large which might mean extra loading time and will prevent you from sending them via e-mail.
So, there you have it! Just incase this has boggled your brain too much; we have created a really easy diagram below for you to save!
