  
Home
Products
Internet Access
Hosting & Web Services
Hardware & Security
Mobile Services
Voice Services
Data Services
Domain Services
Channel Partners
Business Resources
Knowledge Centre
Case Studies
Business Solutions
Useful Links
Helpdesk
Product Help
Technical Library
Network Status
Customer service
Toolkit
WebMail
Fax to Email
DVS Control Centre
Web Password
Internet query tools
Downloads
Dial Companion for Broadband
Demon Newsletter
Web Graphics
Introduction In designing a Web site that uses graphics there are some related technical considerations to bear in mind:
With the enforcement of bandwidth-related limits on Demon's Web services, this final consideration has become very important. Generally, the bandwidth required for a page is primarily determined by its graphical content; the HTML that describes the page layout and textual content will rarely be over a few kilobytes in size, whereas a single graphic file can easily be ten to a hundred times larger. A good rule of thumb is that you should be aiming to achieve image file sizes of around 20K or less for "inline" graphics that are displayed on your pages - apart from anything else it makes the pages display quickly if these files are small. Graphics files that are not directly displayed should be stored as efficiently as possible, depending on their intended purpose. How do I know how much bandwidth I am using? This is simple to check. Check in the root directory of your homepage, and you should find a file called bwusage.txt. It details the amount of requests on your page and the amount of bandwidth in Mb that has been taken up. Using the provided images There are libraries of icons and backgrounds available on Demon's Web servers. Because these images are intended for use on any site on those servers they are cached and do not count towards your bandwidth use. These graphics should not be copied to your own directory. Instead use an absolute reference as described at: Choosing the correct size for your images The first consideration you should have is the appropriate size for the graphics you wish to use on your pages. Although you may think that a large graphic is very impressive, you should bear in mind that an image which is 400x400 pixels in size will generally be SIXTEEN times larger in uncompressed file size than one which is 100x100 pixels. You should "resample" large graphics down to the desired display size and save them in an appropriate format (described below). If you have a large number of graphics for display it is best to provide them first as "thumbnails" (small images) that may be clicked before the full-size file is downloaded. Do not use WIDTH and HEIGHT settings in your HTML to display large images at small sizes - visitors to your site will have to download the large files anyway to see them at the small size! It is good practice to use accurate WIDTH and HEIGHT settings for inline graphics to speed page display. If it is likely a whole set of graphics will be downloaded it may be most efficient to put them in an archive (e.g. a "zip" file). If the files are saved in a well compressed format beforehand, the archive can be kept fairly small. Caution: some formats will not compress any further and will actually expand when "zipped". In this case it would be best to archive them with no compression. Graphic file formats Most Web browsers handle "inline" graphics (i.e. those which are displayed on a page) in GIF or JPEG format. At present no other "raster" or "bitmap" types are as widely compatible or efficient, and any others are best avoided. Some, e.g. Windows BMP, are not compressed at all. Both GIF and JPEG use compression to reduce the size of the files and thus the bandwidth required to transfer them. However they are generally not interchangeable - each is applicable to certain types of image. GIF format GIF is the Graphics Interchange Format, originally developed for use on the Compuserve network, but now widespread on the Internet. Its main features are:
JPEG format JPEG is the image encoding system of the Joint Photographic Expert Group or more formally is the system used in JFIF (JPEG File Interchange Format). This format is intended for compressing "real-world" scenes. Features include:
Which should I use? You should use GIF format for:
Note that GIF format is not suitable for photographs unless they are small thumbnails.
Note that JPEG format is not suited for line drawings, cartoons, or high contrast, sharply defined images (especially text or icons). How to "optimise" your graphics for small file size Note that these tips are rules of thumb. Generally the best method for optimising a particular graphic file is to make several versions following these guidelines and choose the smallest file that still looks good on the target browser. See the list at the end of this document for some useful optimisation tools. GIF palette optimisation Because this format uses a fixed number of colours, information is discarded to fit the image to the palette, which reduces the file size. This can quite often be done with minimal loss of quality if the palette is chosen well. For instance, suppose you have an image that is 200x100 pixels in size. A full colour (24-bit per pixel) bitmap image of this size is 60,000 bytes (i.e. 200x100x24/8 bits-per-byte). With a 256-colour (8 bits per pixel) palette this would be reduced to 20,000 bytes. If a suitable 16-colour (4 bits per pixel) palette could be fitted to the image, then the image would use just 10,000 bytes, a sixfold decrease in size! With the LZW compression used in the GIF format this can be reduced even further. The number of colours visible to the person viewing an image is also a consideration in choosing a palette. For instance someone using Netscape on a standard 256-colour display will generally only be able to see 216 colours from Netscape's default palette. Using any more colours in the graphics on your page may be of no benefit to visitors to your page, and simply increase download times and the amount of bandwidth used. The process of reducing the number of colours used without significantly degrading image quality is called "palette optimisation". Luckily it is not very complicated to do if you have the right tools - indeed some packages have been developed solely for this purpose. GIF compression optimisation If you have an image that appears very grainy, for instance a graphic that has not given good results on scanning, it is unlikely to compress well. This is because the LZW compression scheme uses similarity between pixels to reduce the amount of data needed to describe them; a grainy image has too much randomness to compress well. For this reason blurring an image -very slightly- before saving may produce a smaller GIF file. If your image should contain areas of flat colour but has some specks of "noise" scattered through it, you can often reduce its final size by "despeckling" it, or retouching the affected areas. Other GIF options Interlaced GIFs
JPEG compression The main tool you can use for keeping the size of your JPEG files down is to alter the compression setting used for encoding the image. Using high levels of compression in the JPEG format causes blocky "artifacts"of the encoding system to appear around edges in the image. For this reason you may think it is best to choose a minimal compression level (high quality factor). However, even a very slight level of compression (e.g. 5% compression, or 95% quality factor) will drastically reduce the size of a JPEG file with no visible effect on the image quality. Less compression than this will produce a significantly larger file. Very large reductions in file size are achievable if you can tolerate a lower quality (e.g. a large image that is to be used as a "background"). Good results can be seen at around 10%-50% compression settings. Again, small features and "noise" in an image will stop it compressing so well, so you may want to retouch areas and blur or despeckle an image before saving it as a JPEG. If possible crop areas of superfluous detail entirely - especially ornate borders. Don't be tempted to dither or reduce the colours in an image to be saved as a JPEG; dithering will introduce a lot of "noise" and reduce the compression. Another tip is not to use "zero compression" or "lossless" JPEGs - they are not standard and it is unlikely that Web browsers will display them. Progressive JPEGs are not as widely implemented on Web browsers as the equivalent standard ("baseline") format. However they are usually smaller in size, and are supported on most recent browsers (for example MS Internet Explorer 3 and Netscape 3 and above). Other efficient graphic file formats PNG (Portable Network Graphics) FIF (Fractal Image Format) Iterated Systems have developed a "lossy" file compression system that uses fractals to reduce the amount of data needed to encode similar areas of an image. It is best suited to full-colour graphics and photographs, producing files which are usually smaller than equivalent JPEGs and allowing repeated enlargement without the pixellation usually apparent with such transformations. The FIF format has a free plug in for common browsers called Fractal Viewer and an associated "MIME-type" is enabled on all Demon Web servers. FIF files can be created using the shareware Fractal Imager. Details are at: Wavelet compression Infinop Inc. has developed the Lightning Strike Image Compression system - another "lossy" encoding scheme that is intended to allow better compression of full-colour images and photographs than JPEG. Image clarity is improved and the "artifacts" are far less noticeable under high compression. The MIME-type for this format is enabled on Demon's Web servers and a trial version of the compressor, the free decompressor browser plug in and some slide shows are available at: Corel CMX vector format Corel Corp., makers of the popular CorelDraw software, have produced a plug in to allow Web-based viewing of CMX files (as output from the Corel suite of software). This format is very different from those previously discussed in that it is a VECTOR graphic format. This means that a CMX file contains a description of how to draw the image it contains and not just a "bitmap" description of how to display it. The image can then be displayed at any size - it is interpreted, scaled and displayed by the browser plug in. The format is not suitable for photographs or "real-life" images. It works very well for plans, maps, clipart and business graphics and produces fairly small files.The appropriate MIME-type is enabled on Demon's Web servers and a plug in can be downloaded at: Please Note: CMX images can be viewed by Netscape Navigator™ 2.0 for Windows® 95 and Windows NT® only. Useful links Web graphics optimisation information The Dec. 1996 edition of Web Techniques carried the useful article "Optimising Web Graphics - The Great Bandwidth Shortage". This has been expanded and is now online at: The JPEG image compression FAQ is available at: Notes on Graphic file formats generally are available here: Web graphics optimisation tools Many excellent image manipulation and optimisation tools for Windows and Macintosh system are available at: Various GIF and JPEG optimisation tools, plug ins and Web enhancements for Windows image editing software are available from ULEAD systems at: More Macintosh image editing and conversion software can be found via ftp at: Linux and Unix users will find pbmplus fufils most of their requirements, or could try ImageMagick for the X Window System. For details see: Finally, the online GIF Wizard palette optimisation tool is available at: |
©Copyright 2008 THUS plc
|
|
|