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

Question

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 CPUs and for the sake of simplicity and possibly bandwidth saving, is it ever acceptable to leave image resizing to the browser?

Answer 1

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.

Answer 2

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.

Answer 3

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.