/    Sign up×
Community /Pin to ProfileBookmark

Image height and width revisited

Copy linkTweet thisAlerts:
May 23.2020

I have always read and been told that one should _always_ specify height and width attributes in an img opening tag, but a colleague questioned this recently. I have several questions related to this issue, the answers to which might help us nail down what’s proper procedure these days.

I’ve always been told that browsers (smart phone, desktop, whatever) will load pages _faster_ if one specifies the height and width as img tag attributes. Is this still true, and is there a definitive reference on this?

It’s possible to specify height and width as CSS properties in an image’s style attribute. Is there any advantage or disadvantage in doing this as opposed to specifying these as attributes?

Other than having to load larger files, is there an advantage to specifying image height and width _exactly_. It always seemed obvious to me that specifying image dimensions in an img tag other than the actual dimensions of an image would force a browser to resample the image, eating up processor time and slowing down page loading. Is this the case?

to post a comment
HTML

3 Comments(s) ↴

Copy linkTweet thisAlerts:
@SempervivumMay 23.2020 — that browsers (smart phone, desktop, whatever) will load pages faster if one specifies the height and width as img tag attributes.[/quote]I doubt this but I know about this recommendation too. The true reason is given e. g. here at w3schools:

https://www.w3schools.com/tags/att_img_width.asp
Tip: Always specify both the height and width attributes for images. If height and width are set, the space required for the image is reserved when the page is loaded. However, without these attributes, the browser does not know the size of the image, and cannot reserve the appropriate space to it. The effect will be that the page layout will change during loading (while the images load).[/quote]

It always seemed obvious to me that specifying image dimensions in an img tag other than the actual dimensions of an image would force a browser to resample the image, eating up processor time and slowing down page loading.[/quote]It is true that resampling of the image is required but I doubt that there is a significant impact on processor time and page load. But there is another aspect: Resampling reduces the image's quality. However there is one more aspect and this one is opposite: Nowadays you can't do without responsive behaviour of your site and mostly this requires resizing images based on the size of the viewport.

One more aspect is discussed at w3schools:
Tip: Downsizing a large image with the height and width attributes forces a user to download the large image (even if it looks small on the page). To avoid this, rescale the image with a program before using it on a page.[/quote]
Copy linkTweet thisAlerts:
@fmouseauthorMay 25.2020 — Thanks, Sempervivum. I've read much of the material on this subject at w3schools, which is always helpful, but sometimes lacking in detail (and occasionally erroneous). I was hoping for for something a bit more technical, but it's not mission critical to our work, just something we've discussed and about which we're curious.
Copy linkTweet thisAlerts:
@KeverMay 26.2020 — It's possible to specify height and width as CSS properties in an image's style attribute. Is there any advantage or disadvantage in doing this as opposed to specifying these as attributes?[/quote]
The w3schools text doesn't clearly state you should specify the actual dimensions of the image, not the width / height you want it to display. When you this the browser can calculate it's aspect ratio before the image is downloaded. So for an 800 x 200 image you could do something like <img width="800" heigh="200" style="width: 50%"> and have the browser calculate the height before the image is loaded.
×

Success!

Help @fmouse spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 4.26,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...