Beginner’s Guide to Graphics – File Types

June 7th, 2016By Amanda Blumeyer
Jpg Key Showing Image File Types

I keep hearing people talk about a native file – what’s that?
You may have heard people refer to a “native” version of a file. This simply means a version of the file that was saved directly from the application in which it was created. So, a Photoshop file saved as a .psd or an Illustrator file saved as an .ai file would be a native file. This allows the user to edit the file directly in its native application, as opposed to a PDF or jpg version of the file, which are primarily viewed in a preview mode. However, native files are generally larger files, which is why it’s also helpful to have the ability to save something down to a PDF.

What about image files? What’s the difference between .jpg, .png, .eps and .gifs?

  • .jpg – stands for “Joint Photographic Experts Group” – one of the more common image files, jpegs are the type of images you can take with your phone. You may have noticed they lose clarity when you re-size them, and they are not see-through. Every part of the image is assigned a color.
  • .png – stands for “Portable Network Graphics” – primarily an image file used for web. The nice thing about .pngs is that (unlike a .jpg) the graphic doesn’t lose quality when compressed. Also, (unlike a .jpg) a .png has the ability to be transparent. Think about a logo image. If you’re placing your company’s logo in the header of your website, and the header has a background color, you’re most likely going to want your color to lay transparently on top of it. A .png is the way to go in that instance.
  • .eps – stands for “Encapsulated PostScript” – one of the less common graphic file types, an .eps file is exported from a design program called Illustrator. These are the “vector” images we discussed above. Great for sizing images up and down without stretching/shrinking the graphic’s proportions.
  • .gif – stands for “Graphics Interchange Format” – ideal for smaller graphics without a ton of detailed color differences because they are limited by a color palette of only 256 colors. However, they can be animated, which makes them very helpful for web icons and texting memes to your friends. Side note, no matter what the creator says I refuse to pronounce this as “jif.”
  • .svg – stands for “Scalable Vector Graphic” – is an XML-based vector image format that supports animation and interactivity, and since it’s vector, is responsive. Because it’s written in XML, SVGs can actually be created using text, rather than a traditional image editor, which allows them to be searched, indexed, scripted, and compressed. It can be used for so many things, that there’s an Ultimate Guide to SVG.

The Beginner’s Guide to Graphics a four-part series. Read on to learn more!

Search M+...