|
When it comes to images and graphics on your website, balancing download times, quality and implementation isn't that hard really. Here is a quick run down of graphic formats and methods.
One of the more major concerns with website development will always be download times, and nothing usually takes up more bandwidth than images (audio and video are a concern too, but the buffering process usually take the edge off these issues). No, it's the image that is the bane of many frustrated developers and many persistent clients. However, there are some very simple ways round these issues if you have a good understanding of formats and the ways in which these formats can be further optimised. Here I'll quickly go over some of the features of certain formats and more importantly, I will show some examples of when particular techniques and formats should be employed.
It's important to realise that no one format is better than another, each have their strengths and weaknesses. There are of course three common formats, the still going strong GIF, the ever present and highly regarded JPEG and the not so known yet very capable PNG. It is knowing when to apply a format to a particular element, that you'll see download times improve and quality sustained. The JPEG
JPEGs are truly the predominant web image format, allowing a full 24 bit colour range of 16.7 million colours and a compression process perfect for complex images and photographs, however it's this format that tends to provide the most problems when it comes to bandwidth and quality - typically though, these problems are all down to poor image sourcing and non use of optimisation techniques. Most high end graphics packages come bundled with web exporting software and it's important to make use of this, especially where JPEGs are concerned. Simply saving a JPEG file at, let's say 60% quality will give you a fairly good image but the file size is still too large for the web. With web optimisation software, that size can be halved again and will usually produce better results.
Let's take a look... 
Image saved out at 60% quality
Size: 42.8K
Image saved out at 60% quality optimised
Size: 18.4K
If we look closely, we can see that the optimised version also has fewer artifacts - for those new to this subject, artifacts are the errors caused when the image is compressed.
Look closer... 
60% image quality - zoomed in
60% image quality optimised - zoomed in
Optimisation software has to be among the tools of a web developer, for without it quality will always be sacrificed for file size, and in today's web climate, presentation and style is everything.
The GIF
Okay, let's clear something up, Compuserve, the developers of this format pronounce it with a soft G, as in 'George' but a hard G as in 'Guitar' is just as acceptable according to the Oxford English Dictionary and the American Heritage Dictionary. So don't let anyone correct you.
GIFs are essentially the pre-dominant method for displaying icons, thumbnails and the more basic web graphics. They are a lossless format, meaning that they do not de-grade when edited and saved out again. Part of the reason why they do not degrade is due to their strict palette range of only 256 colours, this means that the image cannot be resampled, meaning the colours that are present in the original are presented exactly in the new edited version. Now there isn't much to be said about GIFs further benefits other than its support for animation and 1 bit alpha channel (a single layer of transparency). Although, the alpha channel still does come in useful at times, the animation feature has all but disappeared from serious web development. It still finds a use in forums with animated avatars and in short fun animations, but its serious implementation has become something best left in the past. The PNG
As far as I'm concerned this is a really underused format. Its potential and diversity has taken sometime to be embraced but it's quickly gaining ground as a popular web graphic format. It combines the lossless compression of a GIF and the 24 bit colour range of the JPEG. Add to this an 8 bit alpha channel, that's 256 layers of transparency, opposed to the 1 layer that a GIF has and it sounds like the ideal format - and for some jobs it is.
In terms of large web images such as photographs it really is no good, this is because of its compression method, a method called deflate, which essentially works by assigning values and repeating them based upon the value of the pixel. This method is combined with a prediction method where for each horizontal line, the encoder filter predicts the colour of each pixel based upon the values of previous pixels. It all gets rather complicated but suffice to say it's this method that gives the PNG its edge as a portable lossless format. It comes then as no surprise that PNG stands for Portable Network Graphic. It is also a perfect archive format too, ideal for when you need to provide your high resolution company logo or 100% quality images to someone across the internet.
Floating graphical elements on a website which require a seamless transition to the content beneath can be done flawlessly with this format.
Here is an example... 
A logo with a nice glow effect around it.
The same logo on black.
The same logo but over a web background.
So, as you can see the PNG has its uses and it's worth mentioning that the PNG logo with it's gradual transparency clocks in at just 40K. Not too bad for one logo that can be positioned anywhere on the web page. It is very important of course to mention that for transparent PNGs to be displayed correctly in IE6, certain extensions must be loaded. A topic for another time. Under all the latest versions of the major browsers though, transparent PNGs display correctly.
As it's lossless format, it's also ideal for representing graphics that require scrutiny, like the zoomed JPEG images previously. The PNG preserves the image perfectly without adding further compression artifacts.
Take a look at these examples of images saved out in various formats. JPEG quality is 60% in all instances.
GIF arclid spotlight
Size: 54.3K
JPEG arclid spotlight
Size: 42.8K
JPEG arclid spotlight (optimised)
SIze 18.4K
PNG arclid spotlight
SIze: 134K
As has been shown already, an optimised JPEG is best for images that are quite large and require a wide palette range.
GIF button
SIze: 863 bytes
JPEG button
Size: 25K
JPEG button optimised
Size: 1.97K
PNG button
Size: 4.05K
The GIF is perfect for web buttons and smaller, simpler graphics. The GIF has no artifacts and is less than half the file size of the optimised JPEG.
GIF block colour example
Size: 4.54K
JPEG block colour example
Size: 29.7K
JPEG block colour example - optimised
Size: 6.18K
PNG block colour example
Size: 8.14K
As can be seen from this graphic, the file sizes are relatively close - well, all apart from the non optimised JPEG. Look at the massive file size difference between the normal JPEG and the optimised one.
GIF noise
Size: 1.25K
JPEG noise
Size: 61K
JPEG noise - optimised
Size: 17.4K
PNG noise
Size: 5.69K
A noise example creates a similar file size range to that of the block colour graphic.
So as can be observed, the representation of simple graphics through the three formats doesn't differ that much really, but a few kilobytes extra over several graphical elements soon adds up. A 10K difference over 10 elements adds up to 100K of course, and okay it may hardly be noticeable on some people's PCs but as many of us know, broadband speeds don't always deliver a fantastic rate all the time, so it's important to squeeze every last drop of speed out of a website. A user who has to wait, will only wait so long before hitting the Back button and continuing down the list of Search Engine results. For a major business, getting your images down to a small size can save a lot of money. Take a company like Amazon requiring hundreds of thousands of images, being accessed by hundreds of thousands of shoppers, that's a lot of downloads, and so suddenly those saved kilobytes can add up to gigabytes of saved monthly bandwidth usage.
It's also worth mentioning that when creating graphics for a website, any sourced images should be of the highest quality. This is one of my golden rules. Let's say we're creating a graphic to display the methods in which a customer can pay for goods, for this we'll need credit card logos. Lazy developers will source these from other sites and stick them in their own creations, these images already contain artifacts and errors and any further manipulation of the image only accentuates these errors. The trick is to get hold of the highest resolution or highest quality images you can. Doing something similar for a website recently, I sourced the highest resolution images I could find of credit cards, these could then be scaled down, stylised and exported to blend seamlessly into the client's site. It's doing things like this that result in crisp, defined graphics on your website. Now, this is a slightly different area of implementing graphics and rather than go on about it here, I think I'll save this topic for another day. Last update : 26-10-2007 12:17
|
|
|
(0 vote)