/    Sign up×
Community /Pin to ProfileBookmark

Images, sizes (height/width), and CSS

Copy linkTweet thisAlerts:
Jun 01.2004

I have read before that it is best to explicitly state the size of an image used in a page using the height and width attributes in order to have it render the fastest. My question is whether or not it is better, worse, or makes no difference if you put the height/width in a CSS stylesheet vs. having the attributes inline in the img tag.

[code=php]
<img src=”myImg.jpg” height=”10″ width=”10″>
[/code]

versus

[code=php]
.myImg {
width: 10px;
height: 10px;
}

<img src=”myImg.jpg” class=”myImg”>
[/code]

to post a comment
CSS

1 Comments(s) ↴

Copy linkTweet thisAlerts:
@David_HarrisonJun 01.2004 — Well if you had a lot of images all the same size then the page would download quicker if you gave the images a class and set the dimentions like in your second example.

Some old browsers don't support CSS though, so if you were to specify the dimentions with CSS they would have to wait for the image to download before they were the right size, which means that content would be continually shifting round on the page as more and more images are downloaded.

It seems that Mozilla completely ignores any dimentions specified if an image is not downloaded though which I find quite annoying.

Overall I think it is best to specify image dimentions with styles though (unless you are using inline styles). The width and height attributes are not depreciated though, so they must still serve a purpose.
×

Success!

Help @wood_tah 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 5.7,
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: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

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