Web Design Small Cover

Buy the PDF of
Web Design:
A Complete Introduction

See the book at amazon.co.uk or amazon.com

Related Site

Web Security Topics

Related Books

Secure Communication Cover

Securing A Server Cover

Tips on Preparing Graphics for Web Pages

For further instructions and information about image manipulation in Photoshop, please refer to our book, Digital Media Tools

Downsampling

We recommend using Photoshop for downsampling if possible, but in any case always make sure that you downsample any images yourself rather than depending on the browser to do it for you (browsers make a terrible job of downsampling and your image quality will be poor as a result). First, making sure you have un-ticked the Resample Image check box, change the resolution to 72 dpi using the Image>Image Size menu option; your pixel dimensions should not change at this stage. Next, tick the Resample Image check box, and then alter the pixel size or set a percentage in order to downsample your image to the required size. (There is controversy over whether you should downsample exceptionally large images in stages, perhaps first to one half or a quarter of the original size, and then to the final dimensions. Our own tests indicate that there is a small difference in final pixel values between large images downsampled in stages and those downsampled in just one operation, but that this is usually imperceptible.) If your original photo is not in the right format (aspect ratio) for display on your page, when downsampling set the smaller dimension you require (no matter whether it is width or height) in the Image>Image Size dialogue box, so that the other dimension remains too large. For example, if you want an image to end up as 300x240 pixels and it is currently 600x400 pixels, set the 240 in the resampling dialogue, not the apparently obvious 300. This avoids the need to resample again. As your aspect ratio is wrong you have no choice but to crop the original image (unless you actually wish to distort it). Therefore, in this example, you would downsample to 360x240 and then crop the extra 60 pixels off the width.

Favicons

Although there are no recognized standards for adding favicons to sites, they are widely used and can help sighted users identify a site quickly, for example in a list of bookmarks. However, it can be surprisingly difficult to design an effective favicon. This is because they are bitmapped images, normally only 16x16 pixels in size, and that is extremely small. To get a recognizable symbol into that space is not easy, and it is particularly difficult to avoid jagged edges. We recommend starting with a larger file, either 64x64 pixels or 32x32 pixels if you are an experienced designer. Do not work at a size larger than 64x64 as there will be so much change on downsampling that your favicon will look nothing like your original design. When testing, do not rely on simply viewing your working image file at a smaller size in Photoshop; the result will not be the same as the downsampled file. It is therefore essential to test by downsampling to the final size every time you alter the design. To achieve a successful design it helps to use high contrast, and very simple graphic elements. For favicons it can be effective to alter contrast after downsampling. It can also be useful to touch up the final 16x16 pixel image by altering it one pixel at a time, though this is tedious work. The most widely recognized file format for favicons is the Windows Icon format, with extension .ico, and you will probably need to download a plugin for this if you are working in Photoshop. (The W3C advocate using PNG favicons, and some browsers will recognize them, provided you use suitable markup on every page to identify the favicon's location. A .ico file can just be placed at the root of the site and will be found automatically by most browsers.) There are online favicon editors available on the Web, but they aren't very good. You will get a better result using a proper tool, such as Photoshop.

Image File Sizes

If you are used to working with broadband access to the Internet it is tempting to think that image file sizes don’t matter much these days. There are two reasons why this is not true. First, many Web users around the world still have slow connections, and so you should always make sure your files are as small as they reasonably can be for good display world-wide. Second, you need to be aware that you cannot predict how many times your image data may be transferred from your site. If your images achieve a high ranking at search engines like Google Images this may cause an unpredictably large number of requests for an image with a consequently large increase in data transer from your site. Your hosting service may limit the amount of data it allows to be transferred per month, etc., or they may charge you more for extra. You should therefore always keep image sizes down where possible (see tip on JPEG Image Quality).

Indexed Colour

Using GIFs or PNGs instead of JPEGs can be a good way to ensure small image file sizes and, in some cases, to avoid JPEG artifaction (but see tips on JPEGs and PNGs below). These file types use indexed colour, and the palette is limited to a maximum of 256 colours. However, this often turns out not to be anything like as restrictive as it sounds, and if you wish to use these file types it is well worth experimenting to see how good the results can be. The simplest way to experiment is to use the File>Save for Web… menu command in Photoshop, which brings up a large window in which you can experiment with settings for as long as you like, and see the results before you save the file. You can also see the colour palettes. We recommend that you do not use dithering if you are reducing the colour palette to a very small number of colours. For a full 256 colour image it is worth experimenting to see whether you prefer the image with or without dithering. In practice, at 256 colours, dithering is often unnecessary, but it will depend on the nature of the original image.

JPEG Quality Settings

When saving an image as a JPEG for a Web page, don’t assume that you need to use the highest quality JPEG settings to get a good result. Very often it is almost impossible to see the differences between an image saved at High or Maximum JPEG quality from an image saved at Medium quality. If you are using Photoshop, always use the Save for Web… dialogue to preview the results at different settings. Considerable savings in file size can be achieved by using lower settings.

Layers in Photoshop

If you are preparing images in Photoshop, it makes work easier and avoids many problems if you use layers as far as possible. It is a good idea to keep one version of your file with all its layers, and then flatten a final version before saving for the Web. When working with layers, the following tips may help: always make a copy of your original image (which is often the background layer) on a new layer, and make no alterations to your original layer (turn its visibility off). Where possible, use Adjustment Layers for changes rather than altering the image layer itself. When working with multiple layers, it makes life simpler if you give each layer a meaningful name so that you can easily identify it; the more layers you have, the more important this is. And always make sure that you have the correct layer selected when applying any changes. This sounds obvious, but it is surprising how often you will find that the layer selected is not the one you supposed it to be.

PNGs and transparency

Internet Explorer 6 does not correctly interpret transparency in PNG files. Therefore, if you require an image with transparency, use GIFs until the world is no longer using IE6 or earlier browsers. (There is a fix for this problem that also allows you to take advantage of the PNG format's support for alpha channels to add semi-transparent images to your pages, but it depends on JavaScript.)

Sharpening

The definition of many images can be improved by applying some sharpening, although this will depend on the original and you should always test the result before committing yourself. You may have read that if you are going to have to downsample your image for final presentation you should always apply changes like sharpening to your full-size original and then downsample last of all. Although this is sound advice for some circumstances, it is not the best way to proceed if you are preparing highly downsampled images at a small size for a Web page. In this case we recommend that you make any other changes (for example to the Levels or colour balance) while still working with the higher resolution original, but then downsample (but remember to keep a copy of the high res original at all times) before sharpening. With your downsampled image displayed at actual size (use View>Actual Pixels in Photoshop) try a fairly small amount of sharpening with either the Filter>Sharpen>Unsharp Mask... or Filter>Sharpen>Sharpen Edges command (which one is best will depend on the nature of your image) in order to get better definition of the content of the image. But always be careful not to oversharpen. Only trial and error can determine the correct amount and method of sharpening for each image: there is not general rule that can be applied, because each image is different.

Trimming Images

Many original images need to be trimmed or cropped so that they show just the content required for display on a Web page. If you are saving an image as a JPEG, this presents no problem for layout. However, if you are using a GIF with a background set to transparency (for example, the banner or the two fishes image on the home page of our meta-site, www.macavon.com then make sure that you have trimmed right to the edges of the image itself. If you fail to do this, the invisible background will take up space on your page, and may cause confusion in your layout. If you want space around the GIF image on a page, you should set an appropriate amount of padding in the stylesheet.