HTML Images

Thursday, February 16, 2012

Previous tutorials in this series has covered how to add and format text on your web pages. However, images and other media generally transforms plain, unaesthetic pages, into interesting and captivating ones. Web users enjoy pages with images, but do not go overboard. Where to place your images is very important. You can either store them on a free public service site, or keep them all in a folder within the web site. I prefer to keep them with your site. This will allow you to move the images easily, in the event that you move your site. Having the pictures in a sub-directory will also allow you to create relative links, rather than absolute ones. Again, this makes your site very portable. The downside to hosting the pictures within your site is that you will most likely not be able take advantage of a content delivery network (CDN). The beauty behind a CDN is that your files are more efficiently delivered by determining the closest location to the requestor. It also provides you with a highly available source for your files. Another disadvantage to hosting your own images is that most providers limit the amount of space you can use to store your files. Make sure that you are saving images in a format that provides high quality, but doesn't take up too much file space. In any case, large files will take longer to download on your pages.

img Element

The img Element has no content, uses a self-closing tag and contains one or more attributes. The only required attribute is 'src', but to be XHTML compliant, you'll need to include the 'alt' attribute as well. In the event that the image cannot locate the image, the alternate text will be displayed. In addition, to help browsers render the images, you should include the width and height of the image. Make sure that you save the image with this width and height. Otherwise, the browser is going to have to do extra work to resize the image for the user. Here's the format for the img element:

<img src="image.gif" atl="alternate text" width=64 height=64>

  • img: this tells the browser that this is an image element
  • src: Provide the location of the image. You can use an absolute or relative link.
  • alt: Alternate text. If the browser cannot locate the image, the text is displayed in its place.
  • width: The width of the image in pixels.
  • height: The height of the image in pixels.

Image Formats

Various image file types are supported by all modern browsers. Some of the formats listed below will have a better quality, while others may support transparency. Which you choose is up to you.

  • Graphics Interchange Format (GIF): GIFs are commonly used. Files are generally smaller in size and browsers do well with this file type.
  • Portable Network Graphic (PNG): PNGs will ultimately replace GIFs. This format provide good quality, and transparency options. However, older browsers have problems displaying them.
  • Joint Photographic Experts Group (JPEG): This format supports compression. Files will take up less space. Sounds great, but compression requires additional CPU to uncompress images.
  • Bitmap (BMP): Not recommended for web pages. While Internet Explorer will render bitmaps, not all browsers support this format.

Tips on using images

  1. Don't overuse images. Too many images on a web page will result in a cluttered page. Keep your page clean and simple with a few images that are relevant to the content.
  2. Too many images will slow down your page. If the page takes too long to load, your users will close the page. Using sprites in combination with CSS will help if you have a lot of images.
  3. During the page loading process, the browser (not the web server) will make a separate request for each image that will be inserted into the page. Make sure that the images remain in a constant location. Otherwise, if the images cannot be located by the browser, your users will see the "broken link icon".
  4. Specify a width and heigh in your image elements. This will help keep the page rendering process stable as the browser holds the image's spot on the page while it fetches the files. If you do not specify the height and the width, the page will display "shifting" until all of the images are acquired.

Did you find the page informational and useful? Share it using one of your favorite social sites.

Recommended Books & Training Resources

HTML CSS and JavaScript Editor HTML CSS: The Complete Reference Creating Web Pages Simplified