Image Pages > About Us
While it is fairly easy to add digital images to your website, certain protocols will make them more search engine friendly. First, make sure that you are using the most appropriate format for your image. GIF (Graphics Interchange Format) files support up to 256 colors and work best for small graphics like clip art or simple logos. JPEG (Joint Photographic Experts Group) format is suitable for photographic images that can be compressed to download more quickly. PNG (Portable Network Graphics) format is useful for a wide variety of images; this format supports transparency but it doesn't compress well, and early browsers did not support it.
Since viewers are naturally drawn to pictures, make sure the photos and illustrations you choose have a relevant connection to the content on your web page; otherwise they can distract from it. Label the picture if its relevance to your content is not immediately apparent. Always use the alt attribute, which specifies the alternative text that a browser will display if it can't display the image. Alt text is sometimes displayed as a pop-up message that appears when the mouse is moved over the image. Here is an example of alt text that is used to identify a photo:
Edit your images to an appropriate size so as not to distract from your content. Most image-editing software enables pictures to be cropped, resized, and compressed, but cropping often produces a cleaner image than shrinking a larger photograph. Lossy compression will compress an image file more than lossless compression, but it will also reduce the quality of the image; lossless compression preserves image quality at the expense of less image file size reduction. File size will determine an image's load time, and photographic images can usually be compressed in size without appreciable loss of image quality.
Image display size can be specified via height and width attributes. While many web designers leave out these attributes, some add them, using the same dimensions as the original picture; this enables the browser to lay out the page appropriately while the image is downloading. This also helps avoid the error icon that may appear in place of the picture when a browser can't download an image of unknown dimensions. This example illustrates the use of the height and width attributes:
Unless otherwise specified, browsers will insert an image onto the page sequentially, with no distinction from the surrounding HTML text. When trying to align a small picture, the vertical-align CSS property can be used to specify a top, middle, or bottom alignment. For example:
For aligning an image to the left or right of surrounding text, the deprecated align attribute can also be used. This attribute will cause subsequent text to flow, or wrap, around the right or left side of the picture. This example aligns the image to the left side of the page and wraps text around the right side of the image:
Of course, any or all of these attributes can be combined in a single img tag.
Relevant pictures are an effective means of increasing traffic to your site. Vibrant photos attract visitors and encourage them to stay longer and browse more pages. Learning a few simple guidelines and spending time to ensure that your images are properly formatted and displayed will go a long way toward increasing search engine visibility.
This website provides links to a myriad of image page examples that are organized by category. Many of these images are used under license from royalty free photo agencies. Hopefully, these examples will provide some ideas and inspiration for your website design and development efforts!
Digital Images Collage
Copyright © 2012- Image-Pages.com.
All rights reserved. About Us.
Image Pages - Digital Images - Photographs and Illustrations