What is Image Hosting?
Image Hosting is basically putting your pictures onto the Internet. Many ISPs provide free image hosting, and other sites like geocities, yahoo or even a search for free web hosting will give you plenty of free image hosting space. This search engine optimization tutorial is how to use images to increase your web site traffic.
How do Images Help?
Search engines correctly assume that a page with pictures usually has more content and is of higher value to surfers than just a plain text document.
How to Correctly Use Images
The three main things to consider when using images are:
- file size ( keep pictures less than 20kb if possible )
- file name ( name the picture properly )
- alt tags ( give proper alt tag text )
How Do I Keep My File Size Down?
Make sure you save your picture in the proper format. Here is a list of the common formats:
- TIF - no compression, used for working on files.
- JPG - great compression, for lifelike photos only.
- GIF - good compression, but for text or pictures with only a few colors.
- PNG - license free alternative to gif, larger file sizes
- BMP - don't use this on your webpages, windows only, large files
Usually I work in TIF and save as either JPG or GIF depending on if it is a photo, or not. JPG allows you to throw out some of the picture quality in order to reduce size. Almost all programs that can save as JPG have an option for this somewhere. Play with the quality versus file size until you have a small picture. Try to keep them below 20k.
People on DSL and Cable can likely see your pictures fine, even if they are very large. But people on dialup usually only get about 3k per second. So a 20k picture takes them 6 seconds. One picture is fine at this speed, most people though require a total of about 300k if they do not optimize. Who will wait 100 seconds for a page to load?
What is a Good Way to Name my Images?
If a search engine is going to give you credit for a good picture on horses for example, it will likely score you higher for a file named horses.jpg than 2311.jpg. Name your files accordingly. It makes it easier for you to manage them, and search engines give you a slightly higher score for images that are named properly.
Throughout this site we avoid putting spaces in filenames. Search engines correctly parse hyphens, so a filename-like-this.jpg is actually read as 3 keywords ( filename, like and this ).
Windows system are not case sensitive, so Horse.jpg and horse.jpg appear as the same file. Linux, which most servers use is case sensitive. For this reason it is a good idea to stick with one naming convention. We prefer all files in lowercase, but you are free to name them as you wish. If you know they are all lower case, it makes it easier to code without mistakes.
How are Alt Tags Used for Images?
An alt tag is alternate text to display while the image is loading. It is also what appears if you hover over the image with your mouse. Here are two examples, one has alt text, and the other does not. Hover your mouse over each of these pictures for a few seconds:
There are a few reasons to use alt text. Search engines give you bonus points for them, and visually impaired browsers can understand what your pictures are about. You can have really long alt tags, but you only need to make the image alt tags long enough to describe the picture. Use a few keywords appropriately, and your images will be search engine and human friendly.
What is the HTML Code For Images
<img src="/path/to/your/file.jpg" alt="some alt text" height="100" width="100">height and width are used to show a placeholder of a certain size before the actual picture data is downloaded. It is a good practice to use those tags, but they do not help search engines at all.