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.
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.
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
Related
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...)?
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?
YES, you want to declare the width and the height of an image in 2016.
To make them retina-ready
If you want your image to be retina-ready, you should define a width and an height lower than the actual pixels. If the image is 800x600 specify <img width="400" height="300" />.
To avoid page jump
Without the width and the height the image does not know how large it is, which causes an unwanted jump in the page as it loads (it reflows). Declaring height and width solves this problem.
Note that:
Images with a defined width and height can still be responsive. Simply add max-width and max-height to your CSS. This will cause the image to scale down (not up) when it does not fit the screen (see this sweet retina-ready, responsive kitten). Defining a min-width and min-height will do the opposite.
Adding a huge amount of compression to your JPG (around 50%) to keep the file size low is recommended when you use a single (relative large) image for all screen sizes.
Well, the basic answer to this question (as with most coding issues) is this: it depends on the situation at hand.
I would say that the “best practice” of always specifying the height and width attributes of images making a significant difference to page rendering speeds hark back to the days when designers laid out their websites using tables and spacer GIFs. We have come a long way since then.
An indication for the future is the introduction of the new picture element being drafted into HTML. The picture element is effectively a wrapper for the existing img element, which allows you to specify several images of different sizes via a source element, and the user-agent itself actually determines which version is used.
<picture>
<source media="(min-width: 64em)" src="high-res.jpg">
<source media="(min-width: 37.5em)" src="med-res.jpg">
<source src="low-res.jpg">
<img src="fallback.jpg" alt="This picture loads on non-supporting browsers.">
<p>Accessible text.</p>
</picture>
As you can see from this example code above (taken from the Intel Developer Zone's article on the HTML5 picture element) there are no height or width attributes on the img element itself.
Here are a selection of resources that will help you to decide the most appropriate method of declaring image sizes:
Responsive Images Community Group
W3C Working Group Note: Use Cases and Requirements for Standardizing Responsive Images
WHATWG HTML Living Standard: The picture element
Good standards are always worth a recommendation. With a little extra code it's quite easy to merge static (px) values of the img tag and generic (em, %) values supplied by CSS. And simpler still, get rid of the img tag altogether and set the picture as background of a div with a unique ID. If you have multiple images, use sprites and assign each picture to its corresponding div. Your mark-up sources would then look something like <div id="image_001"></div> - that's all. Scales all by itself; no need for bloatware like JQuery, etc.
If we're talking 'bout responsive, you may use bootstrap (if not, start doing this).
When working with images, you should add the class img-responsive, this will modify the width of the image if necessary and the height will be auto, so if width decreases, height will decrease too.
You will always have an image that keeps the same % of its container and will never loose the aspect ratio.
There's no relation with SEO and image size declarations.
Page speed will be the same always, so if the image is 800 x 600 px, you'll load the full image, even if you declare it as 60 x 40 px.
You must think that, even using img-responsive, the max width and height of this image will be the real size of the image. So if we have a 800 x 600 px image, it will not enlarge it (because it'll become loosing quality).
So in 2016, it's recommendable to NOT declare height and width of an image. Instead use bootstrap's img-responsive class, other responsive framework class that gets the same result, or hand-made the proper jquery and css to reach the same.
Hope it helps!
Yes, It is still relevant to specify width and height attribute on images in HTML.
Images often take longer to load than the HTML code that makes up the rest of the page. It is, therefore, a good idea to specify the size of
the image so that the browser can render the rest of the text on the
page while leaving the right amount of space for the image that is
still loading.
Hence, specifying width and height attribute on image will improve the webpage performance by protecting from delay in loading.
Yes, it is necessary to add height and width attributes to the img tag along with the src and alt attributes to prevent page-jumping. When our page loads, the specified space will be preserved for the image so that the it can occupy that place peacefully.
But, there is another problem that will arise here Responsiveness.
Once we give height and width attribute to img tag, the image will tend to stay in the same height for all screen-sizes which will make the image to shrink.
To avoid this, we need to add height: auto; to the image in the CSS file.
If only one of the attributes height or width is set for an img element, most browsers seem to keep the proportions of the image.
This is from the HTML 4.01 reference:
When the object is an image, it is scaled. User agents should do their
best to scale an object or image to match the width and height
specified by the author.
http://www.w3.org/TR/html401/struct/objects.html#edef-IMG
Would it be wrong of a browser to scale the image non-uniformly, that is changing only the height or the width of an image?
Update 2015-08-12: Dillo (version 3.0.4) is an example of a browser which does not keep the proportions of an image if only height or only width is set.
If you look at what Bootstrap does with the .img-responsive class, it only sets height and max-width. http://getbootstrap.com/css/#images-responsive
If a browser didn't auto scale the width based on the height, this widely used CSS package would fail.
I can't speak for the spec authors, but from my PoV as a web developer if you scale non-uniformly your user agent is broken and none of my sites will render properly for you. Why would I ever want a non-uniform scaling? Especially one where one side is just determined by whatever size the image happens to be?
This question already has answers here:
Should I specify height and width attributes for my IMGs in HTML?
(5 answers)
Closed 8 years ago.
Is it better coding practice to define an images size in the img tag's width and height attributes?
<img src="images/academia_vs_business.png" width="740" height="382" alt="" />
Or in the CSS style with width/height?
<img src="images/academia_vs_business.png" style="width:740px; height:382px;" alt="" />
Or both?
<img src="images/academia_vs_business.png" width="740" height="382" style="width:740px; height:382px" alt="" />
I'm going to go against the grain here and state that the principle of separating content from layout (which would justify the answers that suggest using CSS) does not always apply to image height and width.
Each image has an innate, original height and width that can be derived from the image data. In the framework of content vs layout, I would say that this derived height and width information is content, not layout, and should therefore be rendered as HTML as element attributes.
This is much like the alt text, which can also be said to be derived from the image. This also supports the idea that an arbitrary user agent (e.g. a speech browser) should have that information in order to relate it to the user. At the least, the aspect ratio could prove useful ("image has a width of 15 and a height of 200"). Such user agents wouldn't necessarily process any CSS.
The spec says that the width and height attributes can also be used to override the height and width conveyed in the actual image file. I am not suggesting they be used for this. To override height and width, I believe CSS (inline, embedded or external) is the best approach.
So depending on what you want to do, you would specify one and/or the other. I think ideally, the original height and width would always be specified as HTML element attributes, while styling information should optionally be conveyed in CSS.
The historical reason to define height/width in tags is so that browsers can size the actual <img> elements in the page even before the CSS and/or image resources are 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. Sizing the <img> via height/width creates a physical placeholder in the page flow at the correct size, enabling your content to load asynchronously without disrupting the user experience.
Alternately, if you are doing mobile-responsive design, which is a best practice these days, it's quite common to specify a width (or max-width) only and define the height as auto. That way when you define media queries (e.g. CSS) for different screen widths, you can simply adjust the image width and let the browser deal with keeping the image height / aspect ratio correct. This is sort of a middle ground approach, as you may get some reflow, but it allows you to support a broad range of screen sizes, so the benefit usually outweighs the negative.
Finally, there are times when you may not know the image size ahead of time (image src might be loaded dynamically, or can change during the lifetime of the page via script) in which case using CSS only makes sense.
The bottom line is that you need to understand the trade-offs and decide which strategy makes the most sense for what you're trying to achieve.
While it's ok to use inline styles, your purposes may better be served by including an external CSS file on the page. This way you could define a class of image (i.e. 'Thumbnail', 'Photo', 'Large', etc) and assign it a constant size. This will help when you end up with images requiring the same placement across multiple pages.
Like this:
In your header:
<link type="text/css" rel="stylesheet" href="css/style.css" />
Your HTML:
<img class="thumbnail" src="images/academia_vs_business.png" alt="" />
In css/style.css:
img.thumbnail {
width: 75px;
height: 75px;
}
If you'd like to use inline styles though, it's probably best to set the width and height using the style attribute for the sake of readability.
Definitely not both. Other than that I'd have to say it's a personal preference. I'd use css if I had many images the same size to reduce code.
.my_images img {width: 20px; height:20px}
In the long term CSS may win out due to HTML attribute deprecation and more likely due to the growth of vector image formats like SVG where it can actually make sense to scale images using non-pixel based units like % or em.
<img id="uxcMyImageId" src"myImage" width="100" height="100" />
specifying width and height in the image tag is a good practice..this way when the page loads there is space allocated for the image and the layout does not suffer any jerks even if the image takes a long time to load.
Option a.
Simple straight fwd. What you see is what you get easy to make calculations.
Option b. Too messy to do this inline unless you want to have a site that can stretch. IE if you used the with:86em however modern browsers seem to handle this functionally adequately for my purposes.. . Personally the only time that i would use something like this is if i were to create a thumbnails catalogue.
/*css*/
ul.myThumbs{}
ul.myThumbs li {float:left; width:50px;}
ul.myThumbs li img{width:50px; height:50px;border:0;}
<!--html-->
<ul><li>
<img src="~/img/products/thumbs/productid.jpg" alt="" />
</li></ul>
Option c. Too messy to maintain.
I'm using contentEditable to allow rich text editing in my app. I don't know how it slips through, but when an image is inserted, and then resized (by dragging the anchors on its side), it generates something like this:
<img style="width:55px;height:55px" width="100" height="100" src="pic.gif" border=0/>
(subsequent testing shown that inserted images did not contain this "rogue" style attr+param).
When rendered by the browser (IE7), the width and height in the style overrides the img width/height param (so the image is shown like how I wanted it.. resized to 55px x 55px. So everything went well so it seems.
When I output the page to a ms-word document via setting the mime type application/msword or pasting the browser rendering to msword document, all the images reverted back to its default size. I finally found out that msword is discarding the style and using the img width and height tag (which has the value of the original image size).
Took me a while to found this out. Anyway... I've coded a javascript function to traverse all tags and "transferring" the img style.width and style.height values into the img.width and img.height, then clearing both the values in style, before I proceed saving this piece of html/richtext data into the database.
cheers.
opps.. my answer is.. no. leave both attributes directly under img, rather than style.
I just finished reading YSlow recommendation to always define the image dimensions (height/width) to improve HTML rendering performance.
However, I don't know the image dimension I'm linking too.
What I do know is that the height will never be larger than 200px and the width will never be larger than 300px
Would I be a benefit if I defined (CSS) :
img {max-height: 200px; max-width: 300px}
For HTML performance rendering?
No, setting the max-width and max-height doesn't improve the performance.
The reason for specifying the width and height of images is that the browser will know exactly how much space the image will take up. If you leave the image size unspecified, the browser has to reflow the layout when the image loads.
You can see this nasty effect on some pages, where the page is first loaded with no placeholders for images, and then the contents jumps around making place for the images as they load.
If you can't specify the size of some images, don't worry too much about it. Just make sure that the layout behaves nicely when the images load, and don't jump around too much.
Setting the max height and width of an image in the css will make the img tag resize the img based on the contraints but if you are using a backend scripting language like asp.net or php you an use their img libraries to scale the image on the server side an either save then to the hard drive to use later or resize on the fly.
You can check out http://shiftingpixel.com/2008/03/03/smart-image-resizer/ for php as a starter
Or if you are using .NET you can check out this link http://weblogs.asp.net/gunnarpeipman/archive/2009/04/02/resizing-images-without-loss-of-quality.aspx
Images with different proportions would not look good, since they would be scaled. I would not recommend this.
In this case I would definitely not set the height and width of the image since you don't know what it is going to be. If you know what the size is going to be then setting is good because it will cut down on the amount of repainting and reflow that the browser has to do when rendering a page.
The less it has to do then the better the performance will be on the client side because you are not making the browser work too hard.
Stoyan Stefanov explained it really well in a recent blog post
I think You'd rather want to wrap that <img> into a <span> or <div> element with max-height and max-width set. Also, it ( span or div ) should have overflow:hidden set so the image doesn't go out of the div's range.
It definitelly isn't recommended to set these setting directly to image because You'll get different and slower rendering in different browsers.
I've learned that it is a best practice to explicitly specify image dimensions. The browser can then already layout the page while still downloading the images themselves, thereby improving (percieved) page rendering time.
Is this true? And if so, is there a difference in specifying the dimensions in either HTML or CSS?
HTML: <img src="" width="200" height="100">
Inline CSS: <img src="" style="width: 200px; height: 100px">
External CSS: #myImage { width: 200px; height: 200px; }
According to Google Page Speed, it does not really matter if you specify the dimensions via CSS or HTML, as long as your CSS targets the IMG tag itself and not a parent element :
When the browser lays out the page, it needs to be able to flow around replaceable elements such as images. It can begin to render a page even before images are downloaded, provided that it knows the dimensions to wrap non-replaceable elements around. If no dimensions are specified in the containing document, or if the dimensions specified don't match those of the actual images, the browser will require a reflow and repaint once the images are downloaded. To prevent reflows, specify the width and height of all images, either in the HTML tag, or in CSS.
However, note that they advise not to resize the image using these dimensions, ie to always use the real dimensions :
Don't use width and height specifications to scale images on the fly. If an image file is actually 60 x 60 pixels, don't set the dimensions to 30 x 30 in the HTML or CSS. If the image needs to be smaller, scale it in an image editor and set its dimensions to match (see Optimize images for details.)
I tend to do it in the CSS. This is certainly a win when there are multiple images with the same dimensions (so you can do stuff like .comment img.usergroup { width: 16px; height: 16px; }), and have the same images subject to scaling in different stylesheets like user-selectable themes.
When you have completely independent images that are used on the site only once, it doesn't really make sense to abstract their size out to CSS, so the HTML version would probably be more appropriate there.
I think CSS gives you more flexibility: you can specifically set the width or height while setting the other dimension to auto. But when setting both dimensions, I don't thing there's a difference.
This does not answer your question directly, but I would not rely on the dimensions of your image for page layout. Instead include the image in a block level element. This relieves both the HTML and CSS from having to hold information that it really shouldn't as the image may change from time to time.
If you put a large image in an HTML page without dimensions, you should definitely notice the page layout shifting as the image is downloaded (over an internet connection, if not locally).
As per other answers, it doesn’t make much difference whether you do this in the HTML or the CSS.