Image file types- which should you use?

Choosing which image file type to use can be tricky…

Here’s Scott Sanders’s in-depth explanation of image file extensions and how they can benefit your small business.

Many creative artists would love to be able to take advantage of the ease with which computers and the internet can increase one’s exposure. Images are such an integral part of the internet these days– just type any word into Google images to see how many pictures are posted!

But many artists are still confused about what image file type to use. In today’s fast-paced computer world, using the wrong file type can often discourage people from viewing your art.

 Did you know the average time people spend on a website is between 60 and 160 seconds

So getting your images to look picture-perfect and be able to download quickly is paramount.

We’ll look at the common image file types and see which ones are best for your situation.

But first, why are there different types anyway? Basically, computers have to convert images to numbers so they can store and transfer them.

We really have to worry about only three things though:

• How many dots each image contains
• How big each dot is
• What colour each dot is

In computer jargon this is called the resolution, for example:

•  1280 x 1024 pixels:   How many dots*
• 72dp:  How big is each dot
• 32bit colour: how many colours can I have

* dots are called pixels in computer jargon

So if there are more dots and more colours then our picture looks better – that is, closer to reality. But then we have more numbers for the computer to store, which takes longer for our webpage to load!

How can we find a balance between images looking good and images loading quickly?

The various file type extensions are all there to solve this problem. Some do it by only using as many colours as are needed, some do it by finding patterns and reducing the amount of numbers, and some do it by making the number of dots as small as possible.

So what type should I use? It really depends on what you want to do with the images…

Artwork on my website:

Web photos only need smaller dots to look reasonable on the screen. They also only need to be as big as a computer screen. Unfortunately, people don’t all have the same size screens so we need to guess an average for most people. At the moment (Jan 2012) many non-computer artists will probably have screens at least 1280 x 1024 pixels (70% according to Google Analytics) so this is a good size to fit on most screens.

We don’t need to worry about the number of colours as computers have been able to display millions of colours for quite a few years now.

 In short, good photos for the web need a resolution of 1280 x 1024 pixels, 72dpi, 32bit colour.

But what file type? Jpg will give the best balance between image quality and file size as it compresses the information. You can select the quality of the image in your favourite image processing software.

Depending on the image, quality somewhere between 40 and 80 px will usually be fine for web images.

 Using logos or cartoons on my website:

Whilst there are arguments about the best file type for incidental web graphics, in reality, you can choose between Jpg, Gif and Png for most purposes. Most graphics such as a banner or icon will be small enough to load quickly. There are two main factors where you will need to choose the image file type – transparency and animation.

Transparent Images:

Transparency is really useful for web graphics – basically, it means that you can have parts of your image set to be transparent and let the background come through. You can’t use Jpg for this – with jogs the background is always a solid colour. Using a jpg file image type transparent ends up being white!

GIF is acceptable for transparent graphics- it used to be the industry standard. However, GIF only allows you to use 256 colours at any time and doesn’t allow opacity, or degrees of transparency.

PNG (specifically, Png-24) allows millions of colours and opacity, so would be the best choice for transparency. But it isn’t a perfect world and unfortunately, Microsoft Internet Explorer still doesn’t quite display them correctly…

So really it’s a toss-up between lesser-quality images that work everywhere (GIF), or higher-quality images that work nearly everywhere (PNG).

Animation is really beyond the scope of this article, but it is possible to make a GIF or PNG animation – most newer image processing software will allow you to do this.

Image file types For Artists:

I would recommend the PNG file type for incidental web graphics as artists are more likely to use non-Microsoft products.

 Your Images for Printing

Your print shop will usually have a preferred format, so make sure you ask them first. But as a guide, here are some print resolutions recommended by various printers:

Trouble magazine is a free monthly art magazine. They require Tiff files of 1180 x 1770 300dpi (which is about 10 x 15cm, the size of the magazine)

Red Bubble is an online art sales website that specialises in printing all sorts of products: T-shirts, iPhone covers, calendars etc as well as framed prints.

Here is a small example of the minimum resolution requirements for many printing jobs:

Prints

Laminated, Mounted and Framed Prints and Stretched Canvas:

Posters:

Quality is much more important than file size for printing – if the file is too big to email, contact your printer for instructions on sending over large files over the internet or take it in on a portable memory stick.

At We Push Buttons we use both DropBox and YouSend for our larger printing jobs…

Image File Type Conclusion

Artists really need to find a balance in making their work look as good as possible, and making their work accessible on the internet. Using the right image file type and size can be the difference between someone staying on your website or leaving impatiently.

 The Wrap-Up:

JPG: for your photographs and complex images

GIF: logos and simple images

PNG: for more complex graphics

Artwork on the Web: Jpg – 1280 x 1024 pixels – 72dpi – quality around 40 – 80kB

Small Web Graphics: Png – however big the image is – 72dpi

For Printing: As high quality as you can muster but please contact your printer for their requirements