CODEWITHSUNDEEP
htmltwitter-bootstrap-3
Seilche
Seilche

Reputation: 33

Img-Responsive with Width and Height Attributes

I was checking my website speed at GTMetrix.com. On the Page Speed tab their was a recommendation to specify the image dimensions for images.

I am using a Bootstrap website.

The images on my site currently have the following html

<img class="img-responsive" src="the-path">

Their is a recommendation at GTMetrix that states that these images are missing width and/or height attributes.

I have always assumed that I should not put a specific width and height attribute on my img's when they have the img-responsive class.

Can you advise if width and height dimensions should be included on every img on a Bootstrap website even when the img-responsive class is being used.

Upvotes: 0

Views: 984

Answers (2)

Justas
Justas

Reputation: 38

try to use http://www.w3schools.com/cssref/pr_dim_height.asp

using properties as: px change to vh(vertical height) or hh(horizontal height)... example:

height: 80vh; width: 40hh;

the size of 1 vh or hh depends on screnn size

Upvotes: 0

Brad
Brad

Reputation: 163301

The recommendation for setting a height and width exists so that the page does not have to be completely redrawn from scratch with a new layout once the image loads. If you pre-set the image size, then the layout remains the same after it loads, which is more efficient and also prevents somewhat jarring movement for the user as the page still loads.

When it comes to any design, if you expect a dynamic image size and your page can handle that, then there is nothing wrong with leaving the height/width unspecified. It's just an optimization technique. Value a functioning site over optimization.

Upvotes: 1

Related Questions