Is It Better/faster To Resize An Image With CSS, Or With The Tag?

I was wondering what is the better/faster way to resize an image. Normally I would resize an image with CSS, but a college told me that by using the width attribute, e.g.

Solution 1:

It would be even faster if you resized the actual image, and not the dimensions you want the browser to render it to.

Solution 2:

width and height are semantic in the case of imges and objects. They provide metadata for images so it is completely fine IMO to rely on those attributes in order to tell the user agent that it should presize the element to X dimensions prior to the image fully rendering.

Solution 3:

You should set width and height properties of each img tag. It speeds up rendering page because browser doesn't wait for css files and images loaded.

Solution 4:

If we stick with presentation vs. structure, I'd put your image sizes in CSS. Speed really doesn't matter these days, the browser has to wait for the images to be loaded anyway, so the speed it takes to compose and render the page isn't really measureable, well unless your CSS fails to load...

Solution 5:

Bit difficult to give definitive answers for very general questions like this, but I think it’s generally better not to resize images in HTML or CSS — make the image file the right dimensions.

Ignoring that, I don’t think there’s likely to be any perceptible difference between the two.

Share