Pixel Edge Blog
importance of images on your web site
How can pictures be important to my web site? They’re only images after all - right?
Wrong! An image can speak a thousand words and if not displayed properly can give your organisation a bad impression from the outset. This in turn can lead to loss of sales. If your web site is presented in a sloppy manner why should potential customers consider purchasing products or services from you? In their mind if your site looks "cheap", the product or service you’re offering may also be below par too and we don’t want that, do we?
You may have visited a web site recently that had grainy or out of shape pictures. Maybe the images we disproportioned or took a long tim to download. These are the most common issues that web sites suffer from and in this article we aim to give you a few tips on how to overcome these shortfalls.
Know your formats, sizes and how to save them!
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tempus euismod urna. Vestibulum nec est. Suspendisse dapibus ligula elementum arcu. Donec accumsan eros nec lectus porta egestas. Aliquam tortor. Mauris quis ante.
JPEGs
You have probably come across JPG’s at some point in time. Whether taking pictures on your mobile phone, receiving them in emails or even creating them yourself. These type of image are the most commonly used in the world today.
JPG’s (pronounced JAY-peg) or Joint Photographic Expert Group images are excellent for use on web sites as they can be saved using different quality or "compression" settings. Compression settings dictate the file size and not the physical dimensions of the image.
A 6" x 4" photograph you make take on your digital camera, for example, would typically give you a file size of between 1.5 and 5 megabytes – depending on how good the quality of your camera is. Web site image file sizes, however, need to be much, much smaller. This is to allow your visitor’s browser to download them quickly. EKM Systems designers recommend an absolute maximum file size of 75Kb for large glossy images - used for promoting products - and that don’t form part of a web site structure. Images that are used within a site structure (such as logos or banners etc) - should be no larger than 40kb as these are the most frequently downloaded.
You’re asking yourself – “Everyone is on broadband these days, it doesn't’t matter about image sizes!” Well, if you really feel that way, here’s a little exercise for you the next time you visit your web site. Count how long its takes for one of your web pages to fully load – until it says “done” at the bottom left of your browser's window. If your page takes longer than twenty seconds then statistically your visitor left the site and went to your competitor’s 7 seconds ago! That is because most people are too busy to wait for web pages to download. That is the brutal truth!
Back to JPGs. If you do the math you’ll notice we have discussed images being resized or “compressed” from print resolution, around 1.5mb - 5mb, to only 75Kb. This is only 2%-3% of the original file size. Surely that means the quality is going to be rubbish, right? Not necessarily - by using widely applications to resize and optimise your images you can get amazing results!
Ekm Systems uses several applications in-house for manipulating images including:- Adobe Photoshop, Illustrator, Fireworks and others. There are freeware applications available to download also such as PIXresizer, Photo Resizer, Picture Resizer and many others. Simply do a search on the web for "image resizing applications" and you'll find plenty out there.
For all you technical minded out there - we know what you’re going to ask next. How do these applications do it? Well, in short, they remove unused colours that would normally get saved with a file.
To put it even simpler; imagine you have an image of a target (see example right). All the target consists of is red, blue and white. Now you would think that this image only has three colours but in fact it doesn't. Normally, at 100% quality, this JPG would be saved with multiple shades of reds, blues and whites (greys). These shades help create clarity and to smooth out the image. Some of these extra colours may not be needed at all so why save them if the image doesn’t actually require them? This is how JPGs can be optimised into smaller file sizes. On clicking “Save”, depending on the quality level selected, unused colours are disregarded (sucked out) from the pallet.
Check out our examples to the right. These are images saved in different “quality” modes. The best quality setting being at the top and least at the bottom. If you look really carefully you can see that the image saved at 50% compression is more or less unchanged in quality but its file size is less than 1/2 of that saved at 100%. While the 5% quality image has started to degrade and become "lossy". What has happened here is that colours have been removed to such an extent that the colours that would normally be included have been removed making the picture "blocky" or "lossy" - the quality as suffered badly. We also include an example of what this effect looks like on photographs where there are several hudred colours in the palette.. Notice how drastically the file size and quality is reduced? Would you buy something from a web site if its image looked like that? Probably not.
GIFs
The Graphics Interchange Format (GIF) is a bitmap image format that was introduced by CompuServe in 1987. Limted strictly to 256 colours, this format is favoured by designers for building web sites. Why? Because not only can this file be saved in miniscule file sizes, because of the limited palette, but also because this type of image is able to handle transparency. Furthermore, GIFs can be used to create basic (really basic) animation effects by incorporating a timeline sequence alongside the palette.
Animated GIFs are relatively easy to create and you don't need expensive applications to make them. Animated GIFs are not good at displaying pictures with lots of colours as the file size cannot be optimised properly without losing substantial quality. These kinds of images are best suited to simple banner advertisements or "call to actions" such as add to cart or category menu buttons. One common problem is for amature webmasters to overdo the use of these images which tend to cheapen the look of a site.
Lastly,GIF animation effects are becoming out-moded in favour of Flash (Actionscript) which is more professional in appearance and something we'll discuss in-depth later.
PNGs
PNG or Portable Network Graphics is a format originally conceived around 1995 to replace GIF images. Primarily designed to provide lossless compression, the image quality of PNGs is far superiour to GIFs. PNG's can be saved in 8 and 24 Bit formats and have a lossless quality, Yes, they support transparency to but not animations. Lastly, PNGs have some limitation for use on the internet as some older browsers such as Internet Explorer 6 do not support a transparency method employed by PNG's called Alpha Transparency.
Web designers favour using PNG's for applications such as logos and large header images that need to include shadow effects and float on layers above objects positioned on a web page.
Image sizing and how it is SO important
One of the most common mistakes people make when using images on a web site is to place any old picture on a page and then resize it in completely the wrong manner. They end up with squashed, oversized or pixelated images that quite frankly would be better not shown at all.
If you check out the examples below you can see our first image (a GIF) looking wonderfully crisp, sharp and in proportion (1). In the second (2) you can see that we have resized the image by reducing its width by 25% (not the height). By making this minute change it has changed the picture for the worst. Its is now disproportioned, grainy, blurred and quite frankly, wrong.
The correct manner in which to resize an image is to...
1. Make sure the image format you are using is correct one for the job. Not all types of image can be resized properly without loss of quality. In our first example (1) we used a GIF, which do not like being resized. This, as we discussed earlier, is because GIFs have a limited palette of 256 colours and resizing them only make things worse.
2. When resizing your images, resize (scale) them proportionally. That is, the width and height must both be altered to keep your image's shape (3). Our image's colour quality is still relatively poor but at least its proportions are correct. However, the best way is to make an image the correct size in the first place and save it in the correct format.
3. If you really must resize your images, use a format that doesn't mind being re-scaled. Use one that has lots of colours in its palette and is known to scale well. See example (4) blow. This is our image saved as a JPG this time. It is exactly the same image as example (1) but notice immediately that the image is brighter?. Now, we'll resize this in the same way as examples above. Notice how much better this format displays? The same would happen for PNG and BMP formatted files also. Its all down to the number of colours in the image's palette and the way the image has been is scaled.
In summary...
The main points to remember when creating or saving images for use on your web site are these:
1. Use the right image for the job. JPG images are great for resizing but can have large file sizes. Play with compression settings to get the best image quality. GIF images are best suited to applications that only need a few colours. For example, backgrounds, corners to table or divisions in html or general decoration of a web site. Animated GIFs are great for buttons and banner advertisements.
2. If you know the size of your web page try and save your images so they fit inside the page without having to resize them after putting them on the page - E.G. Using post HTML width and height settings. Why resize a massive image on your web page when you can create an image the correct size? By doing this you will have sharp, crystal clear images with smaller file sizes that will download quicker. Happy visitors to your web site will convert to sales! Trust us; we know what we're talking about.
3. IMPORTANT: Be careful when using third party images you find on the internet for use on your web site. There are quite literally trillions of images on "freeware" and search engines sites. Many sites do not advertise the fact that the imagery they display (or republish) is in fact the property of someone else. Be wary when using images from these sources.
4. If you know the size of your web page try and save your images so they fit inside the page without having to resize them after putting them on the page - E.G. Using post HTML width and height settings. Why resize a massive image on your web page when you can create an image the correct size? By doing this you will have sharp, crystal clear images with smaller file sizes that will download quicker. Happy visitors to your web site will convert to sales! Trust us; we know what we're talking about.
At Ekm Systems we hear stories from individuals receiving letters from solicitors, acting on behalf of "stock photography" web sites who claim copyright infringement on images that haven't even been downloaded from the organisations they purport to represent. These letters demand substantial sums of money for infringement damages and legal costs. Some claims are scams attempting to extort money from innocent victims while others have genuine and honest claims for intellectual property infringement.
So , please, make sure the image you want to use is either "Royalty Free" or you have obtained written permission from the person owns the rights to the image before publishing it on your web site. As a rule of thumb - if the image is "public domain" and can be confirmed as such then you cannot go far wrong. If you aren't sure, a paragraph in an email asking permission to use an image doesn't take two minutes, does it?
We hope this article has been useful and that you have fun creating your images. If you need any help please feel free to give our Support Department a call who will be happy to help in whatever way they can!