If you’re here then hopefully it’s because you read my free ebook ” Web Designer Secrets”. If not you can download it by clicking on the book image to the right.
Using Graphics In your Website
Now from a search engine point of view images are not very important in a website. This is because the various programs (bots or spiders as they are called) that scan through your site to determine what it’s about, can only “see” text.
Images are virtually invisible to the search engines
This should tell you immediately that sites that are 100% FLASH are hard to get ranked in the search engines ( which is one of the reasons why I don’t do them)
However … from a (human) web user point of view good, well placed images or graphics can make a site much easier to understand and give it greater visual appeal. So they ARE important.
A balance is needed. I tend to advise that images and graphics only be used if they add to the overall message or theme of the site.
Graphics Slow your Site down
Yes it’s true. When someone opens up your site the main things that determines how quickly it is dislayed is the graphics/ images on the site. Too many images and / or too large an image file and it loads very slowly.
And if they are still on dial up internet – you’ll probably lose them before the page fully loads
So when you’re using images on a website use them sparingly and optimise them for the web
How to optimise an image for the web
When you take a picture from a digital camera it produces a file with sufficient information in it to allow you to print it. Typically you might print it at 300 or 600 dpi (dots per inch) and typically the image file might be 1 – 3 megs in size.
Add a few of these 3 meg images to your website and it will be painfully slow to load.
Fortunately you dont need the same level of detail to show the image on the monitor screen. A density of 75-100 dpi is sufficient to give a good quality image on a monitor. And it gives a filesize that is 60-80% smaller.
This means faster to load
Another thing you can do is reduce the physical dimensions of the image to closer match the actual dimensions you will be using on the website. So an image might originally be 2000 pixels wide but you only it to be 600 pixels wide on your site. Shrink the image to be 600px wide before you upload it – and once again the filesize is much smaller.
Finally the format of the image file is important. Without going into too much detail save your web images as jpegs or possibly gifs. A jpeg is a compressed format so one again you get to shave something off the image filesize.
To sum up, never load images onto your website directly from your camera of scanner or even from another website without checking the filesize and adjusting the image dimensions and image format
This will make for smaller files that load faster.
How to make your images web friendly
So how do you make the images you have “web friendly”?
You need to use another program – you need graphics processing software.
There are many graphics software packages. Some are very advanced and expensive, like photoshop. Some are free. Most will do the above optimisation process easily.
I personally use several different software programs I have bought over the years. But if all you need to do is make your images web friendly then you could try one of the many free graphics programs around.
One that I have heard is good is called Faststone( http://www.faststone.org/FSViewerDetail.htm) .
I haven’t used it myself though – since I paid for software I have to use that to justify the cost !
By the way this whole thing about larger image files taking a long time to load is another reason to avoid pure flash sites. They are slow to load!!
Make sure any images you use on your website have been prepared for web use- ie optimised to load as quickly as possible. You’ll have happier visitors if you do.
If you’re website has been designed properly the you should be able to easily upload these optimised images directly from the admin area. Assuming your site is built on a content management system of course. (see previous tip or web designer secrets ebookfor more details about CMSes)
Anyway that’s it for tip 3: hope it helped