Image Pages Logo - Fractal Image  

Image Pages


Image Pages > About Us

Image Page Examples
yellow duck picture Quality digital images, in the form of photographs and illustrations, can be quite effective for increasing website traffic, so it is helpful to understand how web images are displayed and how you can use them to advantage.  Images are stored as individual files and are displayed using the <img> element in the HTML document.  They are stand-alone elements and are placed inside other block elements.  An example of this, for a digital image of a yellow duck, is as follows:
  • <div>
     <img src="yellow-duck.jpg" >
The web browser reads this image specification, sends out a request for the JPEG-format image file, and then inserts the image file onto the web page in the position you have specified.

city skyline illustration 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:

  • <img src="yellow-duck.jpg" alt="yellow duck picture" >

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:

  • <img src="yellow-duck.jpg" height="250 width="200" >

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:

  • <img src="yellow-duck.jpg" style="vertical-align:top" >

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:

  • <img src="yellow-duck.jpg" align="left" >
Other options for positioning an image include specifying borders and white space around an image.  This example displays a one pixel-wide border around the image:
  • <img src="yellow-duck.jpg" border="1" >

Of course, any or all of these attributes can be combined in a single img tag.

abstract digital image 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!

collage of digital images
Digital Images Collage

Copyright ©
All rights reserved.  About Us.

Image Pages - Digital Images - Photographs and Illustrations