[gatsby-image] Dynamically change image source after page load like in picture tag

[rtm619]

Hi,
Currently, Gatsby Image uses srcset attribute of img tag to load different images based on window width at loading time. But unlike picture tag, if you resize the window (suppose from desktop to smartphone width in chrome), the image source doesn't change. You have to reload the website again in that smartphone width to get the smartphone image. Is there a way where you can change image sources by varying window width without reloading the page, like in picture tag which uses media queries?

[deadcoder0904]

I had the same issue but I found the solution

TL;DR - Gatsby Image doesn't support picture tag so I had to use a hack of display: none;

[zauni]

Hi @rtm619
with the srcset attribute you can't assume that the browser will change the image on resize. Most of the browsers are not changing the image if they have already loaded a large version of it.

If you need a different image on different screen sizes you have to use the picture tag and can't use Gatsby Image. srcset and Gatsby Image are great for images which are just changing the resolution because the browser is figuring out which resolution is the best and saves bandwidth when it is not changing the src on resize.

Here is a bit of a background to srcset vs. picture: https://cloudfour.com/thinks/dont-use-picture-most-of-the-time/#knowing-which-use-case-youre-solving-tells-you-what-solution-you-need