0

I have a Flutter web app and I'm using the <picture> element to show a splash screen on the web.
I want to display splash screen with different pixel density depending on device.

My code:

<picture id="splash-branding">
  <source
    srcset="
      splash/img/branding-1x.png 1x,
      splash/img/branding-2x.png 2x,
      splash/img/branding-3x.png 3x,
      splash/img/branding-4x.png 4x
    "
    media="(prefers-color-scheme: light)"
  />
  <source
    srcset="
      splash/img/branding-dark-1x.png 1x,
      splash/img/branding-dark-2x.png 2x,
      splash/img/branding-dark-3x.png 3x,
      splash/img/branding-dark-4x.png 4x
    "
    media="(prefers-color-scheme: dark)"
  />
  <img
    class="bottom"
    aria-hidden="true"
    src="splash/img/branding-1x.png"
    alt=""
  />
</picture>
<picture id="splash">
  <source
    srcset="
      splash/img/light-1x.png 1x,
      splash/img/light-2x.png 2x,
      splash/img/light-3x.png 3x,
      splash/img/light-4x.png 4x
    "
    media="(prefers-color-scheme: light)"
  />
  <source
    srcset="
      splash/img/dark-1x.png 1x,
      splash/img/dark-2x.png 2x,
      splash/img/dark-3x.png 3x,
      splash/img/dark-4x.png 4x
    "
    media="(prefers-color-scheme: dark)"
  />
  <img
    class="center"
    aria-hidden="true"
    src="splash/img/light-1x.png"
    alt=""
  />
</picture>

But on chrome and edge, only the lowest quality image is used (1x image). It works well on Firefox (uses 2x image).
Also when using a mobile frame from chrome dev-tools, it works fine (uses 3x image).
It only doesn't work on chrome and edge in desktop mode.

Things I have tried:

  • Changing src of <img> inside the <picture> element
  • Changing image order in srcset
  • Setting src of <img> inside the <picture> element to highest quality image
OutdatedGuy
  • 160
  • 1
  • 10
  • 1
    I'm not sure about the size of each image, and have you tried to scale your browser(Chrome and Edge) size. Do they swtich different images based on browser size? – Xudong Peng Aug 04 '22 at 08:42
  • Yep, I have already tried that, but `chrome` and `edge` only seems to use the lowest quality image in desktop mode. – OutdatedGuy Aug 07 '22 at 08:03
  • 1
    Maybe you can also try some other Chromium based browsers like Brave. If there is the same problem then I think this should be by design. – Xudong Peng Aug 08 '22 at 03:27
  • @XudongPeng, I miss understood what you meant at first. On chrome when zoomed to **110%** it uses the _1x_ pic and for **125%** it uses _2x_ pic. So it's working fine, but how can I make it use _2x_ or higher image instead when on **100%** zoom. – OutdatedGuy Aug 12 '22 at 16:18
  • 1
    Do the Microsoft Edge, Brave have the same behavior with Chrome? If this is the case, I think this is by design in source code. I'm afraid I don't have another way to achieve this requirement(maybe I missed it). – Xudong Peng Aug 16 '22 at 07:57
  • Yeah, same happens on those Browsers too. I think it is intended in chromium. My device pixel ration is `1.25` so it ain't a bug. Thanks for your help. – OutdatedGuy Aug 17 '22 at 13:35

0 Answers0