Quick Website Graphics Tips

Images in websites are important elements that can sometimes be overlooked
in regards to optimization.

Whether they be images involved in your overall template, in your menus or
in your main website content, they need to be carefully selected and optimized
both for the viewing experience of your visitors AND for the visiting bots such
as Google.

Here's a list of some of the main things that need to be considered where
your website images are concerned.




Make sure all your images in your websites images
blend in well with each other

Choose a template that has images that integrate well together and suit your
website theme. There is nothing worse that looking at a website that has an array
of different color schemes that don't match and that also cheapens the look
of the website.


Optimize the dimensions of your website graphics
AND their download size

Most browsers cope well with images that have dimensions of 800 x 600.
Stick to that size if you need to add larger graphics to your website. Anything larger
and some people will have to "scroll" to see your images, which is annoying for
your visitors.

Also make sure the KB size of your image isn't large. People have short attention
spans when viewing web pages. Having to wait for images to load can frustrate. If
you need to have a large image on a page ( if your site is graphically orientated for example) , save your images in an optimized form which has the best resolution but doesn't take too long to download.

Try and keep these larger images to around 200 - 250 kbs and don't put too many
large images on the one page.

Photoshop has a great saving option called "save for web" where you can adjust
your images resolution and kbs easily.


Image Types

gif - great for small images, little animations and small graphics where you want
them to have a transparent background. (great for images in templates, menus etc)

jpeg - save images in jpeg format for photos and graphics which are used in the main content of your website. The resolution is good and you can keep the kb size of the images down without losing a great deal of image quality.

png - great for line art, cartoons any images which have blocks of color where you
want the image to look clean.
You can save images so their backgrounds are transparent, but I have found that these don't always appear correctly when viewing with Internet Explorer.


Optimize your website graphics for Google and other search engines

If you put an image on a page with just the source URL, you are doing your website
and your visitors a great disservice.

There are situations where your image may not load, but without extra information
on the page, who will know what is there if they can't see the picture?

Also, search engines can't "see" your pictures. You have to give them some information
so they will know exactly what your image is.

First thing to try and do with any picture you upload to your site is give it a name that describes what it is. If you have an image called eg "123rrrt.jpg" then that doesn't give any indication at all as to what the image actually IS.

If you have a website that has other users uploading images to your website, this is
something you may not be able to avoid, but for anything you upload yourself, try to name your files in a descriptive way eg "flying-pink-pig-with-wings.jpg"

When placing into your page, don't just add the URL.

"Alt" attribute
The most important thing to add also is the "alt" attribute.

If a picture on a page should fail to load properly, the alt text (alternative text) will be visible where the image should be and should describe the content of the image.

You can also include keywords in your "alt" tag for better search optimization, but don't
go overboard adding too many keywords.

Try and keep your keywords descriptive and targeted, too many keywords can dilute the impact in search engine results.

Other Attributes to add

Remembering that Google etc can't "see" your image, adding as much extra information about that image is a plus.

Adding the image width and height , AND an image title are also excellent ways to optimize your images for search engines.

For example:

<img src ="http://www.yoursite.com/flying-pink-pig-with-wings.jpg" width ="400" height ="500" alt ="Red Ferrari" title =" flying pink pig " />

Most good html editors such as Macromedia Dreamweaver and the free program Nvu make adding these image attributes easy.

In Dreamweaver, right click on the image you want to edit and scroll down to "edit tag <img>".

This will open up an area where you can add/edit your image information.
In the "general" tab you can add your alternative text , width and height and in the "Stylesheet/Accessability" tab you can add your image title and a longer description as well.

In Nvu right click on the image you want to edit and scroll down to "Image and Link Properties".

If you click on "Advanced Edit" you can add the attributes for your image from a dropdown list. Just type in the corresponding values you want for each attribute you add.


Two more additional notes.
  • When naming your image files, use "hyphens" to separate words rather than "underscores". There is some debate on whether some search engines prefer hyphens to underscores, hyphens seem to be the preferred and most successful method at the moment.
  • If you are not sure about image coding, adding a small text paragraph giving a description of you image as close to the image as possible is another way to optimize.



The "robots.txt"

A "robots txt" is a small text file that you can add to the "root" of your website that, and
as the name suggests, is for the "robots" (spiders, search engines) that visit your website.

What do you use it for? Well, you can tell the robots what parts of your website you want searched, and what parts you don't.

In regards to images on your site, you may not want them "searchable".

If you DO have a graphically orientated website then getting your images in say "google image search" can be a great way to get traffic.

However, if your website isn't graphically based and most of your images revolve around
your templates, navigation, just generic stock images etc, you might not want these images showing up in search engines, this can also save you bandwidth.

If you add this in your robots.txt you will prevent google image bot from searching
your website:

User-agent : Googlebot-Image
Disallow: /


More information about how to create a robots.txt can be found here


A quick note regarding robots.txt and CMS (Content Management Systems)

If your website is using a CMS such as Joomla, Drupal, PHPnuke etc, check your
robots.txt to see what the settings are for google image bot.

Sometimes the robots.txt has been setup already to exclude this bot, or to excluded
it from certain directories on your site.

If you find the lines illustrated above in your robots txt you can just delete this line
to allow the bot.

If you have images which you want searched, but they are in directory that disallows
bots, you can take the particular directory off the list in the robots.txt, BUT, check with your CMS provider first for any other ramifications of allowing bots into the directory.



Sites for hosting your website images remotely

There are many sites out there where you can upload your images and "hotlink" them
into your website.

This is great if you don't have a lot of space on your server, or if you have a blog or another account such as MySpace.

Two image hosting sites I highly recommend are:

Photobucket

ImageShack


NB One thing you should NEVER do when adding images is hotlink from another
persons site. You could also be in for a nasty surprise if you do this, as if you are
found out, it doesn't take much for the webmaster to change the image to something
you wouldn't want on your site!!!


Free Images For Your Website

Here are a few links to places where you can find free images to use on your website.
As a rule though, always make sure you check the copyright on any images you use.

http://aarinfreephoto.com/

http://www.freefoto.com/index.jsp

http://www.freemediagoo.com/

http://www.freestockphotos.com/

http://office.microsoft.com/en-us/clipart/default.aspx

http://www.freeimages.co.uk/

http://www.freedigitalphotos.net/

http://www.sxc.hu/




Return to Graphics & Templates