0

Back in the old days when I learned to create web pages, the rule of thumb was: Don't resize your images with HTML/CSS, provide the image in its "native" resolution. Otherwise, it will be upscaled or downscaled by the browser and the image will look blurry or ugly.

Those were the days when we didn't have high-resolution tablets, huge screens and browsers with built-in zoom functionality using smart algorithms.

My gut feeling tells me that a lot of people don't have their browser at a zoom factor of 100%, so browser-side scaling is going to happen anyway -- providing a high-resolution source should lead to a strictly better result than the native-for-100%-version in that case. Have we reached the time yet where it makes sense to provide images with higher resolution¹ than required when designing new web sites?


¹ ...within reasonable limits considering the users' bandwidth, of course.

  • Except for high-detail stuff that should be vector graphics anyway (think charts, blueprints, …), a bit of downscaling will not be noticeable, so it's sensible to err on the side of sending too big pictures. However, sending a gorgeous 5K image intended for an iMac to a low-res phone on a metered mobile connection is incredibly wasteful, slow, and (for your user) expensive. Having the client figure out the required image size, and having the server respond sensibly is one of the big unsolved problems with responsive web design. – amon Nov 19 '14 at 22:08
1

Most of the new front-end designs I've seen are doing a lot of this nowadays. It seems to work generally OK -- browser resamplers have got much better, pipes are fatter and images are heftier so you aren't trying to re-raster a 10kb JPEG. I've seen a few downsides -- the big ones being file sizes are bloated which effects visible performance, especially on mobile networks. Also, we had one designer who fell in love with massive, resizing background animated gifs. That melted certain browsers at times.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.