top of page

Images in Web Pages & How to Make Them Work For You

Fancy graphics can be attractive. They have an impact, but the benefits of using text far outweigh the advantages of using images. Web searches are based upon content, content, and even more content!

The speed of a Website is important to visitors. There is less than 20 seconds to capture their attention and convince them to look further. If the Web page takes a long time to load, a potential customer visitor will be lost. Slow Web Pages can also cause a Website to be downgraded by the Search Engines.

So use Images sparingly - they should only be used if they relate and support the Web Page content.

There are several factors to consider when optimizing Images on your site:

File Names

Giving pictures an appropriate file name will help Search Engines determine content, especially for Image specific searches like Google's Image Search. For example, the Image above is called "Image-Handling.jpg", rather than naming it "XP1234.jpg". Use hyphens, rather than underscores.

Also for convenience, store the Images in a separate folder in Windows Explorer. The Images can then be sorted by size to see which will take longest to download.

Image Size and Quality

When both Image size and quality are important, this may cause a problem. Lower quality Images decrease load time, but detract from the visual effect required. High quality Images look great, but cause pages to load slowly.

For large Images, it is best to place a small thumbnail Image next to the description, and then link it to a high quality Image. As an example, see how Google handles the searching of Images. Twenty thumbnail Images are shown on a page. Using ADSL the download time is an acceptable 12 seconds.


It is essential that Images be optimally compressed. Properly optimised Images will decrease page load times and bring new visitors from Image searches. Ideally, the total size of all Images on a page should not exceed 10 KBytes. The Width and Height of an Image can be altered in the <img> tag. This is handy when displaying the Image, but the full size will still be downloaded. It is more efficient to resize a large image with graphics software before downloading. Even though the resized Image will have the correct dimensions, the Width and Height should still be set in the <img> tag.

Experiment with all the different Image Formats, using the highest compression that gives acceptable quality. Start with the .png File Type - it has lossless compression. Increase the compression ratio of the .jpg or .gif File Type whilst maintaining reasonable quality. Avoid using the .bmp format.

This is an analysis of the different File Types, using the Image on this page:

The File Type chosen was .jpg, with a 99% reduction from the original size! Note that the optimal File Type will vary depending upon the composition of the Image.

Alt Text

All Images should include an ALT text (shown when the user places the mouse over an Image) that describes the Image. The Alt text helps Search Engines understand the Image content and context. This in turn allows more targeted traffic via Text searches and Image searches. If an Image is used as a Link, the ALT text must be used.

Put relevant Keywords into the ALT text of Images.

The contents of the ALT text can have a bearing on the Ranking, and the ALT text may appear in the Search Engine Results Page (SERP) listings. Use the ALT text to make the Image user-friendly - and describe what the Image is depicting.

The Company logo needs careful treatment when it appears at the top of the Web page. A phrase in the logo ALT text may be found when doing a search, and the full ALT text shown in the SERP listing. The ALT text of the logo, of up to 160 characters, should be inviting enough to entice a visit.

Surrounding Text

It is important that the surrounding text and Image captions are consistent with the content of the picture.

Using Text rather than Images has multiple advantages:

� Text is easier to read � Text downloads faster � Text is easier to update � Text can be found by Search Engines � The text in an image can easily become distorted

Subscribe to our Virtual Assist USA mailing list

and never miss an update! Stay current with all new technologies and business tips and tricks! 

  • Grey LinkedIn Icon
  • Grey Facebook Icon
  • Grey Pinterest Icon
bottom of page