Image File Type Choices

Why you should know your image file types and where to apply them.

Introduction

I conducted an image output study in order to determine the best uses for different image types; when and how to apply those image types to have the best quality for particular applications as well as make file sizes the smallest possible while not losing quality.

There are many image types out there. This article will briefly discuss GIF, PNG, and JPEG but will primarily focus on the evaluation and application of JPEG.

You will discover why choosing the right file type, output method, and compression are crucial in delivering the best products.

To read the complete Image Documentation click here.

Image Output

Here is a quick rundown of common image types and their properties.

These properties give us insight into what each file type can do. To simplify, here is a short history of GIF, JPEG, and PNG, the best applications and their limitations.

Ok great, but what does all of this mean?

Each image file type has a certain property to it which makes one better than the other in particular applications. Choosing a JPEG over a PNG or PNG instead of GIF depends on the application and is a crucial choice to make as you will see further on.

Image Evaluation and Application

So lets dive into a real life example: Websites.

So many people think that the image you upload to your website has to be the top notch, best, 100% quality. Initially, this seems reasonable, with implementation, not so much. I will demonstrate below how you can get the same for less.

The importance of image compression.

First, what is compression and why do we want to do it?

Have you ever been to a website where an image takes forever to appear or went to download something and the file size was so large, it took an age to download?

It’s annoying, right? Let’s avoid that.

Compression makes image sizes smaller which in a nutshell means less page loading and quicker downloads.

Let’s take JPEG and my face, for example. I’ve done compression on an image of myself to demonstrate how powerful compression can be. The image was taken with a Nikon DSLR camera. I compressed the original file and changed the quality output.

As you can see, the image doesn’t look that different in terms of perceptible quality from 30% to 100%. But what does change is the image file size. The original file size was 6.1 mb. The 30% image file size is 701 kb.

What does this mean?

At least for JPEG, it means you can get away with a lot of compression. It means that I can use the exact same image with no real noticeable change in perceptible quality and have a smaller image size; So it’s faster to upload, appears quicker on websites, and downloads faster, etc., which in the end saves time, money, and the reputation of your website. Less lag.

Now that you see the light, you can see that image file types are important and your choices do matter. If you’d like to see the full documentation, let me know by writing a private comment.

Camron Sackett is a student in the Digital Media program at Utah Valley University, Orem Utah, studying Interaction & Design. This article relates to Image Documentation in the DGM 2341 course and is representative of the skills learned.