Images are an important part of every page and adding a few of them will really make your page more attractive. It is quite easy to add an image to a web page, but there are several things to keep in mind while adding images to balance the performance and quality. In this post, I have described how to add an image and also the various parameters that goes along with the <img> tag.
The basic syntax for adding an image to a web page is as follows:
<img src="url" alt="some_text"/>
Here the url specifies the url of the image to be loaded and the some_text specifies the alternate text to be displayed in case the image cannot be loaded. The alternate text will be useful to those users having a slow internet connection. They will see the alternate text initially where the picture needs to be loaded, and when the image is downloaded, the text will be replaced by the image. The parameter alt is optional, that is you can just use the <img> tag with the parameter src to display the image.
Another two useful parameters to the <img> tag are width and height. These can be used to specify the size of the image displayed. By default both values are in pixels.
<img src="url" alt="text" height="100" width="100" />
The above code will reserve an area which has a width of 100px and a height of 100px. The advantage of using height and width parameters is that, the layout of your page will remain intact even if the image fails to load. Another thing to note is that, your image might get stretched or compressed if you don't maintain the aspect ratio. Also try to always use the images that are of the required size. Don't use a large image and display a small version of it but setting the height and width to a small value. This will result in longer page load time.
The next parameter is align. It can be used to align the image with respect to the text. It can take three values bottom, middle and top with bottom being the default. It can be specified as follows:
<img src="url" alt="text" height="100" width="100" align="top" />
Experiment with the other values of align to get the proper idea.
You can make an image as a link. This can be done by placing the image within the <a> tag as follows.
<a href="url"><img src="imgUrl" alt="text" height="100" width="100" /></a>
You can also create a link for a part of an image. That is different parts of an image can act as different links. This can be achieved using image maps. The details on using image maps will be explained in another post dedicated to it.
Images makes you web page more attractive but it is one of the most important reason that makes you page slow. So always compress your image and crop it to the required size before uploading. Now go and try it out for yourself and make your web page colourful.
The basic syntax for adding an image to a web page is as follows:
<img src="url" alt="some_text"/>
Here the url specifies the url of the image to be loaded and the some_text specifies the alternate text to be displayed in case the image cannot be loaded. The alternate text will be useful to those users having a slow internet connection. They will see the alternate text initially where the picture needs to be loaded, and when the image is downloaded, the text will be replaced by the image. The parameter alt is optional, that is you can just use the <img> tag with the parameter src to display the image.
Another two useful parameters to the <img> tag are width and height. These can be used to specify the size of the image displayed. By default both values are in pixels.
<img src="url" alt="text" height="100" width="100" />
The above code will reserve an area which has a width of 100px and a height of 100px. The advantage of using height and width parameters is that, the layout of your page will remain intact even if the image fails to load. Another thing to note is that, your image might get stretched or compressed if you don't maintain the aspect ratio. Also try to always use the images that are of the required size. Don't use a large image and display a small version of it but setting the height and width to a small value. This will result in longer page load time.
The next parameter is align. It can be used to align the image with respect to the text. It can take three values bottom, middle and top with bottom being the default. It can be specified as follows:
<img src="url" alt="text" height="100" width="100" align="top" />
Experiment with the other values of align to get the proper idea.
You can make an image as a link. This can be done by placing the image within the <a> tag as follows.
<a href="url"><img src="imgUrl" alt="text" height="100" width="100" /></a>
You can also create a link for a part of an image. That is different parts of an image can act as different links. This can be achieved using image maps. The details on using image maps will be explained in another post dedicated to it.
Images makes you web page more attractive but it is one of the most important reason that makes you page slow. So always compress your image and crop it to the required size before uploading. Now go and try it out for yourself and make your web page colourful.
No comments:
Post a Comment