3 Reasons not to Re-size Images with HTML/CSS in Mobile Browsers
-
Images are Worse Quality
You will end up with a worse quality image than if you were to re-size the original image before serving it since browser image re-sizing algorithms are optimized for efficiency and speed over quality.
-
Wasted Bandwidth
Regardless of the size of the image post re-size, the larger image has to be loaded by the browser anyways. This costs both you and your users money, and time!
-
Browser Performance
Re-sizing a large image can be quite resource intensive for a mobile browser, and needs to be done before the page can be rendered. This can slow down page load times and worsen the user’s experience on your website.
Even with the advances we’ve made in terms of consumer bandwidth and browser optimization, it’s still recommended you do yourself a favor and serve images at the size they will been seen at. If you are operating a responsive website, you should consider an adaptive image solution, where mobile clients get smaller images than their large retina-screened counterparts!