img tag in HTML

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.

Expressions in CSS

CSS Expressions, also called Dynamic properties are used to assign CSS code with calculated and dynamic values. CSS Expressions are JavaScript embedded within CSS. They are completely JavaScript dependent. Values are assigned to CSS code through JavaScript calculations during run time.  

<DIV ID="myDiv"

  STYLE="left:expression(document.body.clientWidth/2-oDiv.offsetWidth/2);

         top:expression(document.body.clientHeight/2-oDiv.offsetHeight/2)">

My text goes here...

</DIV>

Is it really good?

We just discussed that expressions are JavaScript dependent. This means that it required the browser to keep JavaScript enabled on running the pages using expressions. Expressions will not be functional if JavaScript is disabled.

We may feel that expressions are calculated once when the control loads or at event where we have implemented it to be fired. That is not true. Expressions are evaluated consistently when we are on the web page. Even a simple operation like scroll, hover over the control etc will cause the expression evaluation.This is easily observed if expressions are used to freeze data grid headers in aspx pages. Each time you scroll you can observe a shake on the header. This makes use of most of our client resources. Next time if you notice any slowdown in your browser and not able to find any reason, look for expressions.

Then why do developers use this?

Internet Explorer version 7 and below are not fully compliant with cascading style sheets (CSS) and hence we had to go with alternate and easy way of using expressions in CSS.

Is there any alternate for IE7 and below?

JavaScript can be used directly in most of the cases instead of CSS expressions. The above example can be implemented in JavaScript as given below –

window.onload = setWidth;

Function setWidth(){

document.getElemenById(“myDiv”).style.left = body.clientWidth/2-oDiv.offsetWidth/2;

document.getElemenById(“myDiv”).style.top = document.body.clientHeight/2-oDiv.offsetHeight/2;

}

CSS Expressions are no longer supported in IE8. However it can be made to work by running Internet Explorer in IE7 mode or below. We know that expressions in CSS hit performance. Despite that sometimes we will need to end up going for it. However before writing expressions just remember that they affect performance and are less reliable. Always consider JavaScript instead.