There are as many different image formats as galaxies in the sky. “But Natascha”, I hear you say. “An image is an image, right? So why do I need to bother with all those different image formats?” Well Damsel, I have good news and bad news for you.
The bad news is, that if you want to take your design work seriously, you need to get down to the nitty gritty and learn the basics for image formats.
The good news is that I am here to explain the no-fluff, down to earth basics to you. So without further endue I introduce you to your new friends: Image Formats!
GIF – The grandmother
The GIF or Graphics Interchange Format is, so to speak, the grandmother of all image formats used in the internet. It can only display a color range of 256 colors (because back then, computers where only able to show 256 colors, while recent devises are available to display millions of colors) and supports animations. Maybe you remember those cheesy and horrible self-opening mail envelopes from the 90ies used as email buttons? Yes, you got it, these were GIFS at their peak time. Fortunately, these times are long gone by.
Due to licensing issues, other image formats were developed later on that gradually replaced the GIF. But it’s still widely popular for creating little animations or memes throughout the web.
Fun fact: According to the creator, you pronounce it “jif” with a soft g like in gin. Probably he needed to drink a lot of gin during the development process, although he himself says that it refers to a brand of peanut butter.
When to use a GIF: Unless you want to make a funny animated graphic, you really don’t need a gif, rather use JPEG or PNG.
JEPG / JPG: The most common
The abbreviation for the file extension goes back to 1992 and the Joint Photographic Experts Group, who introduced the format in 1992. The term describes a method for digital image compression used with digital photographs.
Using JPEG as your image format works best with digital photos or paintings of realistic scenes, where smooth variations of colors and textures occur. It’s widely used throughout the web, because you can control the file size and create small files. But be careful not to compress your image too much, otherwise you might get jagged edges and artifacts on it.
When to use a JPEG: JPEG works best for digital photographs and images without sharp contrasts and smooth transitions between the pixels. But be careful not to compress too much, it may cause visible artifacts.
PNG: Making things transparent
PNG stands for portable network graphics. It’s the successor of the GIF and the most used lossless image compression format on the internet, opposed to JPEG, were image compression always occurs with a quality loss. PNGs support the Alpha Channel of images. This means they can display transparencies. They are not suitable as file format for printing, as they don’t support the CMYK color mode.
When to use a PNG: Do you want your image to show as a circle, a star or any other non-rectangular shape? Then PNG is your friend. It’s also great for images with sharp transitions, line art (as in logos), watermarks and large areas of solid colors, as compression with JPEG can lead to visible artifacts around sharp edges.
TIFF: Your friend for print
Developed by Aldus (which in 1994 merged with Adobe) in 1986, the Tagged Image File Format is widely used in the graphic, photography and publishing industry. It’s a popular format for images with a high color-depth, alongside JPEG & PNG. Since it stores a lot of image data and is able to support CMYK, it is the perfect format for printing, but it also gets huge in file size – we are talking about several MB here.
When to use a TIFF: Use it as your format of choice for printing, but don’t forget to switch the color mode to CMYK before creating your image for print. I also recommend that you always ge a proof before printing if possible.
Honorable Mentions: Other Image Formats
BMP: Windows Bitmap
Even more ancient than the GIF, the BMP was the first graphic format developed for Windows specifically and has been around since 1990. Although it’s very robust and very stable, BMPs tend to be large in file size and therefore aren’t very convenient for using it on the internet.
RAW: Digitally Yours
This is a format digital cameras use to store all information in an image without compression. These files usually tend to be huge! If you do photo editing, you should always start with the RAW-file from your camera. But consider that not all digital cameras, especially older or cheaper models, support RAW. They save the image as JPEG instead.
PSD: The Photoshop Document
PSD is a native Photoshop format which uses layers. You can use it for archiving and storing images and also to keep source files editable on different layers even after the file has been saved. Never use this format to upload something to the web (most uploaders won’t let you use it, anyways). Instead, you can export files from a PSD into all above mentioned image formats.
EPS / AI: Vectors, Baby!
EPS & AI are vector based image formats (opposed to the above formats, which are so called rasterized or pixel based images). So what’s the difference, you may ask? Vector images are consisting of paths. The software recalculate these paths whenever you scale or resize the image. So you can scale the image from postcard to poster format without loss of quality.
You should never scale down pixel based or rasterized images, because they contain a fixed number of pixels. So if you enlarge a rasterized image, it’ll stretch these pixels and results in a blurry image.
This list is not complete for sure, but it gives you enough knowledge to confidently design your own images with the right format.
I hope you learned something useful today – let me know in the comments!
With love, sparkles & pixiedust
Your Digital Fairy Godmother