Image optimisation for digital use
In this category I’m going to give a few tips on digital graphics, logo design, image optimisation, image manipulation, web animations etc. Feel free to ask questions or add comments..
Image Optimisation
A web page should not take more than 10 seconds to download. Viewers get bored with waiting and click elsewhere. So, if you want to use graphic images and/or photographs you must take this fact into consideration. On your front page you should only put small images - and not too many of them. Small I mean as in kilobites - not in pixels. I know this is very confusing - most non-designers don’t seem to understand this concept.
I’ll try my best to explain it. Let’s say you have a photograph that you’ve scanned in or taken with your digital camera. It has two sizes - one measured in pixels the other one in cm(or inches). The latter determines its real i.e. printing size whilst the former determines its digital size - i.e. how big the picture looks on your monitor. If you want to print this picture - you focus on its real (printing) size. However, if you want to email this picture to your friends or use it in any kind of digital format (in a slide show, on a CD, on a web site) the printing size doesn’t matter. Only the pixel size matters. For example - our picture would be 12×16cm - the pixel size 800X600. The pixel size depends on the DPI setting of your scanner or digital camera. The higher the number - the better the quality - goes the theory. This is true but, again, this matters if you want to print the picture. For computer & web use, the dpi should be between 72-150.
The best thing to do is to scan your picture (or take your picture with your digital camera) or image at a high dpi, then do the following:
1, lower the dpi setting to maximum 150 (72 if you want to have the picture looking small on the monitor)
2, this will automatically reduce the pixel settings of your image - note: the real (or printing) size will not change
3, decide how big your image you want to be on a monitor. If you want to email it to someone aim for about 400x 350 pixels (never bigger than 640×480)
4, if you want to put it on your web site - you must optimise it. Use Photoshop for this and click on "Save for web" . Here you have choices to save your image as a gif or jpg or png. Normally jpg is better for photos, gifs are better for graphics. But not always. Just experiment with the settings - click on the optimised box and it will tell you the size of the optimised version.
By the way I use this even on pictures to be emailed to friends/clients. Why? Because an image (let’s say 400×300pix) of 400 KB gets reduced to 12KB. It’s fast to email - and fast to download on the other side (whilst the quality of the picture is not harmed).
So size matters. By optimising your pictures your pages will download faster. In theory your pictures/images should not be bigger than 15K. In fact aim for 2-5K small images (maximum 10 per page). These can be little animated gifs or still images as long as your viewers don’t have to wait more than a couple of seconds (each) for them to download.