May 19, 2020
.jpg)
Raster images are composed of pixels and have a defined proportion determined by their resolution. This means if they were created at a certain size, that size cannot be stretched or altered without compromising quality or becoming distorted. You should always save raster files at the size they are intended for use to maintain their resolution integrity. Standard raster files are JPEG, PNG, and GIF (more on these files types below).
Vector images are composed of proportional formulas, rather than having a defined proportion or a set number of pixels. This makes vector files very “flexible,” and it is helpful to know if you need to create a graphic that requires any kind of resizing — like a logo that is used on a business card or even as a bus wrap! Common vector files are EPS, AI, and PDF.
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 communicate the density of pixels in an image. Images used for the web will have lower resolution, with 72 DPI as the standard. Images used for print will have higher resolution, with 300 DPI or greater as the standard. Be careful not to create an image for print that is low-res; otherwise, it will end up pixelated and distorted; or an image for the web that is too hi-res, otherwise it will take forever to load.
Lossless or lossy refers to the way data is compressed in a file and how much information it retains. Lossless files preserve all of the file’s original data and allow the date to be perfectly reconstructed after it’s been compressed. Lossy files lose some of that original data when compressed or converted. PNG files are lossless, while GIF and JPEG files are lossy.
Pronounced “jay-peg” and short for Joint Photographic Experts Group, this is likely the file type you are most familiar with. You’ve used JPEGs in yearbook class, have seen them on print ads, or even created them by taking photos on your smartphone.
JPEGs are raster images and are composed of hundreds and hundreds of tiny pixels. 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. Think of it like taking a photocopy of your favorite picture, the photocopy still looks like the original photo, but some of the original data is lost. Likewise, because the information in a JPEG is limited, they cannot be made larger once they are a certain size.
Have you ever taken a photo off of Facebook and tried to get it printed despite the small file size or low-resolution warning? Did you end up with a super blurry, pixelated photo? That’s because once they are saved to a specific size, JPEGs cannot be scaled up – their purpose is to make large photographic files smaller but using less information. Despite their aversion to scale, JPEGs can be used for both print and web. A rule of thumb: 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).
Short for “Portable Network Graphics” and pronounced “ping,” PNGs were designed as a more open alternative to GIFs. One of the factors that make a PNG stand out most is that they support transparency. This allows you to have a transparent background on a logo file, instead of the file having a white background that cannot be altered.
PNG file compression is lossless, so there is no loss in quality, giving 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 top (or only) choice for when you need a clean logo or text over other visual elements on the web.
An SVG is a vector-based file and is used to display a variety of graphics, primarily on the web. Due to its nature as a vector, SVG’s are great for their flexibility and versatility that goes beyond the abilities of other web safe files. An SVG speaks more code languages than other files, like PNG, GIF, or JPEG, and allows them to operate smoothly with web-based technology. SVG uses shapes, numbers, and coordinates to create graphics in a browser, making it independent of resolution constraints and infinitely scalable—unlike files created in a pixel grid that are confined. Remember how SVG files speak code? This makes them editable and scriptable with code languages and allows them to be indexed and searchable on the web. Pretty cool, huh?
You know them, you love them, but you’re not quite sure: are they a video or a photo? Trick question, a GIF is actually defined as a lossless format for image files that supports both animated and static images. Short for “Graphics Interchange Format,” GIFs are an image file that is sometimes animated. So sometimes you may see them in animated form, like the “YAAAS QUEEN” dance you send to your group text, and sometimes you may see them in static image form.
GIFs are commonly used in the digital space, where images need to load quickly: like digital banner ads, websites, or emails. Rather than using a high-resolution image, many GIFs retain their most basic form of 256 colors in RGB. This allows the file to be much smaller in size, due to the limited color, and helps them to load more quickly. So now that you understand GIFs, the real question is: when it comes to pronunciation, are you team “jiff” or “giph”? According to the creator of the GIF, it’s pronounced with the soft “j,” but I’d be lying if I said I didn’t prefer the hard “g”!
A TIFF is a large raster file that does not lose quality—all of the original data is maintained no matter how many times you copy, re-save, or compress the file. You may have used TIFFs in Photoshop or Lightroom, or received an Adobe prompt to save as a TIFF over a PSD. The main difference between a PSD and TIFF is their respective size limits. A PSD is limited to 2GB, while a TIFF can handle more than 2GB. You can use both of these file types for photos or creating graphics for the web – but the size of the objects in the layers may make a TIFF a more suitable file for your use. Because of their ability to handle larger file sizes, TIFF files are commonly used when saving high-resolution photos for print. Also, due to their large size, you should avoid using TIFFs on the web as you’ll end up with long load times.
To be very straightforward, PSD stands for “Photoshop Document”— the program used to create and save this file type. Some PSD files contain just a single image, but the common use involves multiple images, objects, text, filters, and more, stored in layers within the Adobe Photoshop file. This allows the user to work with those individual layers, even after saving the file.
For example, when we created the banner for this blog post, we used a PSD file that stored the images, background color, 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 colors 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!
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, which gives them a great advantage. Creators are not limited to a single program to create, unlike with AI files, and can share and edit across multiple design programs.
An AI file, short for “Adobe Illustrator Artwork file” is a single-page vector-based graphic file. AI files are composed of paths connected by points to create graphics.
AI files are commonly used to create logos and printed assets. A great advantage to AI files is that they are flexible vector-based files, allowing them to be resized without losing quality. Additionally, AI files can be saved or exported in many different formats too. In fact, every other file type aforementioned in this list can be saved from an AI file! AI files are actually in the format of EPS or PDF, but the extension of AI is created and used by Adobe Illustrator. One downside to AI files is that they can be tricky to open or edit if you don’t have Adobe Illustrator – making them less versatile for sharing and editing across users.
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. For instance, you can sometimes open a PDF in Adobe Illustrator and still be able to edit it.
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.
PLANOLY Pro Tip: always save and send your resume as a PDF! They are a versatile file that almost every computer can open, unlike Docs, Pages, or Microsoft Word that some file recipients may not have access to.
Last but certainly not least, we have the INDD file, short for “InDesign Document,” created in Adobe InDesign. The most common use of an INDD file is for publication layout, in both print and digital – everything from your high school yearbook to an editorial fashion magazine and promotional brochures to digital eBooks. It includes formatting information, character and paragraph styles, page content, swatches, and linked files – like JPEG, PNG, AI, and PSD.
So there you have it! This post is by no means exhaustive, but a great place to start when familiarizing yourself with common file types and when to use them. When in doubt, it never hurts to do a quick internet search or refer back to this guide to make sure you are using the most appropriate file type for your creative needs.
.svg)
Enjoyed reading it? Spread the word
.png)
%201.jpg)
icon%20.svg){kind=small}
icon%20%20pink.svg){kind=small}
