Image Optimisation

Image optimisation is quite straightforward once you understand it. The idea is that images you save in Photoshop or other programs will be shrank in file size for the Web. Whether your site is optimised can make or break it, in terms of how quickly it loads.

Save for Web and Devices: 4-Up View

Once people were happy to wait with dial-up connections but not any more. People want sites to load quickly and demand it. It could be seen as impatience, but you don’t wait for a book to load or a business card, so I can appreciate the frustration.

Optimising an image starts with the file type. Do you save as GIF, JPG, PNG, TIFF… Which is right? Well, the simple answer is it depends. Photos or images with a lot of different colours/tones are often saved as JPG (or TIFF if lossless quality is required). PNG or GIFs are similar insofar as they require flat colour or limited colours/non-complex graphics. For example, text is saved as GIFs or a PNG.

PNG-8 is seen as a the successor to GIF. PNG-24 and above is similar and hopes to succeed JPG and above. However, if you save as PNG-24 in Photoshop it’s usually huge! If you save in Fireworks then it’s sometimes considerably lower. While Photoshop is a great piece of software, the Save for Web and Devices option isn’t as good as Fireworks.

So you might be wise to open a file a PSD in FW and resave. Also take note of the resolution. When saving for the screen it should be 72 DPI, but 300+ for print. Note well, you cannot upscale the DPI from 72 to 300! Some people do that and end up with awful-looking graphics.

Saving for the Web is also finding a balance between file size and artifacting. This where colours and detail to bleed or lose detail (described as being ‘soft’). So you should be careful and evaluate the image(s).

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s