A few considerations on images for the web. Our goals are:
- appearance – we want the image to look as good as possible – minimizing banding, noise, blockiness, etc
- file size – minimize file size so that images load quickly. If files are too large, then the web page loads slowly and visitors may abandon the page
- search engine optimization (SEO) – naming the files so that they can be indexed and found by Google and other search engines
We must strike a balance between appearance and file size. We can compress a file greatly to reduce its file size but then it may not look very good. Factors to consider that will affect both appearance and file size:
- image dimensions
- file format
- compression
Note that these instructions are guidelines only. You must use your own discretion to decide when to break these rules.
Process:
1. Is an image needed at all? For example, if putting a table of information – it is usually preferable to put this as a table of text instead of an image of a table. This will allow us to edit the data and also extract the data later if needed. It may be faster to download and will be visible to visitors who have images disabled (for example on a mobile device or on screen readers for the visually impaired). As another example, if we just wanted a solid block of color or to put a border, we can place those using HTML and CSS code instead of using an image.
2. Image dimensions – Resize the image to the dimensions required. This will reduce the file size and will also look better on the webpage. If you take a large image and scale it up or down, then the browser has to resize it and this often results in a loss of visual quality on the screen.
3. File format – General rule of thumb: Use GIF for logos and illustrations. Use JPG for photographs.
– GIF is designed for low colour images and can do a very good job of representing those.
– JPG is designed for high colour images and can do a very good job of representing those.
– PNG is best when encoding images that have transparency
4. Compression – Experiment with the compression to find the best compromise between file size and image quality. This is subjective and depends on the image being processed. For GIF, there are several parameters but the most important is number of colours. If you have black and white line art, you can get away with specifying around 8 or 16 colours. For JPG, try dropping the quality setting until the image gets visually blocky. Keep an eye on the file size to see how the reduction in quality affects file size.
5. File naming – This is the easy step. Descriptive names help you when organizing your content and also help visitors find your images in Google.
Do the following:
– give a descriptive name
– avoid abbreviations if possible
– use underscores or dashes instead of spaces
– be sure to put the file extension
Tools:
The king for image processing is Photoshop but for the steps described above any decent image manipulation tool will do. I’m a big fan of Irfanview, which is a free, light-weight image editor with many great features. You might also take a look at Picassa and if you want more editing features, check out GIMP.
More information on file formats: