I'm new to html so I'm a bit lost when I read that we can change the dimensions of the images through CSS or the width, height attribute.
For the width height attribute, some posts say that only pixels are accepted. But somehow, percentage also seems to work fine for my code.
However, when I tried using vw and vh, the image sized strangly.
so,
What are the accepted units for width and height attribute?
Is CSS recommended over width and height, for changing the dimensions of the images?
Many thanks.
The accepted units for the width and height attributes of an HTML img element are pixels. You give the number of pixels, but don't put the 'px'.
From MDN
width
The intrinsic width of the image in pixels. Must be an integer without a unit.
It is possible to get confused between these attributes and the use of CSS properties of the same names. While the attributes had more use probably when load times were longer (they allowed the correct space for the img to be saved in the page) they may be making a comeback, see https://developer.mozilla.org/en-US/docs/Web/Media/images/aspect_ratio_mapping which ends with:
— eliminating another piece of jank from web layout! There is no need for a web developer to do anything special to their code to take advantage of this, besides returning to the habit of using width and height attributes in their HTML.
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?
I'm building a responsive website and I'm wondering what unit I should use? I've seen a lot of sites using pixels (px) for measurements and I've seen some using percent (%). Is there a preferred — or right — way of doing responsive design?
I've found percent to be hard to use, since it makes calculations hard and I've ended up with values like 2.754% and so on when setting widths/margins etc. Pixels seems easier, it's just simple addition and subtraction, but I've read that it isn't "future proof" or something like that and wont scale properly if the user zooms in the browser window. Is that still true?
If you have any experience or expertise, please share! I would love to hear what you guys have to say!
Thanks!
For layout type things like the sizes of boxes, you want to use % because you will typically have several columns sized as a percentage of their parent that will stack on top of each other at a certain breakpoint (width:100%). No other unit will allow you to fill 100% of the space like % does.
For padding/margins use em, normally you will want to space your elements out relative to the size of your text. With em (the with of an 'M' character) you can quite easily say I want approximately 1 character spacing here.
For borders you can use px or em, there is a difference though. If you want your border to look like it's one pixel wide on all devices, use 1px. It may not be one pixel on all devices however, high density displays convert 1px into 2px for example. If you want your border to be a size based on your font, use em.
For fonts use em (or %), the use of em carries through parents to children and it just a nicer unit to work with over px.
Of course you must use percentage. But with the min-height, max-height, min-width, max-width CSS keys.
For the next generation
vw and vh. The vw is 1/100th of the window's width and the vh is 1/100th of the window's height.
For responsiveness they are going to be the new units.
Use percentages along with min-width and max-width in pixels. This stops percentages making your divs too small or too large. eg
div {
width:100%; //full width of browser
max-width: 960px; //this means it will be 100% of the browser until 960px then it will stop expanding
}
For layouts vh and vw are good because they are relative to the device's view port. They give you the possibility of designing with the view port of the device in mind. With this said you know what will show on the window and what won't without being too careful.
For text em is best because if it's responsive features.
What's the basic difference between [width and height] and max/min[width and height] and where should we use each of them?
Thanks in advance........
The basic difference is that width and height will specify the exact width and height of an object. Max/min width and height will specify the maximum or minimum height and width that an object needs to be.
Say you had a div that you wanted to load images into, but you wanted all images to be the no larger and no smaller then a specific width or height, then using min/max calls would be ideal.
In other cases, where you know the width and height (say for only a specific image) then you do not need max or min height/width calls.
It is also important to note that max/min height and width calls will over-ride height and width calls.
Here is some more information:
CSS Height and Width
CSS Tests - Min and Max
width/height give you the strict constraints. max-height/max-width tell your element to be not wider/higher than a certain value, but the element can still be smaller than that value.
max-height/width are commonly used when you want to make the site behave according to the screen it is viewed on, but to not be super huge on the large screens anyway. The same about the elements - you might want to accept images of any size, but want to make sure they are not breaking your site layout. Hence you use max-width/height.
They don't work in IE6 though. If you need to support min-width/height in IE6 you can use regular width/height. IE6 will treat them as minimum values anyway and will expand them in case content needs more space. Both min/max width/height work fine in IE7+
What is the more "correct" way to define <img>'s width and height?
Will it be directory through the tag with its "width" and "height" attributes, or would it be better to do it via CSS img { width:...; height... } ?
For a single unique content image used once it there's no reason not to use inline width/height attributes. They're still valid, even in Strict.
Circumstances a CSS rule would be better:
there are a number of instances of the image, or multiple images all the same size. A rule would allow you to cut down the amount of markup you have to write;
the image is part of a layout feature rather than content; a different stylesheet might want to resize it;
I might want to use more complex sizing rules than width/height attributes allow, such as %-sizing or max-width.
In this case it is definitely the right way, there really is no wrong way, to specify the width and height on the image tag itself. Especially during the rendering phase of your site, having the dimensions specified there, will be a small performance improvement as the browser does not need to try and calculate the size of the images.
From the spec:
"Author requirements: The width and height attributes on img, iframe, embed, object, video, and, when their type attribute is in the Image Button state, input elements may be specified to give the dimensions of the visual content of the element".
All styling of elements should be done using CSS. The height and width attributes are considered to be no longer valid in most cases. This way you separate style and layout from function. It should also lead to cleaner html code and smaller files.
Both ways are "correct".
The usage depends on personal preferences or political (enterprise) decisions.
I myself think it is better to place it in the css.
You should always prefer CSS to HTML-attributes. HTML is meant to define the structure, while CSS tells the browser how to render it.
Both ways are fine. The width and height attributes are optional. If none are specified, the resource's dimensions will be used.
I would prefer to specify them in proper width and height attributes because they are closely related to the src used. It doesn't make sense to keep them in a style sheet.
From the spec (emphasis mine):
The width and height attributes on img, iframe, .... and input elements may be specified to give the dimensions of the visual content of the element (the width and height respectively, relative to the nominal direction of the output medium), in CSS pixels. The attributes, if specified, must have values that are valid non-negative integers.