The Ultimate Guide to File Types

computer showing file formats for small business web design

When it comes to choosing the right file type, the choices can be overwhelming. How do you know which format to save your logo in? Does your web designer need JPGs or PNGs? And what in the world is a vector graphic? No worries! We’ve put together the ultimate guide to file types to help you figure out which format will work best for your project.

Vector vs. Raster

Before we begin, it’s important to know the difference between a vector graphic and a raster image. 

A Raster Image is a bitmap, which is a grid of individual pixels that collectively compose an image. Every raster image is made up of countless tiny squares (pixels) that have been assigned a color. When you zoom in very close to a photograph (which is a raster image), you can see the pixels. 

Pixels are terrific because they can show chromatic gradations, undefined lines and shapes, and complex compositions, much like you would find in a photograph. However, when it comes to resizing your image, you’re at the mercy of those pixels. If you enlarge your image too much, you begin to see the individual pixels. This can cause your image to become blurry, or it can cause the edges of your image to become jagged and uneven.

A Vector Graphic is based on mathematical formulas that define image features such as polygons, lines, curves, circles, and rectangles. There are no pixels involved with vector images.

One of the biggest advantages to using vector graphics is that they can be resized without losing image quality. Since the graphics are based on geometric formulas and not pixels, you can resize a vector graphic to however big or small you want it and it will always look crisp and clean. This makes it a great format for logos, infographics, letterheads, and fonts.

Graphic showing difference between raster and vector formats for web design
When you zoom in on a graphic, you can see the difference between Raster and Vector.

JPG

JPG (or JPEG) stands for Joint Photographic Experts Group. This is the most standard format for raster images. A JPG is a compressed version of your image. You’re able to control how much of the image gets compressed by choosing your image quality during the save process (high, medium, low).

And since a JPG is a compressed image, any transparent areas in your image will be filled with white. So when your web designer asks you for a copy of your logo, make sure it’s not in JPG format. Otherwise they won’t be able to use it on anything that doesn’t have a white background.

It’s also good to remember that since JPG is a raster format, you won’t be able to enlarge the photo too much before it starts to become blurry. This is why it’s important to have properly-sized, high quality JPGs when using them in a web design project. And I hate to be the one to break this to you, but that old cell phone photo you want to use as the main image on your website homepage just won’t work. 

PNG

PNGs (Portable Networks Graphics) are very low resolution and they support transparency. This raster image format is great for saving smaller graphics that need a transparent background, like logos. Keep in mind that PNG is still a raster format. You won’t be able to resize your PNG without losing image quality. So make sure you’re saving your files in the correct sizes.

PNG images can be saved with a transparent background, whereas JPGs will have a solid background.

GIF

GIF stands for Graphics Interchange Format. There’s been some debate on how to pronounce GIF. But the meaning and use of this file format is still the same. GIFs only support 256 colors in the RGB colorspace (Red, Greeb, Blue – device screens use this color format) When used as still-graphics, GIFs are typically low resolution and great for using in email signatures and small web graphics.

This raster image format can also be used for small, looping animations that can be easily uploaded and shared thanks to the small file size. And it’s the format most widely used to make animated memes, as shown on giphy.com

TIFF

TIFF (or TIF) stands for Tagged Image File Format. This is a raster image format that is used for saving high-quality images on your computer. TIFFs use lossless compression. This makes them a great format for professional photographers, photo manipulation, desktop publishing, and other in-depth editing processes. The file sizes are quite large, so make sure you’re not using TIFFs for your web design project. Otherwise your page will slow down to a dead stop.

Fun Fact: TIFF was originally created as a universal file format for desktop scanners in the mid 1980s in lieu of proprietary formats proposed by the vendors.

PDF

PDF stands for Portable Document Format. PDFs are terrific because they’re able to preserve a document’s formatting. This makes them easy to share between users, platforms, programs, and websites. Today, PDF has become one of the most-used formats for document files and forms. This is due to their ability to look the same across all devices.

PDF is also a great format to use for print projects since the formatting and style will remain intact no matter how you send it or who opens it. The file size can become large though. If you need help shrinking your PDF file size try a PDF-reduction site like smallpdf.com .

EPS

EPS (Encapsulated Postscript) is a vector file format that is used for transferring image data between different operating systems. These file types can be opened and edited in virtually any kind of design software such as Adobe Illustrator, Photoshop, and Sketch.

Since these file types are vector-based, they can be resized up or down without losing image quality. This makes it a great format to use for printing. This is especially true if you’re printing on apparel or need to print large banners or signs.

The file size can be quite large though, so it’s not a good format to use for web design projects. With that said, it is a good idea to send your graphic files (like logos) to your web designer or web developer in EPS format. This way they can make edits if necessary, or export the graphic out in different formats depending on what they need.

PSD, Ai, and INDD

These are all formats used by Adobe programs. Adobe is a computer software company that specializes in design and development software. It’s used by many graphic and web designers. PSD files can be created and read by Adobe Photoshop, Ai is for Adobe Illustrator, and INDD is for Adobe InDesign.

While some formats are capable of getting the job done, there might be another format that’s better suited for that specific need. So it’s important to know the difference between them and how they work. Hopefully this ultimate guide to file types can give you a better understanding of all the different files types you might run across during your web design project.

If you have any questions about file formats, or if you want to talk with us about your web design project, contact us today and we’ll be more than happy to help you out! Not sure if your small business needs a website? Check out our other article and see why having a new website can be an important tool for your small business!

Share on facebook
Share
Share on twitter
Share
Share on linkedin
Share

Want to stay in the Timber loop?

Sign up for our newsletter to receive our latest blog posts and updates