IMAGES
Before going in to code, it is important to have at least a basic understanding of the usual image types you will run into while coding in html. In most cases, you will need to decide whether to use a JPG or a GIF.GIFs are limited to 256 colors, but when working with images that include large areas of flat color (especially vector images), GIFs will usually be the filetype of choice. The less colors used, the smaller the file size.
JPGs work well with images that include many colors, such as photographs. There are numerous levels of compression that will govern the file size of JPGs, which can usually be reduced significantly without losing noticeable quality.
In both cases, smaller file sizes are critical in maintaining a sleek, quick-loading webpage. The difference between a page that loads in 2 seconds and a page that loads in 6 seconds can be monumental.
Images are included using the <img /> tag (one of the few tags that doesn’t close separately). There are two necessary attributes associated with this tag, as well as two highly recommended ones.
The first is naturally src, defining the source of the actual file being displayed. It can be a local file or an otherwise hosted url. Examples would look like so:
<img src=”pinkponies.jpg” /> - for an image in the same folder as the web page
<img src="http://i13.photobucket.com/albums/ mahstuff/pinkponies.jpg" /> - for an image hosted by Photobucket
It has recently become necessary to include the alt attribute as well, which will then display text when the image doesn’t load properly. It would appear as follows:
<img src=”pinkponies.jpg” alt=”Some Pretty Pink Ponies” />
It is also highly recommended to include the width and height attributes when defining an image. When these attributes are excluded it can cause the layout of a page to shift as a page loads. The code would simply be written like this:
<img src=”pinkponies.jpg” alt=”Some Pretty Pink Ponies” width=”400px” height=”300px” />
Ideally, all images on a page will include all of the information above.