Few days ago our client contacted us about their website, that they have blurred pictures in their product preview. I checked if our CMS sends good-sized images and yes, there seamed no error here. But my project manager started to get furious about this task a wanted me to solve this.
I started thinking. What if browser does this? And yeah, I found out, that browser really does this kinda behavior. Thy it yourself, download some image from internet and render it via some picture viewer and right next to it in browser, you notice a bit drop of the detail.
So I found CSS property image-rendering and this was quite it.
Here are some examples how does it work: https://css-tricks.com/almanac/properties/i/image-rendering/
There is one small thing. If you use image-rendering: pixelated every rounded corner on the photo gets pixelated, so use it with caution.
Maybe I am wrong, can someone confirm, this was right approach, or is there another one?
Top comments (0)