CODEWITHSUNDEEP
htmlcsshttpjpeg
surfer01
surfer01

Reputation: 349

Does setting the real HTML height and width of an image decrease load time?

I have an website and I want to improve it's performance. I've fixed all common issues but I have two questions:

1) Let's say I have a 100x100px image and I want to show it. Does this <img src=" test.jpg" height=100" width="100" alt=""> load slower than this <img src=" test.jpg" alt=""> ?

2) Let's say my domain is www.test.com. Do HTTP absolute paths on the same domain load slower than relative paths ?
Is <img src=" http://www.test.com/test.jpg" alt=""> slower than <img src=" test.jpg" alt=""> ?

Thank you !

Upvotes: 1

Views: 1363

Answers (6)

Jacob
Jacob

Reputation: 78850

In both of these cases, the answer depends on the browser implementations. These are some speculations:

Let's say I have a 100x100px image and I want to show it. Does this 'img src=" test.jpg" height=100" width="100" alt=""' load slower than this 'img src=" test.jpg" alt=""' ?

The load time shouldn't change significantly. There may be some extra processing time since the image scaling logic would be triggered, but there would be less time in recomputing the layout, since once the image loads, it won't affect how much space it occupies.

Let's say my domain is www.test.com. Do HTTP absolute paths on the same domain load slower than relative paths ? Is 'img src=" http://www.test.com/test.jpg" alt=""' slower than 'img src=" test.jpg" alt=""' ?

The relative URL may be slower in case the domain name has to be requeried, but in most cases, the requests will be pipelined, so you shouldn't see any real differences.

Upvotes: 0

Dennis Traub
Dennis Traub

Reputation: 51634

A few bytes probably don't make that much of a difference in the day and age of 1080p video streaming. Minifying JavaScript, compressing images and such probably has a much greater effect.

Upvotes: 0

hanzolo
hanzolo

Reputation: 1150

1). The images download will be the same no matter what the image attributes are set to.. the browser still has to download the same amount of content.. the image should be optimized to its use

2). Use relative paths.. otherwise the browser travels through the web to get back to the image when it's sitting in a relative directory

I just did some quick googling and found this link:

here's some info http://www.boogiejack.com/server_paths.html

google "relative vs absolute image paths SEO"

Upvotes: 0

Mark Ransom
Mark Ransom

Reputation: 308121

Giving the width and height of an image keeps the layout from changing after the image is loaded, which would save a redraw. That should make it faster.

Upvotes: 0

cambraca
cambraca

Reputation: 27839

1) It will definitely not load any faster if you set the width and height, although it will look better on the browser because when you don't specify them, the browser will use a standard size and when the image loads it will change to the actual size, so you'll see everything move (reflow).

2) Not at all, the browser determines the absolute path anyway, so the request for the image is exactly the same.

Upvotes: 1

Quentin
Quentin

Reputation: 943207

Specifying the dimensions allows the browser to create a correctly sized space for the image before it has loaded it. This avoids reflows of text when the image does load.

Absolute URIs are longer than relative URIs so make the HTML document containing them take longer to download … by a negligible amount.

Upvotes: 0

Related Questions