Images

It is hard to imagine a website without images. Most people assume that adding a picture to a site is easy, that it may take a little bit of Photoshopping and that's it. This is actually not true, but it is all manageable. Being a photographer myself, I was disappointed to discover on my first time experimenting with HTML that putting text right next to a picture on a web page was painful. That was because I did not know enough CSS at the time.

There is actually only one HTML element needed to deal with images: the <img> tag.

<img> element and attributes

A typical piece of HTML containing an image would be:

<img  src="images/lupine.jog" alt="lupine" />

An img tag will never have any content inside so we always use the shorthand notation. The two attributes that are always present are src and alt. The value of the alt attribute is a text that will be displayed when the image file cannot be found or when device is used that cannot display images. The src attribute contains the path to the image file. An image file can be in one of many different formats: .jpeg, .gif, .png, .tiff, etc.

When no information is given about the actual size of the part of the screen that we want to use to display the image, it will be shown at its actual size, so beware of large image files.

Image width and height

There are two attributes you can use for this: width and height. This will cause the browser to render the image at the size you specify, but it is far better to not use these attributes at and specify the width and height in CSS. So give your <img> tag a class or an id tag to do so.

You will later learn that you even have the opportunity to specify different image sizes for different screen sizes when we are discussing responsive designs.

Either way, once you know what the largest ever size of the image that is going to be used is, create a version of your image file of exactly those dimensions to use on your site. If the original was larger, you will not force the visitor to download a large file that they do not need. If the original was smaller, create a quality image file at the larger size, so it will look good, rather than you relying on how the browser will extrapolate the image.