Image Formats — Why Getting It Wrong Could Cost You Money

We often take images for granted, despite using them so extensively in everything from proposals, to our websites and marketing collateral. The days where companies were able to get away with mediocre looking websites are over, as people become more visually oriented. You may have noticed the popularity of visual websites such as Pinterest and the millions of photography websites that have flooded the internet over the past few years. The trend of beautiful photography and sleek looking websites is only going to increase, and for this reason we thought we would take a look at some of the basic principles of image formats for use both online and offline.

What makes a good image?

Effective use of images have a few core principles. They should:

• Be relevant
• Convey information
• Convey the mood
• Be instantly recognisable
• Complement the colour palette

Image formats

Not all images are made equal. You may have wondered about the different types of images and their differences. The most commonly used image formats on websites and in marketing collateral are:

• jpeg (or jpg)
• gif
• png

Images should always be saved in RGB (Red Green Blue) and not indexed colour. This is based on the principle that the majority of colours used in images and photography can be created by combining the base colours red, green and blue.

JPEG – Joint Photography Experts Group

JPEG are the ideal format to use when images contain many different colours. Images such as stock photos of people or scenery for example can contain hundreds or thousands of individual shades of colour, and incorrectly saving them in the incorrect format can mean losing much of the impact of the original photograph. JPEG (or JPG) files tend to be larger in size than GIF or PNG images, and should be used sparingly for effect.

One often overlooked fact is that jpeg images are ‘lossy’ and suffer from what designers refer to as ‘jpeg rot’. This means that every time a jpeg file is saved, it loses some quality. Let’s say you take a jpeg photo and begin to remove red eye effects, perhaps cropping the photo and adjusting the brightness and contrast. Each time you make one of these changes, the overall quality of the image gets just a little worse.

For this reason, it is best to save an editable master file in your photo editor’s proprietary format, such as PSD files in Adobe Photoshop. When you’ve finished making your changes, THEN you can export them (or ‘Save for Web’) as a jpeg file.

GIF – Graphics Interchange Format

GIF files are ideal for flat colour photos. Common examples of these are vectors and company logos, which often only contain a few colours. These image types can benefit from transparency, which makes using them over solid colour backgrounds simple. GIFs are best suited for straight edged transparencies.

PNG – Portable Network Graphics

Much like GIF files, PNG images are again best suited for images containing few block colours. Unlike the GIF, they can be used when the edges of an image are rounded or diagonal, or when a semi-opaque transparency or a drop shadow are used.

Resolution – Print vs. Digital

When aiming for quality, the clarity of an image is measured differently depending on whether the media type is printed or digital.

Print media is measured in DPI (Dots Per Inch) and the best practice is to use a 300 dots per inch or higher to ensure the end result is true to the digital edition.

Digital media quality is measured in pixels. Images on your computer are measured in tiny dots called pixels, and screen resolutions refer to the number of pixels represented on it. Most computers allow you to change the resolution to a certain degree– changing your resolution from 640×480 pixels to 1024×768 for example will result in images that look much smaller given there are a much higher number of pixels per inch in the same amount of space.

Image compression

All image formats can benefit from compression techniques, and in the majority of cases there is an acceptable trade-off between quality and file size. Compression is particularly important for images stored on your website, as research has shown that a slow website will result in a higher bounce rate by customers as well as search engine optimisation penalties.

Because the major search engines base their ranking algorithms on factors they perceive to create a good user experience, it is often good practice to consider these and other factors you can remedy to improve the user experience of your website.

Most photo/image editing software will allow you to preview the effect compression will have on the quality of an image. It is important to remember that most website CMS platforms will have options to resize images within the GUI– as a rule of thumb, we strongly advise against this practice. Instead, use a quality image editing software such as Adobe Photoshop to scale images in pixels (the unit of measurement you will want to use for your website and marketing collateral) prior to inserting them in your media. This will ensure minimum loss of quality whilst ensuring your images load as quickly as they can.

A recent report from Strange Loop found that a one second delay on your website can cost you 7% of sales. Whether you are an eCommerce business or have a brochure site, this can have drastic repercussions on your bottom line. If the leads or sales generated by your website are worth $1,000 a month, that means $70 a month– or $840 a year– in lost revenue.

At Greenlight ITC, we often are asked to improve the speed of our clients’ websites. Sometimes the servers you are hosting your website on are sharing bandwidth with hundreds or thousands of other websites, and you need something more suitable to the amount of traffic you are receiving. Other times, your website may need to be optimised. In either case, we are always happy to provide a free assessment to improve the speed of your website, which we can implement for you or that you can fix up on your very own.

[social-bio]