Optimising Web Images
If images used in web page design are not optimised correctly, your user may experience long loading times and you will require much larger amounts of bandwidth use than is necessary. There are a number of best practises that website developers can observe to maximise the way that your website handles images.
PNG Optimisation
PNG images offer the website developer a transparent format and lossless quality. Here are some ways in which you can optimise your PNG image for use in webpages. PNG are a replacement image format for the GIF which produced files up to 7 times larger than a PNG.
A PNG image has five types of compression but only three of these are used by Photoshop. For this reason, image compression for a PNG can be optimised with more precision using other utilities such as
OptiPNG or pngcrush.
The options offered by these services reduce file size but not the quality of the image.
Posterisation
Posterisation is a tool used in Photoshop that reduces the number of colours used in an image. Posterisation creates posterised regions where a single colour is used to replace many similar colours.
Dirty Transparency
A plugin for Photoshop called ‘Remove Transparency’ ( download it here http://www.thepluginsite.com/products/photowiz/photofreebies/index.htm ) will allow you to view the true nature of a transparent file. Some transparencies hold all the original data in the image but have the opacity turned to 0. By removing all data before creating transparancy, you can reduce the size of your image by over half.
Split by Transparency
Instead of saving a full image in weighty PNG-24 to accommodate a small number of semi-transparent pxels, an image can be saved partly in PNG-24 (for semi-transparent pixels) and partly in PNG-8 or JPEG(for solid pixels).
Optimising for Web
Understanding the variety of image files used for wesite design will help a webpage load faster and reduce bandwidth requirements. Using the ‘Save For Web’ option in Photoshop allows you have more control over the type of web image you save your files as whilst keeping the file size optimal.
Lossy and Lossless Image Files
The two types of image files used in website design are compressed in two different ways: lossy and lossless.
A lossy image removes all unnecessary information in the image when it is compressed so that there is no way of getting that information back when the image is decompressed. For most internet requirements, the difference in image quality is not noticeable enough to effect the website design.
A lossless image will retain all of the original data that an image had before
compression and the decompressed file is identical to before compression. These files are significantly larger than lossy files so are not the optimum file type for most website design.
JPEG Image Files
A JPEG image (.jpg) is a lossy image file which offers control in image editors over the amount of compression is required. JPEG files are used for images that contain millions of colours such as shaded drawings, photographs, gradient images and more.
GIF Image Files
A GIF file is lossless as it saves data about each pixel in the image. A GIF can contain transparency and up to 256 colours.
PNG Image Files
PNG files are similar to a GIF. It can hold up to 256 colours (As an 8-Bit file), preserve transparency (as a 24-bit file) and is lossless. A PNG offers the option to be saves as an 8-bit file or as a 24-bit file. The 24-bit file allows storage of millions of colours.