Home Insights Using Images on your Website
16th October 2015 in Web Design

Using Images on your Website

Louise Towler

By Louise Towler

Using Images on your Website

If you’ve never used image editing software before, you’ll be in for a surprise when you come to save the files. Adobe Photoshop has over twenty formats to choose from, each with their own different quality options, and even Microsoft Paint has a handful, with no explanation of which does what. So what format do you need? Well, this depends on your goal with the image. If you want to display a photo in its full resolution, you should save the file in a different way to saving an image used as a repeating background. There are a variety of factors to consider: colour, sharpness and file size, just to name a few. Knowing which image file type is naturally suited to your goals will enable you to choose the most effective file type, and I’ve had a look at the pros and cons of the most commonly used file types below.

JPEG (also known as JPG)

The Joint Photographic Expert Group File Format is a very commonly used file type and one you may have heard of even if you know very little on the subject. JPEGs excel at getting the job done; the format supports sixteen million colours, is compatible with most operating systems and browsers, and only uses a small amount of data. This allows you to save images, such as photographs and paintings, in their full colour range, upload them quickly and then display on almost any device.

All of that probably sounds great, but there are downsides to JPEGs. The main one is that JPEGs discard data when compressing the image. This keeps the file size low, but at the cost of losing sharpness, colour range and quality. Generally, this loss isn’t noticeable to the human eye and can only be identified when zooming in, however it is much more obvious when contrasting pixels are next to each other. For example, a photo with a range of colours of fading shades will not have any obvious compression but illustrations, such as line art, will have noticeable distortion. You can avoid significant quality loss by saving the image in higher quality, but the file size will rise in turn, so the quality you choose depends on your goals.

Another downside of JPEGs is that they do not support transparency. If you’re creating a logo for your business, you’ll probably want to use this logo on a variety of sites. If you save the logo as a JPEG, then a background colour will be inserted automatically even if there isn’t one in your image editing program. Your logo will appear with a (usually) white box around it, which can look unprofessional.

GIF

The Graphics Interchange Format (pronounced jif, which doesn’t seem that strange when you think about the word “giraffe”) is the oldest image format on the web, introduced back in 1987. The file format hasn’t been changed since then, which makes you think that it must be a bit outdated by now – and it is. With support for only 256 colours, you will lose a lot of quality when you save an image as a GIF – certainly not a format you want to be saving your wedding photos in.

So what are the positives of GIFs then? First of all, the low colour support GIFs have work in their favour when it comes to file size, resulting in a much lower size than many other file types. And, unlike a JPEG, GIFs support transparency, meaning your image can display on any background without a white box around it. These two factors make it highly compatible with the web, but GIFs are more commonly selected for their trademark feature: animation. However, animation is more commonly used to share video clips as images, rather than having an animated site.

PNG

The Portable Network Graphics image format is the final image file we will look at and it covers bases that the other two do not. Originally designed as an update to the GIF format, PNG offers better colour range and transparency. As PNG files support more colours, the fade from colour to transparent is smoother than a GIF thanks to the depth of colour shades. And even with a higher amount of colours, PNG typically achieves greater compression than GIFs, resulting in smaller file sizes. However, on small images, GIFs may sometimes have a smaller file size. Unlike GIFs, PNG files do not support animation.

PNG also has advantages over the JPEG format, most noticeably when it comes to compression. As we discovered earlier, JPEG file compression results in a loss of data, which is known as lossy compression. PNG, on the other hand, uses lossless compression, meaning that the image will be just as sharp and colourful as the original. However, this results in a higher file size than a JPEG despite the two images looking the same to the human eye. Because of this, PNG should only be selected when it’s imperative that no quality is lost.

Which to Choose

Now you know the pros and cons of the file types above, it should be easy enough to select the correct one. However, before you commit to a certain file type, it would be a good idea to make a backup of the original image and then try saving it in different formats. You can then compare the images, looking at their picture quality and file size. This will allow you to actually see the difference between the file formats. You can also look up other file types, such as BMP and TIF, to see if they might be more suited to what you want to achieve.

Leave a Reply

Your email address will not be published. Required fields are marked *