I recently implemented following responsive image optimization for images that are displayed with
object-fit: contain CSS style.
This essentially tells the browser to download the closest image that can fit in the viewport with minimal resize. And it works regardless of both image and viewport aspect ratio.
Pretty clever trick to reduce page size and loading time.
<img src="https://my-domain.com/media/work_300.webp" sizes="(min-aspect-ratio: 1.4/1) 140vh, 100vw" srcset=" https://my-domain.com/media/work_300.webp 300w, https://my-domain.com/media/work_400.webp 400w, ... https://my-domain.com/media/work_2560.webp 2560w, https://my-domain.com/media/work_3000.webp 3000w" alt="" class="object-fit-contain">
I based it on solution found here:
But I found a problem. As far as I tested - this code only works on Firefox and it’s forks!
I can’t get this to work on any chromium based browser, and don’t know why. I suspect that the problematic part is
sizes="(min-aspect-ratio: 1.4/1) 140vh, 100vw" but
aspect-ratio are all implemented in chrome as far as https://caniuse.com/ can tell.
Does anyone knows why this is happening?