🌐 Website Issue | Use <picture> instead of changing src of <img> #1468

New Issue

2019-11-06T00:35:34Z

dawidpotocki commented

2019-11-06 00:35:34 +00:00

(Migrated from github.com)

I made that when we set theme, we change src of recommendation <img>, which
might seem okay, but Firefox after doing nothing for few minutes, when later
changing theme, it would change image after some time. Chromium from what I
understand, if we also leave it for some time, when changing theme it would
actually take some time to apply theme, which I feel is because of these
<img>s, I could be wrong here though. Another thing is that it only works
with JavaScript enabled, which I would like to avoid.

So there is <picture> tag which we could use to specify few sources so we
could easily change image depending on @media, which would allow us to make
it work without JavaScript and probably fix these bugs.

<picture> on MDN:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture

I made that when we set theme, we change `src` of recommendation `<img>`, which might seem okay, but Firefox after doing nothing for few minutes, when later changing theme, it would change image after some time. Chromium from what I understand, if we also leave it for some time, when changing theme it would actually take some time to apply theme, which I feel is because of these `<img>`s, I could be wrong here though. Another thing is that it only works with JavaScript enabled, which I would like to avoid. So there is `<picture>` tag which we could use to specify few sources so we could easily change image depending on `@media`, which would allow us to make it work without JavaScript and probably fix these bugs. `<picture>` on MDN: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture