10 must-know tips to prepare images for the web

Tip 7: Image size and sharpening
The final stages of image preparation should be scaling the image to its final size and applying an appropriate level of ‘Unsharp Mask’ at 100 per cent of its size.

Tip 8: Saving your imagery
Use the correct file formats when exporting or saving images for the web. As a general rule, use GIF for flat colour, and JPG or PNG for photographic images.

PNG and GIF can also use transparency – PNG uses an alpha channel for a range of transparency.

Tip 9: Match spot colours in HTML 
Select the colour you require in Photoshop and take note of the # colour reference for defining the HTML colour. In order for the displayed image colour to match an area defined in HTML of the same value, the image must be saved without the Embed Color Profile option selected. 

However, although your adjacent Photoshop and HTML defined colours will match each other, the actual display colour will vary from monitor to monitor. Although sRGB is still a relevant ‘general’ profile to be viewing the images under yourself, the resultant colours will display substantially stronger through a web browser on a wide-gamut monitor, especially when compared to the likes of an iPhone.

Currently, the only way to also achieve a colour accurate display is to avoid having to define colours in HTML and build the whole area from an image file, as indicated in Tip 10. However, the W3C organization, who define the standards used throughout the web, have proposed additional properties for the use of ICC profiles within the CSS3 specification. When fully implemented, this should overcome the current complications and allow profiles to be assigned to HTML-defined colours.

Tip 10: Colour Managed Imagery
For images that you do not have to match with the same colour values in HTML, profiles should be used and embedded on each image. This is the case even if they will be included on a web page that has a logo and surrounding HTML colour areas that you didn’t need to colour manage.

Although for simplicity, Adobe set the default profile for images output using the File > Save for Web & Devices command as sRGB, it is possible for improved colour accuracy on wide gamut monitors to work in the Adobe RGB colour space. Don’t forget that it is important to remember to embed the profile in each image that you are processing.

Note: We may earn a commission when you buy through links on our site, at no extra cost to you. This doesn't affect our editorial independence. Learn more.

Read Next...