Geek Answers Handbook

CSS / HTML: Does using max-height on images help HTML rendering?

I just finished reading the YSlow recommendation to always determine image sizes (height / width) in order to improve HTML rendering performance.

However, I do not know the size of the image, which I also link.

I know that height will never be more than 200px, and width will never be more than 300px

I would advise if I defined (CSS):

 img {max-height: 200px; max-width: 300px}

For rendering HTML performance?

+4
source share
5 answers

No, setting max-width and max-height does not improve performance.

The reason for specifying the width and height of the images is because the browser knows exactly how much space the image will occupy. If you do not specify the size of the image, the browser must pay for the layout when downloading the image.

You can see this unpleasant effect on some pages where the page first loads without placeholders for images, and then the content jumps around the place for images when they are loaded.

If you cannot specify the size of some images, do not worry too much about it. Just make sure the layout behaves well when the images load, and don't skip too much.

+9
source

Images with different proportions would look good, as they would be scaled. I would not recommend this.

0
source

Setting the maximum height and width of the image in css will make the img tag resize the img based on the outlines, but if you use a backend scripting language such as asp.net or php, you use their img libraries to scale the image on the server side either to save or to hard drive to use it later or resize on the fly.

you can check http://shiftingpixel.com/2008/03/03/smart-image-resizer/ for php as a starter

Or if you are using .NET, you can check this link http://weblogs.asp.net/gunnarpeipman/archive/2009/04/02/resizing-images-without-loss-of-quality.aspx

0
source

In this case, I would definitely not set the height and width of the image, since you do not know what it will be. If you know what size it will be, then the setting is good, because it will reduce the amount of redrawing and recounting that the browser should do when rendering the page.

The less you need to do this, the better the performance will be on the client side, because you do not work too much with the browser.

Stoyan Stefanov very well explained this in a recent post blog

0
source

I think you would prefer to wrap this <img> in a <span> or <div> element with a maximum value and maximum width. In addition, it (span or div) must have overflow: hidden, so the image does not go out of the div range.

It is definitely not recommended to set these settings directly to the image, because you will receive different and slow renderings in different browsers.

0
source

More articles:


All Articles