Author: M Abo Bakar Aslam

Images

Images play a vital role in enhancing the visual appeal and user experience of a web page. In this section, you will learn how to use the HTML <img> tag to embed images effectively, along with essential guidelines for setting attributes, controlling dimensions, and maintaining responsive design. Proper use of images not only improves layout but also ensures better performance and accessibility.

1. The <img> tag

This tag will be used to set image in your HTML layout. You must follow below suggestions when you will use this tag.

a. This tag has no closing tag like but you must close it by using forward-slash / before its ending-angle-brace >. It means this tag will be opened and closed like as <img />. HTML will not generate error, if you will not close this tag. But modern frameworks like JavaScript's framework does.

b. Set name of your image file in value of src attribute of this tag.

c. Write some information about image in value of alt attribute. It can be skipped but not suggested. When image is not displaying by any reason (slow internet, server not responding etc), then the value of alt attribute will be displayed in place of the image-file.

d. Always specify width and height in the tag. These can be specified in either HTML tag or inline-styling.

e. The tag should be closed inside a <div> container whose width and height should be set according to the design of web-page layout. In other words, it is the area in which you want to display image.

Moreover, set width as 100% and height as auto inside or vise versa.

• Width and height for image-displaying-area will be specified by using inline-styling.
• Don’t upload image having width and height much higher than specified area. If do so, then you will compromise the website speed with gaining nothing
• Either width or height should have values as auto, while the other have value as 100%. In this way, one parameter will be set by you/design and other value will be auto adjusted (100%, 90%, 20% or whatever according to design).
• If you will handle this tag properly, then it will ruined the design of your web-page.

2. Applied Suggestions 1-3 in <img> tag

<img src="photo.jpg" alt="Learning IT Courses" />

Notice following in output

a. If image is too large, then it will flow out of the screen.
b. If image is too small, then it will not increase/fit to its specified area.

3. Applied Suggestion # 4 in <img> tag

Using HTML tag, set width and height in the <img> tag

<img src="photo.jpg" alt="Learning IT Courses" width="100%" height="auto" />

Using inline-styling, set width and height in <img> tag

<img src="photo.jpg" alt="Learning IT Courses" style="width:100%; height:auto;" />

Notice following in the output:

a. The problem that you faced in previous section, will be remove in this section.
b. The width and height properties will fix the image to specified area related to its design.

4. Applied Suggestion # 5 in <img> tag

<div style="width:500px; height:600px;"> <!--image-container -->
    <img src="photo.jpg" alt="text" style="width:100%; height:auto;" />
</div>