Now we need some tooling where you put in a maximum error bound, and it automatically finds the lowest resolution you can get away with. I wonder if one of those video-codec-based image formats (WebP, HEIC, AVIF) would already do something pretty similar if you just set a quality factor?
It seems obvious in insight but I never used this before. An interesting front end trick, though adding gradient backgrounds is something I avoid as it's mostly eye candy
Comments
Now we need some tooling where you put in a maximum error bound, and it automatically finds the lowest resolution you can get away with. I wonder if one of those video-codec-based image formats (WebP, HEIC, AVIF) would already do something pretty similar if you just set a quality factor?
It seems obvious in insight but I never used this before. An interesting front end trick, though adding gradient backgrounds is something I avoid as it's mostly eye candy
It does, thought i’d never imagined the browser did any interpolation at all !
Neat trick, thanks for the share ;)
They didn't used to, because it slowed down rendering. Then they started blurring stuff which worked well most of the time but not e.g. for retro artists who wanted the pixely look. So eventually they added some CSS properties to control it. https://builtvisible.com/image-scaling-in-css/ https://caniuse.com/#search=image%20rendering
wow, I just learned so much from such a simple concept !! Thanks for the links ;)
Where's the hacking? It's common knowledge that if you stretch a small image, it blurs. As far as I'm aware, this is commonly used for backgrounds.