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?
Asked
Active
Viewed 2,709 times
4 Answers
8
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
- 442,112
- 142
- 972
- 1,088
-
I find quality is usually fine for icons and small images, nothing else though. – Neil Aitken Jun 29 '10 at 08:48
-
for dynamic layouts, you cannot but let the browser resize the photos. the whole point of fluid design is being controlled by the browser. – vsync Dec 26 '16 at 14:46
-
@vsync yes, things have changed in the almost seven years since this answer. The trend has become to delegate a lot more rendering work to the client (and of course clients are much more powerful these days.) – Pekka Dec 26 '16 at 20:16
-
I don't know about "things changed".. it was fluid design even in 2004, I made tons of fluid websites back then (for clients) and the internet was all about fluid design in the forums and primitive websites of the era, so I never recall a time where sites were being built exclusively in a static manner. maybe in the 90's but my memory is too vague of that time with flash websites. – vsync Dec 26 '16 at 20:27
-
@vsync resizing images in the browser was a bad idea until only a couple years ago, though. – Pekka Dec 26 '16 at 20:46
-
I can't recall a time when it was bad, sorry. only if the image was way bigger than what was actually rendered, but not if it was more or less what you wanted in size. – vsync Dec 26 '16 at 23:17
-
@vsync I recall a time when every browser would use an inferior scaling algorithm with really bad image quality. See the link above or e.g. http://stackoverflow.com/questions/9945363/image-scaling-causes-poor-quality-in-firefox-internet-explorer-but-not-chrome – Pekka Dec 26 '16 at 23:33
-
1@Pekka웃 What's funny is now, a few years further on, Firefox's resizing is superior to imagemagick's defaults. I'm currently trying to figure out how to improve server-side to match it (and can't rely on the browser due to bandwidth). – Izkata Aug 06 '19 at 15:26
-
Is this answer valid at all for 2021? – Subhankar Mukherjee Sep 07 '21 at 06:19
2
Main drawbacks are
- Download speed
- incorrect resizing
Pros: Faster load if you want to show the original sized image
mplungjan
- 169,008
- 28
- 173
- 236
-
2Why do I even bother answering here? While I compose the answer, 2 others wrote the same. – mplungjan Jun 29 '10 at 08:48
-
1
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
- 489,969
- 99
- 883
- 1,009
1
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.
Jitendra Vyas
- 148,487
- 229
- 573
- 852