img tag is used to display images on html pages.
<img src="Dog-2.jpg" alt="Dog" height="200px" />
The above tag expects that the image is present in the same folder where our html page lies. We can also place the image in separate folder, but in that case we need to specify the path of the image.
alt
The text specified the alt attribute will be displayed in case the browser is not able to display the image specified.
height and width
Specifying the height and width becomes important on displaying an image on the browser. This helps to place the image in the expected position on the screen. If dimensions are not specified it will take the size of original image. This might not fit into our screen design. Moreover the size of the image will also add to our download size. In case we have slow internet connection, this might pose a problem as the page might take longer to load the page and can be frustrating for the user.
src
We have already discussed that the src attribute specifies the path of the image. We can also dynamically specify the path of the image. For example if we are displaying a page having students profile. The image of the student must be that of the logged in student. This can be achieved using JavaScript as follows:
var DogImage = document.getElementById (“imgDog”);
DogImage.src=” Dog-2.jpg”
An img tag with id imgDog must be present on the html page.
src=”” issue
Having src attribute blank for img tag can be bad for your site. When src is blank IE will search for the image in the root folder. Entire root folder will be browsed for the image. When the page is requested, the page gets loaded from the server. As the page renders the browser realises that there is blank src attribute in the image. IT makes another request to the server to fetch the image from the root folder.
This can be problematic. This will increase the traffic as there are 2 requests sent. If your site is rarely access it may not get noticed. However if your site is viewed by large number of users, doubling the traffic for the page for every user will increase the load on the server.
The same effect is observed if src attribute is left blank via JavaScript.
var DogImage = document.getElementById (“imgDog”);
DogImage.src=””
In such cases we need to have img tag without specifying the src tag as shown below.
<img alt=”DOG” />
All we can do is make sure that you don’t leave the src attribute blank in any case. Just adjust you logic keeping this in mind to implement the requirements.
I recently read in some article that this issue has been addressed in HTML5. Hopefully we will not have any such issues in future.
