Making sense of image format
A quick breakdown of when and where to use different images formats
Why it matters
Anyone who works in digital media needs to have a working understanding of image formats. Because no matter the medium, images are everywhere. But the thing is that not all image formats are the same. When designing something you will have different graphical elements like photos, logos, and other design elements. All of these elements are images but different image formats would be best choice. With many different file types, it can be hard to know which one to use. Each type has its advantages and disadvantages, but what are they?
Lossy VS Lossless
Starting off we should talk about image compression. There are two major forms of compression. Lossy and Lossless.
Lossy refers to compression in which some of the data from the original file is lost to make the file smaller. Normally this loss isn’t very noticeable and results in smaller file sizes. Typically, lossy files are much smaller than lossless files, making them a good option for photos on the web.
Lossless compression is when the image is reduced without any quality loss. Usually, it’s done by removing unnecessary meta-data. You don’t lose any detail or quality but image size can be very large.
JPEG
JPEG (Joint Photographic Experts Group) was created in the ’90s and is the most commonly used image format. It’s the default format used in most digital cameras. It is a lossy image format which can allow file size to become very small.
Use when
You are dealing with photos on the web. JPEGS can be compressed to various quality which offers the most flexibility over file size and quality. While being great with photos JPEG is not an ideal format for design elements. This is because it doesn’t deal well with sharp lines and high contrasts. And doesn’t support transparency
PNG
PNG (Portable Network Graphics) was created in the ’90s to be an improved, version of the GIF format. PNG Uses a lossless form of compression. Because of multiple channels, PNG can display image transparency. PNG is great for design elements like text, logos, buttons, graphs, etc.
Use when
Dealing with any graphic that uses transparency. Or when you are dealing with various design elements. Thanks to PNGs’ high color depth, the format can easily handle high-resolution photos. However, because it is a lossless web format, file sizes tend to get very large. If you’re working with photos on the web, go with JPEG.
GIF
GIF (Graphics Interchange Network) was created in 1987. Gif uses a lossless form of compression and can support animation. Typically you see it used for animated graphics like banner ads, email images, and memes. The downside to GIF is that it can only have up to 256 colors. GIF uses dithering. Which is a process in which two similar colors are combined to limit the number of colors in an image.
Use when
Mostly these days you see gif used for animations. But GIF also supports transparency so it could work for certain simple graphics. You would just want to make sure it doesn’t use too many colors.
Conclusion
Learning more about image formats can help you improve your workflow and make you a better designer. My general guidelines are: Use JPEG when dealing with images, PNG when dealing with design elements, and GIF for certain animations.
Spencer Wright is a student in the Digital Media program at Utah Valley University in Orem, Utah. He is studying Web Design and Development with an emphasis in Interaction & Design. This article relates to Image Compression in the Digital Output for Interactive Media course and is representative of skills learned.
