WTF…ile Types?!

Raster vs. Vector

In the digital realm, there are two main types of two-dimensional images: raster images and vector images. Let’s start with rasters.

Raster images are made of tons of tiny dots called pixels (short for picture elements). They’re best suited for photographs or other high-detail imagery with lots of colors, textures, patterns, etc. Raster images have exact dimensions and cannot be stretched or scaled without causing distortion or quality loss. Occasionally, rasters are called “bitmaps” since a raster image is made of colored “bits” that are “mapped” to specific positions to render the image.

You can think of a raster image as if it’s a super detailed mosaic, or cross-stitch, built with ridiculously tiny tiles that are all precisely the same size. If you lean in really, really close to your computer or phone screen, you might be able to see the little tiny red, blue, and green dots that make up each pixel. Then again, with the really high pixel densities in new displays, you might not. I’m not gonna get into how they work, or how a bunch of red, green, and blue dots is able to playback Avengers movies. Just trust me that it’s that way.

Y’know what, here’s a picture instead:

Vector images are totally different. While they’re still displayed using pixels (like literally everything on your screen is), they’re constructed entirely differently. Vector files are basically a set of long mathematical instructions telling your computer how to “draw” the image. Kinda like when you had to plot quadratic equations in high school math class. The benefit of making images this way means that you can have perfectly crisp lines, infinite scalability, and typically a smaller file size than raster images. A vector image will maintain the same level of detail whether it’s scaled down to the size of an ant or blown up as big as the moon making them perfect for print purposes.

Raster Image Filetypes

JPEG (Or JPG)

JPEGs are the most common image file type around. Initially released on September 18, 1992, the name JPEG stands for Joint Photographic Experts Group, the group responsible for making the standard. You might be able to guess from the name that the most popular use of JPEGs is for photographs. JPEG uses adjustable levels of compression to help keep file sizes down. Usually, this is about a 10:1 compression ratio. On the upside, you can get super small files this way. On the downside, you can get ugly “artifacts” in the image, obscuring details. This is especially true when images have areas of contrasting solid colors and text. The more you re-save a JPEG, the worse it becomes. You’re very likely familiar with the format, as most digital cameras and phones primarily shoot photographs using JPEG. Unlike some other formats, JPEG only supports still images without transparency or animation.

When you should use JPEG:

• For photographs and other high-detail images with lots of varying colors.
• For web photos and images for the web and file size is a concern.
• For printing high-detail and high-resolution photos while maintaining a small file size.
• For still images that don’t need to be animated.
• For images that do not include a lot of text, sharp sections of contrasting color, or gradients.

PNG

The PNG format (pronounced like ping in ping-pong) was initially released on October 1, 1996. Frustrated with the fact that the GIF format (more on that later!) was patented, PNG was created to be a non-patented format to improve what GIF could do. The name PNG is actually a recursive acronym that means PING is Not GIF. Don’t ask me where that I in PING went. It’s a mystery lost to time. PNG can allow for images with large dimensions to have smaller file sizes than GIF, but typically not as low as JPEG. A significant benefit of PNG over JPEG is that PNG provides transparency so the background color of a document/webpage/slideshow can show through. There are two common types of encoding used for PNG: PNG-8 and PNG-24. The main difference is that PNG-8 has a limit of 256 colors, while PNG-24 can display 16 million and can include transparency. Another big difference between JPEG and PNG is that PNGs are a lossless format. You can open a PNG, edit it, save a new copy, and repeat that process infinitely without any introducing artifacts or quality loss.

The image below demonstrates how transparency in PNGs works. On the right side of the image, there’s a brick wall, but the left side of the image is transparent and shows the background of this article page. In particular, notice the shadows from the plants on the left-hand side.

 

When you should use PNG:

• When you require transparency.
• For images with smooth gradients, sharp lines, crisp text, and solid contrasting colors.
• When you need to display a photograph, but the file size isn’t a concern.
• For logos and icons that require transparency and accurate colors.
• When you need to make multiple edits to an image without quality loss.

GIF

Introduced in 1987, GIF stands for Graphics Interchange Format. (Have you noticed how totally fun and exciting and creative these names have been so far?) GIFs use a type of lossless compression to reduce file size without sacrificing quality. However, GIFs can only display a maximum of 256 colors, so that image quality isn’t going to be all that incredible anyway. Unlike the previous formats we’ve looked at, GIF supports animation! You’ve seen them around. Everyone and their mom have a favorite cat GIF these days. While nowadays GIF is used mostly to share funny animations or clips, it’s still a useful format for keeping the file size of web graphics down.
Before you ask, no, we’re not going to get involved in the debate about how to pronounce GIFs. Everyone knows it’s a hard G.

