Is it acceptable to leave image resizing up to the client (browser)

Browsers can resize images based on the attributes you specify.

However I imagine most resizing is done server side, preferably prior to the request. With the speed of current CP开发者_StackOverflow社区Us and for the sake of simplicity and possibly bandwidth saving, is it ever acceptable to leave image resizing to the browser?

Yes, browsers can resize images based on width and height attributes, however you have no control over the quality of the resized image. If this is something you care about at all, it should be done server-side.

Another thing to note is that even though the resized image is smaller than the original, it is still the same file size as the full-sized image. Therefore if you're leaving it up to the browser to make a 2MB file 100px by 100px, the user still has to download all 2MB of the file first.

One use-case is when you have a thumbnail and a full-size image, or various sizes to display. In that case it is fine to use one image and resize. Note that modern browsers now use bicubic resampling, so you don't run into jaggy, cruddy interpolations with lots of artifacts when you resize, which used to be a very compelling reason NOT to let the browser resize the image.

Even with the progress we've made in terms of higher consumer bandwidth, I still don't think its acceptable to allow a browser to resize the image. In reality, bandwidth still varies wildly depending on what level of service a user has.

You also need to think about likely use cases. Imagine a list of news stories, each with their own thumbnail based on the primary image of the underlying article. Now let's say that we're showing 20 of these in one paged view.

Even those with hefty bandwidth connections are going to notice those (for the sake of argument) 2MB images popping in. This assumes that whoever is uploading content is practising some kind of restraint when it comes to image size. Images can get a ton larger if say, they've come straight from a scan.

If your site is on the public Internet, you can almost guarantee that some of your users are going to have inadequate bandwidth. Complaints will come in, and it'll ultimately reflect badly on you.

We haven't even covered stuff like aspect ratio. What happens when a client tries to put a long and thin image into a container designed for a square one? The site looks unprofessional, that's what.

Also, what about the cost of sending these large files to n clients? Bandwidth isn't free.

So no, getting the browser to resize images is never acceptable, especially when you can invest in or develop a server-side image manipulation library. This'll handle resizes, crops, etc. It'll also help you provide the most performant experience you can to all your users. Not everyone has 50Mb going into their premises.

I encountered a site that had bought stock photos and embedded the 2Mpx original images in their web page with width and height directives of ~150px thumbnail size. I only noticed because the page took about a minute to load.

On the other hand, I could zoom my browser 300% and the images remained clear (and still not hit their native resolution). I'm guessing this wasn't a design goal.

The resizing that happens on the browser is simply that of display - the full image is downloaded and is simply displayed with the required size. What they look like will be determined by some image resizing algorithms written by the browser writers - you have not control over the quality.

It is a matter of bandwidth and possibly CPU and memory usage on the client.

As you surmise, most images are sized beforehand, long before any request. Even with fast CPUs you would not want to do this on the fly.

Smaller images will also mean users that do not have broadband will be able to enjoy your site without waiting for the large images to download.

I personaly do image resizing (thumbnails) on server and keep them in separate folder. This helps me to keep bandwidth low.

If you do not want to store them on your server and just do it on request (online) you can use cool scripts like e.g. TimThumb is : http://www.darrenhoyt.com/2008/04/02/timthumb-php-script-released/

Everyting depends on your server's load and number of images per page (or traffic of course) If you want to store them on your server then you can use http://phpthumb.sourceforge.net/ or ImageMagick (I use it for thumbnails + watermarks)