[3D Rendering Tutorial]
Understanding and making the most of GIFs and JPEGsThis tutorial was developed with Photoshop 5 and Fireworks 1. Photoshop's web handling has changed but the info here remains useful.
When Tim Berners-Lee invented HTML (hypertext mark-up language) and through it the WWW his emphasis was very much on text. What he was looking for was a way of delivering structured scientific information quickly and efficiently with its style of presentation of secondary importance. Ironically what made the Web take off was the development of the Mosaic browser with its support for inline bitmapped graphics. The advent of the humble <IMG> tag turned browsing into a visual experience and the Web has never looked back.
With the explosive development of the Web, the creation of web graphics has itself become a huge growth area and one that could even outstrip graphics for print. Incredibly, in spite of this, there has always been a tendency to dismiss the field as just a sideline of traditional bitmap creation. That attitude is finally changing and in this masterclass I'll show you both how to make the most of web graphics using traditional bitmap editors, and also how to take absolute control with a dedicated web graphics application.
The Importance of File Size
The one defining principle that separates web graphics from all other graphics is the importance of file size. Web images have to be downloaded before they are viewed and so keeping the byte count as small as possible is paramount. The golden rule is that the image must add more to the viewer's experience than the download time detracts from it. Of course this download time is something of a moving target as it depends on the bandwidth available. A user with a T1 connection could happily download a 100k image in half a second, for example, while with a 14.4k connection the same image would take a full minute.
Clearly a compromise has to be reached and if you don't want to lose the majority of potential viewers it makes sense to cater for the lower end of the spectrum. As the current average access speed is rapidly rising between 14.4 and 28.8k, this seems a sensible platform to work around. Assuming that the average user is going to get fidgety waiting for a download after about ten seconds this would mean a top limit on image size of around 18k at 14.4 and 35k at 28.8. As such a good rule of thumb is that - with the exception of the home page where users tend to be more patient - all the graphics on a page should amount to no more than 30k.
The immediate problem that this raises is that for ordinary bitmap formats, such as BMP and TIFF, 30k is absolutely tiny. The solution and foundation on which the whole field of web graphics is built is compression - maximizing the amount of information in the file while minimizing its size. In fact it's been found necessary to use two very different compression strategies to handle two very different types of bitmap image: those full-colour images made up of continuous tones, such as photographs, and those made up of flat areas of a limited number of solid colours, such as logos.
The file formats that have come to fill these two roles are JPEG (Joint Photographic Expert Group, pronounced "jay-peg") for the continuous tone photographic images and GIF (Graphics Interchange Format, pronounced with either a hard or soft "g") for the flat illustrative images. There is an alternative (see "New Kid On The Block" box-out) but, at its simplest, handling web graphics boils down to handling just these two formats. It might sound straightforward, but to make the most of each format you have to understand exactly how it works and the consequences that follow.
The easiest way to gain this understanding is to create typical images, save them as JPEG and GIF files, and explore the different options on offer. To do this I'll use Photoshop as its general dominance ensures that it is also the most commonly-used web image creator. However, as all other bitmap editors offer the same controls or better (see Competition boxout), everything we learn will be relevant whichever program you use.
THE BASICS: PHOTOSHOP
Creating a typical JPEG file is simplicity itself as any full colour RGB scan or digital camera image fits the bill. For the test I simply resized the image to a largish 300 x 400 pixel web image size which amounts to 350k of uncompressed data. To create the JPEG image it's then just a question of using Photoshop's Save As Copy command (shortcut Alt + Ctrl +S) and selecting the JPEG option from the drop-down list of file formats. The central feature of the resulting dialog is the sliding scale of compression ranging from 0 (low) to 10 (maximum). Saving copies of the test file at both extremes and then opening them shows what is happening behind the scenes.
The JPEG saved at maximum quality has a file size of 92k and looks indistinguishable from the original. The JPEG saved at low quality is a mere 10k but has severely deteriorated into a heavily pixelated and almost mosaic effect. From the low quality version it's clear that JPEG is a "lossy" compression scheme where detail and quality can be sacrificed to keep size down. From the high quality version it's clear that, until it is taken too far, the scheme is optimized to fool the eye into believing that nothing has happened.
In fact JPEG compression works by immediately throwing away a lot of the colour information in the image as the eye is far less sensitive to chroma, the hues in the image, than it is to luma, the brightness in the image. It then breaks up the resulting image into 8x8 pixel tiles and applies a Discrete Cosine Transformation (DCT) compression to each tile based on the quality setting. When the compression setting is too high the quantizing effect means that individual tiles become visible which produces the undesirable JPEG "artifacts".
With compression ratios ranging from 4 to 35 and quality ranging from near-perfect to useless it's clear that the trick with JPEG is to find the right trade-off between file size and quality. So what's the ideal setting? Unfortunately there's not a single answer as this depends on the image. For our test image the best results were with a setting of 6 where the odd artifact was appearing and the file size was 23k, a compression ratio of 15. A good working rule is to save with a setting of 7 and, if artifacts aren't distracting to raise the setting and, if they are, to lower it.
The compression setting is far and away the most important feature about JPEG compression, but Photoshop offers two other options. The Baseline Optimized format optimizes the color quality of the image while the Progressive option determines how the JPEG will appear in the browser. Effectively a progressive JPEG comes into focus from the poorest quality, maximum compression version with each pass adding more detail. Both options can shave the odd 1 or 2k from the file size, but there's a downside as not all browser versions can display the images. For the moment it's a moot point whether it's worth straying from the Baseline Standard option.
Creating a GIF file could hardly be more different. To begin with rather than simply scanning a photograph the illustrative image has to be originated from scratch. To create a typical test GIF, I created a similar 300 x 400 blank image with a solid green background. I then added some simple blue text which thanks to Photoshop 5's new type layers remains editable. I than wanted to add a triangular red flash effect behind the text but above the background. As Photoshop doesn't offer any shape handling beyond the basic rectangle and circle tools this is actually quite difficult and eventually involved adding a new layer, creating a path with the pen tool and applying a fill to that. For serious logo work I would soon have had to turn to importing files from a drawing program like Illustrator.
Theoretically I could then use Photoshop's Save As Copy command to save the image directly to GIF, but the options provided here are virtually useless as they give no feedback. Essentially GIF compression works by cutting down the 16 million potential colours in an RGB image to a palette of 256 or less. As such it immediately cuts the size of the file by a third from 24-bit to 8-bit. Moreover it then enables high levels of compression of the resulting areas of flat colour by enabling sequences of the same colour to be abbreviated so that, for example, a 100 green pixels in a row can be stored in just two bytes as Green(100). As such successful GIF handling is all about choosing the right palette and ensuring that the original colours are converted to this palette exactly as you want them to be.
To be able to do this it's essential that you can see what's happening and in Photoshop the only dialog that offers the necessary control with a live preview is the Image>Mode>Indexed command. As we don't want to lose our original RGB image it's first necessary to Save As a new file, which makes the fact that Photoshop insists on flattening all layers before changing to indexed mode slightly less irritating. Because we designed our image with only three colours it's not surprising to find that the preview of the indexed image with the default Exact palette option is identical. What is surprising is that the number of colours reported in the image is 139! This is because Photoshop automatically "anti-aliases" text, mixing the edge pixels of the text with the background colour to create a much smoother and more readable effect.
Even so 139 colours is still well within GIF's 256 limit and so saving our file as a GIF is lossless in terms of quality. Moreover thanks to GIF's compression scheme it produces a file of only 10k, a compression ratio of 35. For our simple test file, the GIF format has matched the best compression ratio that JPEG could offer and with no loss of quality. More interesting, however, is what happens with original images containing more than 256 colours. To test this I replaced the solid background in the original test file with two rainbow gradients, one horizontal and the other vertical, and went through the same procedure.
This time rather than an Exact palette, Photoshop creates an Adaptive palette based on the frequency with which each colour appears in the image. It then has to map those colours that it is discarding to the colours it is keeping. The default solution to this is to apply "dithering" which attempts to simulate missing colours by creating a pattern of available colours to fool the eye. Because the palette is adaptive our main colours for the text and triangular flash are unaffected, but the background gradient appears very different depending on which of the three main dithering options is selected. "None" simply maps each pixel to the nearest available colour which results in very noticeable bands. "Pattern" creates less obvious banding but with a clearly discernible halftone grid effect. Finally, "Diffusion" creates a much smoother though still clearly granulated effect.
In terms of appearance there's no question that the diffusion dithering is closest to our original image, but we also have to take file size into account. For the image with the vertical gradient the option with no dithering is 17k, but dithering pushes this up to 22k. Even worse, for the image with a horizontal gradient the sizes are 28k and 32k respectively. In fact this shouldn't really be surprising. Dithering works by deliberately mixing up pixels so that it inevitably breaks up the long sequences of a single colour which is how the GIF compression scheme works its magic. This also explains why the horizontal gradient is such a disaster as it virtually guarantees that every pixel in its line is different to its neighbour. The clear moral is to avoid GIF dithering and gradients if you can and as such I'm happy to return to the simpler three colour image.
By then saving the image with Photoshop's File>Export>GIF89a two other options become available that aren't when saving to the default 87a format. The first of these is the Interlace option which means that supporting browsers display non-consecutive lines of the image in four separate passes and so give an idea of the whole image far more quickly. The second is the ability to define background transparency. In Photoshop this can be done if you have created a mask in the Channels palette, but the most common way is simply to select colours from the image with the Colour picker. With my image, for example, I can simply click on a pixel in the green background and it will appear transparent in the browser.
This is potentially a big advance as it enables me to produce non-rectangular images which seem like an organic part of the web page. In practice, however, when I load the image into my page I'm in for a nasty surprise. Because of the way anti-aliasing works my text and triangle are surrounded by a disconcerting halo of semi-green pixels. The only workaround is to ensure that the background colour I use when creating the transparent GIFs is exactly the same as my web page background colour so that the halo effect is smoothing rather than distracting.
Viewing the image via a browser is quite likely to reveal another very serious problem. Many systems are only capable of viewing 256 colours at a time and these colours are fixed. If the colours in my GIF are different to these system colours the browser will try and emulate the original by - you guessed it - dithering. Worse this "browser dithering" is in addition to any "application dithering" I applied earlier and can also apply to my main three colours. The end result is that, while on my originating 24-bit monitor my GIF looks fine, on a viewer's 256-colour monitor it looks like it's been thrown up on a knitting machine!
Clearly the solution to this is to make sure that you stick to the system colours that all monitors can produce. In fact this is complicated by the fact that Mac and PC have slightly different system palettes, but there are 216 colours that both support. These 216 "web-safe" colours are available as a choice of palette when converting to Indexed mode. By choosing this option and then deciding whether to dither or not you can at least be sure that all users will be seeing the same colours. Or at least you could do if it wasn't for the difference in system gamma which means that exactly the same image will still look much lighter when viewed on a Mac!
Although the creation of GIFs boils down to just two decisions - choosing the right palette and determining how discarded colours should be handled - the way the image interacts with the format's compression scheme and how the image will ultimately be viewed make these choice far more complicated. So what's the best solution? For my test image the final option I went for was the Web palette with no dithering as the resulting shift in my main colours and the loss of anti-aliasing quality were both an acceptable price to pay for a file size of just 9k. For another image though the choice could have been very different.
As with JPEGs then, there's no single best solution but at least there is a clear spectrum at work. At one end, if precise colours and consistency with the original image are paramount, then an exact or adaptive palette will produce the best results when viewed on a 24-bit monitor. At the other, if known consistency across systems is more important, then the web palette is the safest option. In all cases, error diffusion dithering offers greater tonal range but at the cost of file size and distracting patterning.
A DEDICATED SOLUTION: FIREWORKS
Originating your Images
It's certainly possible to create and control all the main features of both JPEG and GIF images within a traditional bitmap environment like Photoshop, but the fact that it's possible doesn't mean that it's ideal. The obvious solution is to turn to a dedicated web graphics program and the market leader for this is Macromedia Fireworks.
What immediately puts Fireworks in a different league to the likes of Photoshop for the origination of GIF graphics is that it offers vector-based handling. As well as rectangle, line and circle tools, Fireworks offers polygons and stars and powerful text management complete with control over kerning and local formatting. More importantly, thanks to their vector nature, once such objects have been added to the drawing they can be repositioned, scaled, rotated and skewed instantly and with no loss of quality. Even better, Fireworks allows you to align, group and duplicate objects - a huge productivity gain. Using dedicated tools like these, creating a logo like our test GIF is simplicity itself.
As well as its drawing-style features, Fireworks offers true bitmap control. By double-clicking on an imported bitmap you enter Image Edit mode in which you can zoom in and edit right down to the individual pixel level. Even better you can instantly convert any object you've drawn into a masked bitmap with the Select>Convert to Image command so that it's possible to combine the best of both drawing and painting. Sadly, though this is the one area where Fireworks' power is disappointing with its global colour correction left to a bundle of semi-detached plug-ins and its retouching capabilities limited to basic cloning. Don't throw Photoshop away quite yet.
What makes Fireworks unique as a web graphics creator is its ability to combine both vector and pixel attributes simultaneously. To begin with all objects can be given photo-realistic bitmap fills using the Fill panel and these fills can be made transparent with the opacity toolbar and even set to blend and interact with underlying colours. Using the Brush panel you can then give any object or path an outline based on a whole range of pixel-based natural media effects such as watercolour or charcoal. Alternatively, by using the Brush tool, you can interactively paint onto the image with any of these effects and then retrospectively edit either the stroke itself or the brush effect!
Fireworks' Effects panel takes this combination of vector-based pixel processing and applies it directly to crucial web tasks by offering a range of drop shadows, bevels, glows and emboss effects. To create a realistic 3D button, for example, all you need to do is draw a rectangle and select the Inner Bevel option. The default effect is impressive enough but, if it's not quite what you want, there are a range of presets provided each with raised, highlighted, inset and inverted alternatives. For complete control you can customise the width, contrast, softness and angle of lighting yourself and then save the effect for future use.
Optimising your Images
After you've created your image it's ready to be saved as JPEG or GIF. The whole image can be saved using the Export command, but it's also possible to export sections such as individual buttons by dragging over an area with the Export Area tool. What makes the Fireworks optimization process so simple compared to working with Photoshop is the fact that the Export dialog is built around a preview area which shows exactly what your image will look like if it is exported with the current settings. Even better it gives feedback on file size and download times and allows you to view up to four versions for comparison before you finally hit the Export command.
Compared to Photoshop's trial and error approach, the live preview makes the optimization of JPEG images a no-brainer with the ability to see exactly at what point on the scale of compression the artifacts become unacceptable. The program also offers much finer control with a hundred possible settings rather than ten. In addition Fireworks offers eight levels of smoothing which all blur the image slightly but in the process cut down on both file size and the likelihood of artifacting.
The export preview is also invaluable for the optimization of GIFs, but there is one disappointment - unlike Adobe ImageReady, Fireworks doesn't offer a browser preview to show what the current GIF would look like on a 256-colour rather than 24-bit system. Instead Fireworks seeks to avoid the problem of browser-dithering entirely with its WebSnap Adaptive palette option. This converts colours that are near in value to their closest Web safe equivalent and creates an adaptive palette from the rest. In effect this attempts to automatically provide the best compromise between viewing on 24-bit and 256 colour system.
That's not the only advance Fireworks has to offer for GIF optimization. The program also provides precise control over dithering with a sliding scale rather than Photoshop's crude on-off option. It also allows the exact number of colours in the palette to be set which allows you to discard the least common colours until the loss impacts on the image preview. Fireworks' Optimized option also attempts to create the smallest file with the least number of colours, but with no loss of image quality.
In theory the extra control Fireworks offers actually adds more complexity to the GIF creation process as it adds more variables to juggle. In practice though it makes life far simpler. Generally I'm happy to use the optimized WebSnap palette option and it's then just a case of seeing what effect lowering the number of colours and varying the level of dither has on the image quality and file size. In many ways the whole process becomes automatic - a point which Fireworks takes to its logical conclusion with the ability to save settings and apply them to an entire directory of images with the File>Batch command.
Integrating Your Graphics
With Fireworks creating your web images becomes far easier, but that's not the end of the story. After all before anyone actually gets to see your image it first has to be integrated into your HTML. At its most basic this comes down to the user hand-coding <IMG> tags or, more usually nowadays, having this done for them when they insert images into a wysiwyg web designer. By embedding the <IMG> tag within an <A> anchor element its simple to turn a single image into a hyperlink to create the ubiquitous web button.
That's fine for standalone graphics but one of the most common graphical effects on the Web is an image map where different sections of the image correspond to different links. Such image maps are handled either on the server or, far more commonly and efficiently, on the client browser. To create the client-side image map it's necessary to add a USEMAP attribute to the IMG tag and then set up a <MAP> tag containing each of the necessary <AREA> hotspots.
Theoretically it's possible to do this by hand, but Fireworks enables the process to be controlled and largely automated. This is achieved through the use of the URL toolbar which allows rectangular, circular or polygonal hotspots to be drawn and for URLs to be added complete with browser status bar messages and, where necessary, a target frame. Initially compared to object-based links this use of a separate URL overlay seems unnecessarily complicated as if you move an object you have to separately move its hotspot. In practice, however, the complete flexibility more than makes up for the extra effort - especially as the Select>Copy to URL command does most of the work for you by creating a hotspot matching the current selection.
Image maps are an advance on single buttons, but where the hotspots are rectangular they are tending to be replaced by a new innovation - image slicing. Using the URL toolbar's Slice tool you can mark up the image into separate sections which are then reassembled in the browser via an automatically-generated HTML table. This has a number of advantages as splitting up the large image tends to mean that the viewer gets something to look at sooner and enables the use of ALT text to help those browsers wanting to click immediately or with text-only browsers. More importantly Fireworks allows the different sections to be given different GIF and JPEG output settings to squeeze the last possible byte out of the image.
More importantly, the whole Fireworks object-based approach comes into its own for setting up the effects in the first place (see Putting It All Together boxout). Fireworks allows the different image states to be controlled on up to four different frames corresponding to each of the possible mouseup, mouseover, mousedown and onclick events. To create a rollover button that responds as you move over and click on it all you need to do is create a rectangle and apply a live effect bevel to it. Using the Frame panel's flyout menu you can then copy the button to each of the new frames and with the Effects panel select the preset highlighted, inset and inverted presets for each of the image states.
This really is making web graphics work for you and highlights just how much more a dedicated web graphics package can offer over a moonlighting photo-editor. With Fireworks to help, producing efficient and effective web graphics still isn't painless but, once you've climbed the learning curve, it's a much easier ride. Of course, even after you've mastered JPEG and GIF creation that still leaves the entire field of non-bitmapped web graphics to come - but that's another story and a future master class.
In the masterclass I've concentrated on Photoshop and Fireworks, but of course there are hundreds of other packages that can write to JPEG and GIF and so can claim to be web graphic creators. The majority of these are the traditional bitmap-based photo editors which have all to some extent jumped on the Web bandwagon. Many now offer the all-important export preview for optimising images though Ulead's PhotoImpact deserves recognition for implementing this feature years before the competition. Other programs have their own individual strengths with the latest Painter 5.5 surprisingly leading the pack with its ability to create image tables and even rollover effects.
Of the dedicated packages, Adobe capitalises on the limitations it has built into on Photoshop with its ImageReady program. This offers an ongoing preview window together with unmatched control over GIF palettes right down to the ability to control individual dithering patterns. For most users though ImageReady makes the optimisation process overly complex and it's irritating to have to use a separate program to access power that should be internally available within Photoshop.
Much more successful are the dedicated web graphics programs that take an object-based approach. Corel Xara is a fully featured vector drawing program which took a sideways step with version 2 to graft on dedicated web features such as bitmap export previews and image map creation. An alternative completely web-orientated and object-based approach is offered by Adobe's ImageStyler. In ImageStyler everything from shape to formatting is treated as an object property that can be instantly updated so enabling the entire look and feel of a site's graphical content to be updated with a couple of clicks.
Painter 5.5, ImageReady, Xara and ImageStyler all excel in certain areas of web graphic creation but, for the moment the only program that offers the best of both bitmap and vector approaches is Macromedia Fireworks.
PNG - The New Kid On The Block
JPEGs and GIFs are so well suited to their separate tasks that there seems little room for an alternative bitmap format. In fact there is another serious contender, with a less than serious name - PNG (Portable Network Graphics format, pronounced "ping"). The PNG format was devised as a potential open replacement for GIF when Unisys revealed that it held a patent to the underlying LZW compression scheme and threatened to demand royalties. In fact that issue has now been resolved with the software developers agreeing to licence the technology while leaving end users free to use GIFs as they always have.
Even so the PNG format offers a number of potential attractions. To begin with its compression scheme operates vertically as well as horizontally so that its indexed 256-colour graphics are usually smaller than the equivalent GIF. Also the format offers 24 and even 48 bit options so that it can also handle full-colour photographic images. The resulting files are larger than JPEGs but they are completely lossless. Even better they can store an alpha channel to handle graduated transparency so solving the anti-aliasing halo problem while offering the possibility of some advanced creative effects.
Throw in ICC-profile support and in-built gamma correction and it's easy to see why the W3C is pushing PNG as the preferred web graphics format of the future. There's only one problem holding PNG back. While Explorer 4 supports the format natively, Navigator 4 requires a plug-in. When you can't be sure that end users will even see your graphic, it's difficult to recommend PNG no matter how technologically advanced it is.
Top Ten Tips
Hopefully you've found the information you were looking for. For further information please click here.
For free trials and special offers please click the following recommended links:
For further information on the following design applications and subjects please click on the links below:
[3D], [3ds max], [Adobe], [Acrobat], [Cinema 4D], [Corel], [CorelDRAW], [Creative Suite], [Digital Image], [Dreamweaver], [Director], [Fireworks], [Flash], [FreeHand], [FrameMaker], [FrontPage], [GoLive], [Graphic Design], [HTML/CSS], [Illustrator], [InDesign], [Macromedia], [Macromedia Studio], [Microsoft], [NetObjects Fusion], [PageMaker], [Paint Shop Pro], [Painter], [Photo Editing], [PhotoImpact], [Photoshop], [Photoshop Elements], [Publisher], [QuarkXPress], [Web Design]
To continue your search on the designer-info.com site and beyond please use the Google and Amazon search boxes below:
|designer-info.com: independent, informed, intelligent, incisive, in-depth...|
All the work on the site (over 250 reviews, over 100 articles and tutorials) has been written by me, Tom Arah It's also me who maintains the site, answers your emails etc. The site is very popular and from your feedback I know it's a useful resource - but it takes a lot to keep it up.
You can help keep the site running, independent and free by Bookmarking the site (if you don't you might never find it again), telling others about it and by coming back (new content is added every month). Even better you can make a donation eg $5 the typical cost of just one issue of a print magazine or buy anything via Amazon.com or Amazon.co.uk (now or next time you feel like shopping) using these links or the designer-info.com shop - it's a great way of quickly finding the best buys, it costs you nothing and I gain a small but much-appreciated commission.
Thanks very much, Tom Arah
[DTP/Publishing] [Vector Drawing] [Bitmap/Photo] [Web] [3D]
[Articles/Tutorials] [Reviews/Archive] [Shop] [Home/What's New]