👈 Back


This example uses 1,391 media queries, one for each min-width px value from 576px up to 1967px.

As each mediaQuery kicks in, the next or previous image from the <source /> is loaded by the browser and then displayed.

The flickering is caused because the browser has to load the image before it is displayed. Time to load speeds may vary but once each image is cached the flickering may become less obvious. Firefox seems slightly better at handling this than Chrome FYI

Since each image is only loaded by the browser when the appropriate mediaQuery matches the viewport it shouldn’t effect Lighthouse scores or page load times

I'm not sure why you'd want to use this effect, but just so you know... you can 🤷‍♂️

The src for this example can be found here