In order to add an image to a webpage, the <img> element must be used. This particular element has no closing tag, and so it is referred to as an empty element. Within the <img> element, there are several attributes that must be included. The first attribute is the src, which is essentially a URL that communicates to the browser where to find the image. For instance, the src will tell the browser which folder the particular image can be found in. The next attribute is alt. The alt portion of the <img> tag contains text that describes what the image is portraying. This text is absolutely necessary because it allows users who cannot see the image to listen to the description through text-to-speech software. The next attribute is the image title. The title simply contains more information about the image that a user can access, usually by hovering over the image with their cursor. The width and height values of the image are often included within the <img> tag. These values tell the browser how much room needs to be allocated for the image to fit nicely on the webpage, as images generally load slower than text on a webpage. An example of how an image is coded in HTML is as follows:
<img src="images/quokka.jpg" alt="A family of quokka" title="The quokka is an Australian marsupial that is similar in size to the domestic cat." width="600" height="450" />
The first of these rules is to make sure that any images for the web are saved in the correct format. Generally, image formats such as jpegs, PNGs, and gifs are used most often when exporting images for the web. If a different image format is used, such as bitmap, then the image will not look nearly as clear and legible as it should. The second rule is to save images at the correct size. Essentially, the image should be saved at the exact same size as the size specified within the <img> element. If the image is smaller than the size specified in the HTML, it will become warped and stretched as the screen changes size. If the image is larger than what is in the HTML, it may take a long time to load on the webpage, which is a major issue when it comes to keeping a user’s attention. The third rule is to measure images in pixels. The reason for this is because all computer screens are made up of pixels. Therefore, if a user changes the resolution of their screen, the image needs to be in pixels, and not something like inches, in order to adjust properly.
The first of these two types of layouts is the fixed width layout. With this layout, the width of the webpage does not change, regardless of if the browser window changes in size. Some advantages to a fixed width layout are as follows: pixels values are more accurate at determining the size and position of elements, the designer has a lot more control over how the layout looks than with a liquid layout, and any images on the page will always remain at the same size. However, a fixed layout also has a lot of empty space on the sides of the page that cannot be filled. The fixed layout also suffers when a user uses a different resolution than the resolution of the designer’s screen. Furthermore, if a user increases the font sizes on their screen, the page’s text will not fit correctly. Contrarily, with a liquid layout, the webpage expands to fit larger screens, eliminating empty spaces, and shrinks to fit smaller screens. A liquid layout is also friendly toward larger font sizes than were originally used to make the site. However, a liquid layout comes with its own set of issues. For example, if a screen becomes too large, text lines can expand and become so long that they are a pain to read, and they can also become smashed together if the screen becomes very small. Also, fixed elements in the site’s layout, like images, can overflow onto the text if the screen becomes too small for the image's original box. Ultimately, a liquid layout can end up looking very different than what it appeared like on the designer’s screen.