Register now or log in to join your professional community.
Height and width allow an image to be downloaded quicker.
The alt attribute allows text to be added to an image for several reasons. This will ensure that
everyone with a browser (even if it does not support images) and/or disability (with the proper
equipment) can surf the Web without losing the sense of the content.
These three are most basic of attributes for making your images presentable in your web page.
height and width
You input the dimensions of your image in pixels into your HTML code. This tells the browser how much space to leave empty, ready for your image, ensuring that no post-load shifting goes on, and keeping your layout correct all the way through the download process.
Example:
To use this image on a web page you can use:
<img src="http://img.b8cdn.com/images/templates/bayt/4.0/bayt-logo2-en.png" height="76" width="250">
Giving the correct size has many advantages:
It stops the loading mess-ups
Your page appears to be loading faster, as everything is in place
If people have images turned off, they still get the same page layout
You can also change the size of the images displayed in the browser. Note that this does not change the filesize of the image. Nor will it make any permanent changes to the image. It is just twiddling the image in the browser, nothing more. All you do is put in whatever height and width you want.
The alt attribute
If you leave your mouse pointer over the bayt logo on top left of this page for a while a little box pops up with text in it
"Find, search, post jobs on Bayt.com - the Middle East's #1 job site"
That is the alt attribute at work. It was invented so that people who can't view images, or have them turned off, get an ALTernative, so that they at least know what would have been there. Use it like this:
<img src="logo.gif" alt="Find, search, post jobs on Bayt.com - the Middle East's #1 job site" >
This text will appear in the box waiting for the image to download too, so the reader knows what's coming. This is yet another reason to use height and width, as the text you input as an alt will stretch these boxes. With the attributes in place this won't mess anything up. Also, for any blind readers that you may have, the alt text is read out to them by their computer.
Cheers!
Thank you malik to invite me to answer this,
the height is not that much important we can set the value auto, but prefered to be compatible with all browsers.
the width is required to save image quality in the HTML5 if you didn't set fixed value for the image width it takes the image file width, and it's may conflict with the div contain the image and shuffle to take next div space.
the alt "alternate" has many use's if the image deleted the alt value appear instead the image, in seo that helps the image to be indexed, and in most of the browsers its appear over the image when mouse hover just like extra description for this image.
Nice discussion. I think nothing more to contribute. All participants take part in discussion wisely and seriously.
Regards
Every single web page contains a limited size and that size is calculated usnig pixels or px, the web developers are trained in such a manner that each and every pixel of the screen is utilized properly without affecting the design of the web page.
each image contains a certain amount of pixels and every pixel loaded takes a certain amount of time the larger the image , the higher amount of pixel.Thats the reason why the w3schools provided rules for web pages to make the web page more attractive,highly reliable,less usage of resources and ofcourse fullfilling the requirements of the clients.
Alt tag: It must be used to meet the W3C standards. It is used to get better SEO.
Width: Resizes (Adjust the width) the image according to the requirements, if not defined image will get100% width.
Height: To adjust the height of an image. if not defined image will get100% height.
