Understanding File Formats

Okay so you know you need graphics and images for your website, blog, social media pages, etc. Everybody is talking about it and everybody is looking and critiquing. Chances are you're a  solopreneur and don't have a graphic designer on retainer right now so you're kind of on your own here. DIY everything, right? I get it. It's kind of my story too so I'm here to help!

As a young, self-taught, freelance graphic designer, I come across clients all the time that don't understand the file types or the functions of their brand new designs they just paid me for. With that in mind, how can I just let you jump right in and start creating without explaining a few things? That would be mean!

When creating graphics, it’s vital to make sure that you're exporting them correctly for your website and other online destinations. Images and graphics not only help shape your brand identity, but they can help or hurt your SEO [search engine optimization] and your UX [user's experience] if you don’t export them correctly.

There's a lot of acronyms in the design and online world, I know. Let's get to what you came for.

There are two types of files – raster and vector. Almost all of the images and graphics you create for your blog, website, social media accounts, etc. will be raster; vectors are suited for logos and graphics made with lines and shapes.

What are Raster Files?

Raster File Formats easily lose their quality, so you typically find these files in their final versions. Raster images are made up of tiny, squares of color information called pixels. Popular memes tend to look pixelated over time due to the quality lost during each compression (i.e. countless screenshots). 

  • Joint Photographic Experts Group (JPG) is often referred to as the default “file type”. It doesn’t support transparency, i.e. no transparent backgrounds.
  • Portable Network Graphics (PNG) is best used for high-quality text and graphics. PNGs have a large image size, so they will take longer to load on your website. PNGs can have transparent backgrounds.
  • Graphics Interchange Format (GIF) is used solely online (doesn’t translate to print). Super popular these days, GIFs can be animated, but can only support 256 colors (lower file size and quality). 
  • Tagged Image File Format (TIFF) are print-ready file formats. They are way too big to be used on the web, but the quality is not lost when saved or compressed.
  • Adobe Photoshop (PSD) is the file generated from Photoshop. It’s used for creating graphics and editing photos. You would never upload a .psd photo to the web but keep them; these are editable versions of your graphics and images.

What are Vector Files?

Vector File Formats are images or graphics made of simple, mathematical shapes and lines that can be indefinitely sized without losing quality. They are great for shapes (paths, strokes, lines). You would use these types of files for logos, business cards, and documents, i.e., not photographs.

  • Encapsulated PostScript File (EPS) use for files that need to be resized, i.e. logos. EPS files can be scaled to any size without losing quality and support transparency. They work best for large format printing.
  • Portable Document Format (PDF) used for sharing documents without losing the design quality. They are generally used for sharing and can be compressed if necessary. If you are making a worksheet or e-book, you can do these in Adobe In-Design, Microsoft Word, or Apple Pages, and export the file as a PDF. PDFs work best as downloadable files.
  • Adobe Illustrator (AI) is the file generated from Adobe Illustrator. AI files are completely scalable and cannot be embedded online. They are ideal for printing. I use AI to create things such as logos and business cards.
 

-----------------------------------------

Quick Tips

  • Quality: Set the JPG Quality to 70-80%. This quality ensures speed for web without pixelation.
  • Naming:  Assign the file name that relates to your post keyword or website niche. For example, “spring-flatlay-1.jpg” is better than “DSC-1011.jpg” for SEO purposes.