Using CSS or width/height attributes, an img element can be resized within the browser.
Is using this (extensively) a good strategy, what are the drawbacks?
+1
A:
It depends. If the image size (kb) is large, you are better off resizing the original to a smaller size in order to reduce download sizes of your site.
If they are small, it doesn't really matter. The only difference is that the browser is now in control of how your images appear.
Oded
2010-06-29 08:46:01
+5
A:
The main drawback is quality: The browsers' resizing algorithms are optimized for speed, not quality, with often crappy-looking results.
This blog post makes a good example. While I don't entirely agree with its title, it has often merit:
There are proprietary CSS filters for influencing the resize method and quality in both IE and Firefox IIRC, but they do not work in all browsers.
The second drawback is client-side performance: you are delegating a costly operation to the client. If the client's graphics performance is low (say, on a Netbook or an older machine) resizing the image can slow down the whole site.
Another drawback that comes to mind is bandwidth usage: if you deliver a large image is massively shrink it on browser side, you would be transmitting more data than necessary.
Pekka
2010-06-29 08:46:28
I find quality is usually fine for icons and small images, nothing else though.
Neil Aitken
2010-06-29 08:48:31
+1
A:
Main drawbacks are
- Download speed
- incorrect resizing
Pros: Faster load if you want to show the original sized image
mplungjan
2010-06-29 08:47:03
Why do I even bother answering here? While I compose the answer, 2 others wrote the same.
mplungjan
2010-06-29 08:48:01
+1
A:
No it would not be a good strategy.
Don't use a bigger image than you need just because you can set the width and height in HTML. If you need then your image (mycat.jpg) should be 100x100px rather than a scaled down 500x500px image.
metal-gear-solid
2010-06-29 08:49:31