Website Promotion And Search Engine Optimisation (SEO)
Optimising Website Images
Fancy graphics can be attractive, they can say more than a thousand words. They have an impact, but the benefits of using text in a Website far outweigh the advantages of using Images. But Web searches are based upon content, content, and even more content!
The speed of a Website is important to visitors, and downloading large Images (or gimmicks like Adobe Flash) takes time. There is less than 10 seconds to capture their attention and convince them to look further. If the Web page takes a long time to load, a potential customer will be lost. Slow load times will also cause the Rankings 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. And most visitors find animated GIFs annoying – don't use them. For ideas on visual effects, see Web Design from Scratch
There are several factors to consider when optimising Images on your site:
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. 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 ADSL2 the download time is a very acceptable 2 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 has 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 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.
Scalable Vector Graphics (SVG)
Scalable Vector Graphics (SVG) is an XML-based vector image developed by the World Wide Web Consortium (W3C). SVG files will scale to any size without losing their precision. The CPU and Memory requirements are low. It uses its own version of CSS. Software is available to optimise the SVG file size.
SVG is supported by all the latest versions of the Browsers. Non-supported browsers versions, like Android 2.3 and IE8, can be ignored.
Image file size reductions can be achieved by the use of SVG for plain mathematical images – like logos, icons, diagrams, maps, and non-photographic images. Try convert to SVG and check if there is a reduction in size.
If a photograph (or clip art) is not original and it is not part of the public domain, it cannot be used without the permission of the owner. The problem is that it is difficult to be sure that an image that was originally free of copyright, is still free of copyright.
Bing and Google are the best source of Images - clip-art is mostly royalty free.
But beware! Getty Images tracks down unlicensed usage of their photos.
All <img> Tags should include a short 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, and can have a considerable effect on rankings. It allows more targeted traffic via Text searches and Image searches. If an Image is used as a Link, the ALT text must be used showing the destination. The ALT text should be short and to the point and definitely less than 100 characters in length.
Put relevant Keywords into the ALT text of Images. The contents of the ALT text can have a bearing on 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. It should contain appropriate Keyword phrases.
The Company logo needs careful treatment when it appears at the top of the Web page. A phrase in the ALT text may be found when doing a search, and the full ALT text shown in the SERP listing. The ALT text, one sentence of up to 100 characters, should be inviting enough to entice a visit.
The Title vs ALT Text
While the ALT text is used by a Search Engine to understand what an Image is all about (and is essential for Search Engine Optimisation), the Title Text is helpful to the viewer. The Title text is shown when the cursor hovers over the Image. Use the Title text when linking to another Website. About 7 words is sufficient.
It is important that the surrounding text and Image captions are consistent with the content of the picture.
Avoid Putting Text in Images
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
Google's advice: "Try to use text instead of images to display important names, content, or links. The Google crawler doesn't recognise text contained in images."
Having a Graphic artist design a beautiful Logo may look attractive, but the text in the image is wasted. Instead, the Text should be placed over the logo, to look like part of the graphic. When a Search Engine spider visits the page, the text will be incorporated into the indexed results.
Using CSS, the Logo at the top left-hand side of this page, comprises an image and the words "Neville Silverman". The result is a small Logo size – and text that is searchable.
Navigation and Images
Avoid using Images for the internal navigation links – the Search Engines will not be able to index the links. I know, the images can look cute, but there is a price to pay. At least make sure that the ALT attribute is optimally set.
CSS sprites can be used in Web optimisation as a way to improve download times. The Sprites concatenate small images into a larger consolidated file. Cascading Style Sheets are then used to display a selected image.
- The combined image file size is smaller than the total of the individual image sizes
- There is a reduction in Hypertext Transfer Protocol (HTTP) requests.
- Automatic pre-loading avoids any flicker
- Too many images in a Sprite can make the first image slow to display (but the rest will be immediate)
- Browsers can download Images asynchronously and simultaneously – so load speeds may not improve
- The <img> tag requires a src attribute - use a "#" (or better, use a <div> tag)
- It is simplest when all the images have the same height
There is a Visual Studio extension called "Image Sprites" which reduces the complexity of creating and displaying the Sprite.
The sidebar on the left-hand side of this Web page uses a Sprite to minimise server requests.