We really like this GIF of Dennis, head of sales, and Treena, Chief Experience Officer, partying hard at DrupalCon.

When you should use GIF:

• For animations.
• For small, transparent, low-color images like icons, buttons, or basic logos.
• When you need to keep file sizes small.
• When image quality is less critical than reduced file size.
• For sending funny cats to your friends.

PSD

Developed as the default file format for Adobe Photoshop files, PSD launched alongside the first version of Photoshop in 1990. While PSD files can’t be displayed in most browsers or desktop software, without them, digital graphics would be complicated. PSD allows for your image file to include features like layers, masks, transparency, spot color, duotones, editable text, clipping paths, and much more. That being said, if you aren’t using Photoshop regularly, you might not come across this file type out in the wild. I’m not going to lay out when and when not to use PSD, as their only real use is for creating editable graphics files that can be worked on again and again. Aside from actually opening and working on a PSD in Photoshop, there’s not a whole lot you can do with them.

When you should use PSD:

• When you’re working on original design files.
• Occasionally a printer, sign shop, or other vendors will request a PSD version of the file you want to print.

Vector Image Filetypes

SVG

With an initial release date of September 4, 2001, this makes SVG the newest file type in this list! The acronym SVG stands for Scalable Vector Graphics, which is like, sort of the whole point of vector graphics. As the name suggests, SVG is a scalable format (just like all other vector formats). This means that you can use a single image file but display it differently on different screens (think mobile vs. desktop), making it perfect for responsive sites. Supported by all modern web browsers, SVG has seen a rapid increase in usage in the past several years. While they’re not used all too often, SVG supports both animation and interactivity. While they’re radically different formats, SVG and PNG are frequently used in similar scenarios. In terms of file size, an SVG will typically be smaller than an identical PNG.

When you should use SVG:

• For icons, logos, or other relatively simple graphics you’re displaying on the web.
• When you need an image to be responsive and scale based on the size of the user’s display without any quality loss whatsoever.

EPS

The EPS format was developed by Adobe in the late 1980s. Their team was looking to create a way of combining vector graphics, illustrations, text, as well as rasters (or bitmaps). The acronym EPS stands for Encapsulated PostScript, and it was developed as an extension of sorts to PostScript, another Adobe format. When EPS was released, PostScript was being used extensively in printers, so it was a natural move to improve upon what was already becoming a standard. Later yet, the EPS would become the basis of another Adobe format, the .AI format. However, as EPS is an older format, vulnerabilities have been found. For instance, in recent years Microsoft has stopped supporting EPS embedding in their Office suite of programs, as malicious scripts could possibly be embedded straight within the EPS file.

When you should use EPS:

• Some print shops, sign shops, etc. may ask for an EPS version of your artwork as the final print-ready file.
• If you’re working in Adobe Illustrator, EPS can be used to share editable vector art files with people who use different vector graphics software.

PDF

On June 15, 1993, Adobe released the Portable Document Format or PDF. PDFs are more complicated than the previous formats, as they can contain raster and vector images, text, and embedded fonts, and can remain editable after saving. This makes it extremely useful in the worlds of print and document design. While PDF files are typically used for text-heavy documents, you may encounter PDFs that are used as primarily working design files. One great feature of the PDF (depending on which program you’re using to view/edit them) is the ability to add digital signatures to the file. This makes them fantastic for sending business or legal documents over the net.

When you should use PDF:

• For downloadable documents like whitepapers, information ebooks/booklets, and the like.
• When you have official documents that need to be signed.
• When you’re sending final versions of files to a printer, sign shop, or some other sort of vendor.

 That’s All, Folks!

Well, not all, but the basics, at least. There’s an abundance of other image formats out there, but now you’re an expert with the ones you’re most likely to see in your day-to-day.

If this all still seems a bit confusing, don’t worry. That’s normal.

That’s where we come in.

At Cheeky Monkey Media, our design and marketing monkeys have the knowledge and experience so that this sort of thing is second nature to them. We worry about the tiny nitty-gritty details of your design, marketing, or web project so that you can focus on the bigger picture of your business.

We want to chat.

Since you’re reading this article, we already know that you’re a pretty rad person. Did we mention that we really like working with rad people? Get in touch with us today on our website, follow us on Twitter, like us on Facebook, and check out our latest posts on Instagram.