Menu
I found a similar question here, with the answer: "you should always define the width and height in the image tag." But it is from 2009.
In the meantime, many things has changed on frontend. We are all doing responsive page design now, for many devices and sizes simultaneously (mobile, tablet, desktop...).
So, I wonder is it still necessary to specify the width and height attributes, and for what reason (for responsive, page speed, SEO...)?
915
Adding the height and width attributes to your IMG SRC HTML tag allows the browser to know how much space to leave for an image. Without these values, the browser doesn't initially create a space for the image, which means elements surrounding the image are adjusted after it has loaded.
If you do not supply height and width explicitly the <img> element will be rendered at 0x0 until the browser can size it based on the file. When this happens it causes a visual reflow of the page once the image loads, and is compounded if you have multiple images on the page.
By declaring width and height properties on your HTML tag, you are controlling the size of the image to be displayed, specially if the image size is too large and would fit in the entire webpage.
The height and width of an image can be set using height and width attribute. The height and width can be set in terms of pixels. The <img> height attribute is used to set the height of the image in pixels. The <img> width attribute is used to set the width of the image in pixels.
An img element has width and height attributes, but they're not required under any DOCTYPE.
Width and height attributes were only 'required' or relevant to reserve the space on the page and prevent the page moving around as it loads - which is important. This can be achieved using CSS instead providing the CSS loads quickly enough - it is likely to load before the images anyway, so all should be good.
It is also possible (and valid) to specify just one attribute, width or height and the browser will calculate the omitted value in order to maintain the correct aspect ratio.
You can specify percent values in the attributes if required. You don't need to use CSS for this, if that is what you are implying.
Also, it is relevant to add - Under HTML5 the width and height can only take a pixel value, in other words a valid non-negative integer.
Whether you use the width and height attributes can depend on your design. If you have lots of differently sized images, do you want to lump all the dimensions in the CSS or include them with the img?
168
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
