Re: [css-d] height and width specifications
thanks! i specify the sizes in the CSS for groupings of images that are all the same size (e.g. tthumbnails in a carousel or image gallery) and was just wondering if that is the correct thing to do. Sara On Mar 24, 2011, at 9:44 PM, G.Sørtun wrote: Is there any reason to specify an image's height and width on the img tag rather than (or in addition to) specifying in the CSS? Setting and image's width and height in the HTML code, reserves the space for that element before image gets loaded. I don't think there is any other advantage, and I rarely ever set image width/height in the HTML code. I don't set images' width/height in CSS either, other than as general and standard-classes for max-width to make images play nice with my layouts. Could specifying the width and height only in the CSS be a reason that an image might load more slowly (in modern browsers)? If one specify varying dimensions for loads of images in CSS everything may slow down somewhat simply because of large CSS. I haven't notices such slow-down for my own work since I don't set dimensions anywhere. Have an example? regards Georg __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] height and width specifications
Sara Haradhvala wrote: thanks! i specify the sizes in the CSS for groupings of images that are all the same size (e.g. tthumbnails in a carousel or image gallery) and was just wondering if that is the correct thing to do. It's OK. You don't even have to specify the dimensions at all, but doing so lets the browser allocate space for the image before getting the image data. So it's a speed of rendering issue, and also a matter of avoiding unnecessary movements on the page (which may happen, especially when connections are slow, if the browser has started rendering the page, then notices that it gets some image data and needs to insert the image, causing subsequent elements to be repositioned). Setting the dimensions in HTML has the advantage of taking effect even when CSS is disabled in the browser. This is usually a minor advantage, and when you have a large number of equally-sized images, using CSS is more convenient. -- Yucca, http://www.cs.tut.fi/~jkorpela/ __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] height and width specifications
Is there any reason to specify an image's height and width on the img tag rather than (or in addition to) specifying in the CSS? Setting and image's width and height in the HTML code, reserves the space for that element before image gets loaded. I don't think there is any other advantage, and I rarely ever set image width/height in the HTML code. I don't set images' width/height in CSS either, other than as general and standard-classes for max-width to make images play nice with my layouts. Could specifying the width and height only in the CSS be a reason that an image might load more slowly (in modern browsers)? If one specify varying dimensions for loads of images in CSS everything may slow down somewhat simply because of large CSS. I haven't notices such slow-down for my own work since I don't set dimensions anywhere. Have an example? regards Georg __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
