Photoshop for the web: part I

Preparing graphics for the web is a journey into the unknown. There are so many variables over which you have no control: the type of monitor your viewer has, how fast or slow their internet connection is, and the type of browser they use. Then there’s the challenge of presenting the images, or website, on tiny mobile-phone screens. If the site doesn’t look good, or takes too long to load, the viewer is likely to click elsewhere. The main challenge is to find the right balance between image quality and file size.

In the first part of this two-part series we’ll look at image dimension, choosing the optimal file format, and image compression. In the second part we’ll venture into some more advanced territory: designing website favicons, slicing images, copyright protection, and the all-new Adobe Generator for exporting web graphics.

Sizing images for the web

Chances are that your images live on a hard drive as full-resolution master files, possibly in 16-bit, with layers, and tagged with a colour profile other than sRGB, which is a standard RGB colour space. The first step is to flatten the image, get it down to eight-bit, and then adjust the image dimension.

If your image needs a bit of pruning around the edges, grab the Crop tool and have a look at the ‘width x height x resolution’ interface in the Option bar. You simply enter the dimensions you want the image to be in pixels. Make sure to include the pixel units, for example 800px.
You can leave the resolution field blank, or you can enter any number. Out of habit I use 84px/inch, but it doesn’t really matter. The resolution of an image only becomes important when it is headed for the printer. Any browser is going to display one image pixel per monitor pixel by default, which is 100 per cent in Photoshop language. This is also the best way of displaying an image, with no interpolation.

What is the best size for web images? In some cases the web designer, or the online forum, will give you a certain image dimension. In other cases it is up to you to pick a size. Common sizes are 800×600 pixels, which is handy for sending a designer an image that doesn’t need to be printed. For posting a photo to an online forum, 640×480 pixels is enough to see the image clearly while having a small file size. A dimension of 320×240 pixels is common if there are a lot of photos on one page, and a small 100×133 pixels is often used for head shots on a company website.

If you don’t need to crop your image and want to retain the image proportions, then head for the Image Size dialogue box (Image 1).

Enter the pixel dimensions in width (or height), and make sure that the Resample box is checked. The latest Photoshop editions give you an Automatic setting for the re-sampling algorithm. In the past Bicubic was the obvious choice, then Adobe introduced Bicubic Sharper as an option for down-sampling images. I found that the Automatic setting does an excellent job in most cases. If you are a perfectionist you might want to critically examine the down-sampled image, and possibly give it another round of sharpening with a very small radius setting.

Another way of resizing images is by looking at it. Just grab the Zoom tool (keyboard shortcut ‘Z’) and zoom in or out by pressing the ‘Ctrl’ (‘Cmd’) key and the ‘+’ or ‘–’ keys. Once it looks good on screen, remember the zoom percentage and enter it in the Image Size dialogue box.
My favourite resizing tool is the Fit Image command, which you’ll find under the File menu (File > Automate > Fit Image).

This is ideal to automatically resize a bunch of images from a folder. Simply design an action with the Fit Image command, and you don’t need to worry about landscape and portrait orientation. If you put the same pixel number in both boxes (600px in my example) then all images will have their longest side resized to that number.
The Image Processor takes you a step further. It has been around for quite a while (since CS2) but it is well hidden under File > Scripts > Image Processor, and not many people make use of it.

It is like a Swiss army knife, which lets you process a bunch of files from a folder, resize them, save them as JPEG, TIFF, or PSD, add copyright information, and even run an action, like sharpening. The Image Processor is a great tool if your final destination is a JPEG file, it even lets you automatically convert the colour profile to sRGB.

Choosing the best file format

The JPEG (Joint Photographic Experts Group) format is by far the most common file format for the web, and is almost exclusively used for photos because it preserves all those millions of colours. This will give you smooth transitions from one colour to another, for example in the sky. JPEG is a lossy format, which means that you are throwing information away in order to create a smaller file. Typically a compression of 10:1, or even 20:1, can be achieved with hardly any visible loss, but it is important not to save files repeatedly as JPEGs — each time you save the file, the image degrades further. You can control the level of compression when saving a JPEG, whether you use the Save As command or the Save for Web dialogue box.

If your JPEG is destined for the web, don’t forget to switch to sRGB by using the Convert to Profile command under the Edit menu.

The Baseline Optimized option gives you a slightly smaller but somewhat less compatible file. It is better to leave it off. Progressive means that the image is going to load row by row instead of appearing completely in one go. Only turn it on if you expect most of your audience to use an old, dial-up internet connection.

GIF (Graphics Interchange Format) is the second most important image format, after JPEG, on the internet. Since it is limited to 256 colours it is not really suitable for photographic images, but it is ideal for images with solid blocks of colour (logos, line art, comic strips). GIFs can be lossy or not, and you can trim the file size further down by limiting the number of colours to less than 256.

GIF files are ideal to preserve transparency. After you have painstakingly deleted the background from an image, JPEG simply sticks a solid background behind any empty areas, whereas the GIF format allows your graphic to blend seamlessly into the background of a web page or presentation slide.

This format also allows for animation by combining several images into an automatic slide show. This is handy if you want to display a lot of ad into a small space on a website.
PNG (Portable Network Graphic) can either be PNG-8 or PNG-24. Both are lossless, and therefore of highest quality. Use this format if quality is more important than download speed. PNG-24 files support 256 levels of transparency, and are ideal for images that contain transparency and drop shadows, but resist the urge to use PNG-24 because the files are twice as big as PNG-8.

Another serious problem with PNG is that some older web browsers, in particular Explorer 6, don’t display PNGs properly.

WBMP (Wireless Bitmap) is the ideal format for black-and-white images headed for mobile devices. It gives the viewer crisp and sharp text and logos on those itty-bitty screens.

Save for Web

If you really need to squeeze the file size to the bare minimum, then go for the Save for Web dialogue box under the File menu. It gives you lots of control and will compress the heck out of your files, while you keep an eye on the image quality. You can even use this interface to do your downsizing as well.

The controls on the right-hand side let you choose various file formats, but JPEG will be the predominant choice for photographic images. The other options are the already discussed GIF, PNG-8, PNG-24, and WBMP.

The quality setting for JPEG files is here on a scale from 0–100 (note that 0 is the highest compression/smallest file and 100 gives you the largest file). You can have one, two, or four preview windows. Make sure that the Convert to sRGB checkbox is turned on, but it is not necessary to embed the colour profile. Most browsers won’t be able to read a profile anyway. 
The example in Image 5 shows you the original in the top left and a high-quality JPEG version in the top-right window. The bottom left depicts a low-quality JPEG preview. Note the JPEG artefacts in the sky and on the shorts of the man in middle. The bottom right is a GIF preview. The 256 colours of this format are not sufficient to reproduce all the colours, and you can see posterization in the sky and in the skin tones.

The Blur control, under the quality setting, lets you run a slight Gaussian blur on the image. This will reduce the file size a little bit more, and you can get away with a setting of 0.1–0.4 pixels.

A very useful feature is the Metadata drop-down menu, which gives you five options: None, Copyright, Copyright and Contact Info, All Except Camera Info, and All. For example you can strip all metadata, or you can just include copyright information and your contact details. I recommend setting it to Copyright and Contact Info. Including this data into your image will increase the file size by a hair, but it’s a good idea to include this information, otherwise it can appear as an orphaned image on the web.

Unleashing your images onto the web takes you into uncharted waters. If you sell your images, and image quality is of prime importance, there is only so much you can do. Converting your images to sRGB is absolutely vital, the rest is about finding the right balance between quality and upload speed. In the next instalment we’ll look at some other aspects, in particular about protecting your images online.