Today's tutorial focuses on what brings the Web alive to the eyes: images. An image is inserted into a webpage using the IMG tag, which is self-closing. The image <img> tag is formatted like so:

<img src="image" alt="" />

The "src" portion is formatted as a relative or absolute image address in the same way as hyperlinks for the anchor <a> tag (with the exception of data images, which are beyond the scope of this tutorial). The "alt" attribute refers to alternate text that will show in place of the image under the following circumstances:
1. The image is loading.
2. The image does not exist.
3. Images are disabled for the browser.

Several image formats are supported by all major browsers, but it's generally safe to stick with JPEG, GIF, and PNG. Depending on the purpose of the image, each format has it's strengths and weaknesses.

JPEGs work best for photographs since they support true-color and greyscale and can compress those small with the lossy compression. Be aware that lossy refers to the way certain details in the images are discarded to allow for smaller file sizes. This can lead to smearing or JPEG artifacts, as they are called.

GIFs work best for low-color static or animated images that may have a single transparent color. Such images where GIFs shine are animated icons.

PNGs are the most versatile of the formats. They support low and high colors and can have alpha channel transparencies, allowing gradual transparent fades. PNGs can work with anything from icons to photographs, depending on how they are saved. Making use of all PNG features will result in larger file sizes.