Web publishing and image files

As part of my course at Charles Sturt University, I have just learnt something simple yet amazing – which file format to use for images and when!

I had always wondered what the difference was between a PNG, JPG and GIF, and when I should use each of these file types. If you are making eLearning content, webpages or printing posters with images, then you should know the difference between these files types. To summarise what I have learnt:

GIF – these files are best for low resolution, simple images with lots of flat colour and no gradients (such as a logo or icon). This file type supports transparent backgrounds which is very useful, and it also supports animations (see below). They have a small file size and and ‘interlaced’ loading. It also is apparently pronounced ‘jif’.

JPG – this file type supports way more colours so is really good for photographs. However, there’s no support for transparency, and it has a ‘lossy’ nature (meaning as it is compressed and new versions are saved, each time a little bit of the file quality is lost, so edges become blurry etc so its not ideal for photo editing).

PNG – seems to be the best option most of the time, having the benefits of both JPG’s many colours for complex images, and GIFs transparency support. It is not ‘lossy’ so quality remains high. However, it is usually a larger file size so may load slowly, and some older browsers do not support PNG files.

Of course, this is just the tip of the iceberg. There are also file types such as TIFF, BMP and DNG.

Also note the importance of resolution and dpi (dots per inch). A rule of thumb seems to be that 72 dpi is fine for images viewed on a screen, and 300 dpi should be used for printing.

Thankfully there’s a lot written on the Internet about these topics so if you want to learn more, its just a Google Search away!

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s