Images in HTML by G Krishna Chauhan


Things might seem a little bland and boring with all of this text formatting. Yeah, the web is not just about text, it is multi-media and the most common form of media is the image.
The img tag is used to put an image in an HTML document and it looks like this :

<img src="Source of Image" width="157" height="70" alt="Language center" />

The src attribute tells the browser where to find the image. Like the a tag, this can be absolute, as the above example demonstrates, but is usually relative.
For example, if you create your own image and save it as
'softtech.png' in a directory called 'images' then the code would be 

<html>
<head>
<title>My first web page</title>
</head>
<body>
<p>
<img src="softtech.png" width="157" height="70" alt="Language center" />
</p>
</body>
</html>



The width and height attributes are necessary because if they are excluded, the browser will tend to calculate the size as the image loads, instead of when the page loads, which means that the layout of the document may jump around while the page is loading.
The alt attribute is the alternative description. This is used for people who cannot or choose not to view images. This is a requirement in the latest versions of HTML.
Note that, like the br tag, because the img tag does not have a closing tag, it closes itself, ending with '/>'

NOTE :  

The construction of images for the web is a little outside of the remit of this website, but it is worth noting a few things...
The most commonly used file formats used for images are GIFs and JPEG. They are both compressed formats, and have very different uses.

GIFs can have no more than 256 colours, but they maintain the colors of the original image. The lower the number of colors you have in the image, the lower the file size will be.

GIFS SHOULD BE USED FOR IMAGES WITH SOLID COLORS.

JPEGs on the other hand use a mathematical algorithm to compress the image and will distort the original slightly. The lower the compression, the higher the file size, but the clearer the image.

JPEGS SHOULD BE USED FOR IMAGES SUCH AS PHOTOGRAPHS.

You need to strike a balance between image quality and image size. Most modern image manipulation programs allow you to compress  images and the best way to figure out what is best suited for yourself is trial and error.

No comments:

Post a Comment