HTML Images

When using images within a webpage, it is important to use images that are in the proper format.

Formats

There are three main image formats used on the Internet:

GIF
JPEG
PNG

GIF

One of the most popular image format used on the Internet is the graphic interchange format, better known as GIF. This image format uses a maximum of 256 colors and is best suited for creating logos and images that have solid colors.

GIF images can be saved in two different formats:

87
89a

The 89a format is the preferred GIF format, as it has the following benefits:

Transparency

Images saved in the 89a GIF format can have a transparent background. This will enable the canvas of an image to be transparent and enable the background to show through.

Interlacing

Images saved in the 89a GIF format can be saved as interlaced. This will enable your image to display as it is being loaded into a webpage. The image will gradually become clearer as the page loads.

Animation

Images saved in the 89a GIF format can be used to create animated images. Animated images are simply several GIF images compiled into one GIF image file that loops. In order to create an animated image, you’ll need a special editing program.

JPEG

Joint Photographic Expert Group, better known as JPEG, is the best format for photographs. This format supports up to 16.7 million colors and allows you to specify the degree of compression. The file size can be fairly small, but the images remain sharp and vivid. Similar to interlaced GIF images, progressive JPEGS can display as it is being loaded within a web page. They start out blurry and come into focus as the page loads.

PNG

PNG was developed as a replacement for the old GIF format. It supports lossless compression, which means that the image data isn’t lost when it is saved or viewed.

PNG can be saved as 8 bit, 24 bit, 32 bit, up to 64 bit and has higher transparency support than the GIF. What’s more, the PNG filesize is approximately 20% smaller than a GIF image.

Although the PNG format is better than the GIF in many ways, unfortunately, it doesn’t support animation, which GIF does.

Displaying an Image

To display an image in HTML, you must include the <img> tag with the src (source) attribute. However, as the <img> tag is empty, it doesn’t have a closing tag.

Prior to placing an image within a web page, it must be placed on your web server. This can be accomplished using your web admin panel or an FTP (File Transfer Protocol) program. Once the image file is on your server, you will need to create a link to the file within your web page. For example, if you place an image on your server named ‘dog.gif,’ within the ‘images’ directory of your doghelp.com domain, your link would look like this:

Image Attributes

Align
Width
Height
Border
Alt

Align

Alignment enables you to specify the position of your image, including all of the following:

Left
Right
Top
Bottom
Middle

Width

Your image’s width displayed in pixels.

Height

Your image’s height displayed in pixels.

Border

If you’re linking your image, you’ll want to set the border value to 0. If you don’t, your image will be displayed with a link border around it.

Alternate Text (Alt)

Your ALT text will be displayed when your visitors have their graphics turned off or when they place their cursor over the image. This text can be used to describe your image and should contain your most relevant keywords for good Search Engine positioning.

This concludes the HTML images tutorial. In the next section, we will focus on HTML tables.