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.
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.
I'm using an application called iDashboards, and in it there is a feature I can add called a ViFrame that takes very limited HTML to create a custom frame.
My knowledge of HTML is already pretty limited and with no output feedback, it's hard to use trial and error as a tactic.
I'm trying to display an image. The image changes dependent on the person that's selected in the app. The selection is taken care of by itself, but the problem is that the size of the pictures vary. I'm trying to display the image so that it has a definite height and a scaled width.
Displays the full size image. The HEIGHT element doesn't seem to constrain anything. If I add a WIDTH tag it works but the scaling would be messed up. Is there any way to do what I want?
The way I see it, I have two options I can think of:
1. Make every image in the library a square and then specify square dimensions so no distortion
2. Somehow retrieve the original height and width into variables in HTML and specify both tags with height being constant and width being an expression of the ratio between height and width. None of which I know is even possible. Is it? I don't think it allows tags either to go into JavaScript.
Sorry about my very basic knowledge in HTML, be gentle.
Are you using one object and changing the image or using many images and changing which one is displayed? Any way you could try to use width:YOUR_VALUE_HERE; height:auto in your css document, which should keep them all in the same ratio.
Set a particular class on the IMG tag:
<img class='constrained_img' src='/path/to/img.png'>
In your CSS/Stylesheet:
.constrained_img {
max-width:100px;
max-height:100px;
}
That should keep your height and width to no larger than 100px in this case. Any further work you'd need to do server-side processing (a la PHP's getimagesize()), or use a 3rd-party library (I've used Joseph Lencioni's SLIR to good effect), or muck around with JavaScript (which isn't impossible, but off the top of my head I'm not sure how I'd go about it).
I use a lot of absolute elements in my website design so that it will mold to whatever browser dimensions are being used, but there is a minimum size that I want to use. In other words, I want my website to become compact as the browser is being resized smaller but at a certain point I want the overflow:auto attribute to kick in and force the user to see the whole page using scrolling instead of compacting the page further.
Any ideas? I tried putting in an empty table with specific dimensions into an element with overflow:auto, but that didn't work. I am not a terribly experienced web-designer.
CSS
html, body {
min-width: 980px;
}
Let's say I have < img src="http://www.always-going-to-be-absolute.com/images/thisimage1.jpg" width= "some px" /> (only a .jpg or .gif). With only the width specified, are there any (any!) circumstances under which the height and width of the image may not scale accordingly, or may not scale at all, assuming there is no CSS or other code affecting it? I can't think of any circumstances (and research doesn't bring up any), but I'd like to be sure by running this by some people who have more experience than I do.
thanks!
No there are not. However, note that is it quicker to load an image of the correct size.
If any other css code or anything else is not affecting it, then I don't think there should be a problem. Try using images of correct sizes though. Helps reduce loading time and preserve quality of images as well. Try it out and if you get any scaling or other problems, you know where to ask, right? ^_^
It looks like you're scaling the images through width. From section 13.7 of the HTML 4 specification:
All IMG and OBJECT attributes that concern visual alignment and presentation have been deprecated in favor of style sheets.
I think the only two problems you may have here are:
Small images: If the image is 10x10px and is scaled to fit a 1000x1000px container, it will be pretty hard to make out what the image is supposed to be.
Thin images: If your container is 1000x1000px and the image is 250x25px, scaling the image to fit the container will result in a 1000x100px image.
OR, is there a way to at least determine the width of an image from a URL.jpg (if it's not specified in the html) without downloading the image?
In front-end JavaScript you can simply:
img.clientWidth;
img.clientHeight;
On the back-end, PHP has a getimagesize() function which returns height and width. I imagine other languages also have similar functions.
I recall it was long ago best practice to hardcode width and height for any image (generally so it allocated appropriate amount of space while loading), but now with most people on high speed and things generally more dynamic, what is the best practice for this? Is it still preferred that any content image have inline size set with html?
It doesn't matter if you set the size using HTML attributes or in a stylesheet, but you should still specify the size for images.
Eventhough images are loaded a lot faster nowadays, there is still a noticable delay between the page being displayed and the images pop up. It's still irritating when the layout of a page changes while the images are loading.
Yes, it is still preferred.
Plenty of people are not on high speed connections, and mobile is becoming more common.
It doesn't have to be inline - you can do it in external CSS. Some older browsers, if you don't specify the size, will just treat it as 0px;
Its always best to use CSS
You could hardcode the image height and width like this
.myimg img {
width: 10px;
height: 10px;
}
your image file itself should be the size you want it to display as, for the most part, if your concerned about slow loading especially! if you've got a 500X800 px image, that you only want to show as 100X200, scale it down! the file size will be much smaller so it will load faster :)
I would say yes if you want to make sure the white space is included in case of the image does not load or during document load. But no if you're scaling/resizing the image with those attributes, as its unnecessary load on the browser and causes image distortion.
If you are designing for cross browser compatibility, then you should at the very least specify the height and width in your CSS for the image itself. I have found inconsistency between FireFox, IE, Opera, etc if sizes are not specified specifically for the image. Due to the fact that each browser, not to mention different versions, handle adherence to HTML Standards differently. I have found that some browsers will do its best to extrapolate the HTML designers intent, while others just croak on the first error. I would also recommend em sizes, rather than pixel or %'s if you intend for the website to be viewed from a mobile device such as a tablet. I will say, however I have just started playing with HTML5 so I don't of the difference in HTML5 with respect to images.
I just answered a similar question on Wordpress Stack Exchange and also on Webmaster Stack. I am posting it here intending to clarify and help more people. (admins/moderators: if this isn't allowed, let me know the proper way to help).
doesn't really means you need to specify width and height in the html. What it means is that is you gotta reserve te proper space and when the image is loaded, the browser doens't have to reflow and repaint the page.
Besides, if you hardcode the dimensions, it kinds of defeats responsive behaviour. If your layout is not responsive, it's ok, but if you want to keep some responsiveness, you could use only CSS to achieve the results.
Most of time, using both width and max-width:100 will do the work, but this post from Smashing Magazine has an interesting technique: instead of using max-width:100%, you can use The Padding-Bottom Hack :
"With the technique, we define the height as a measure relative to the width. Padding and margin have such intrinsic properties, and we can use them to create aspect ratios for elements that do not have any content in them.
Because padding has this capability, we can set padding-bottom to be relative to the width of an element. If we also set height to be 0, we’ll get what we want. [...]
The next step is to place an image inside the container and make sure it fills up the container. To do this, we need to position the image absolutely inside the container, like so:"
.img-container {
padding-bottom: 56.25%; /* 16:9 ratio */
height: 0;
background-color: black;
}
.img-container img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}