1713611 - Using <img srcset> doesn't work to serve different images to mobile devices.

Status: NEW

(Core :: DOM: Core & HTML, enhancement)

Description

[Arturo Mejia [:amejia]]

Ported ticket from Fenix #19725.

I am using the <img> element with "srcset" and "sizes" attributes to serve different images to mobile devices depending on the display's resolution. This method works correctly on the desktop version of Firefox, as well as Chrome on Android, however Firefox for Android displays the desktop image instead of mobile. The basic code I'm using is this:

<img src="/images/mobile-image.jpg" srcset="images/desktop-image.jpg 1920w, images/mobile-image.jpg 800w" sizes="(min-width: 800px) 1920px, 100vw" />

This is the simplest way I've found to accomplish this task without using (more complicated) javascript, and without loading the other image unnecessarily. If someone at Mozilla could look into the issue I would greatly appreciate it, as it's making a couple of my elements (that have text on top of them) display incorrectly in Firefox on Android. Thank you!

Comment 1

[Sean Piercy]

I was asked to try Firefox Nightly to see if the issue happened there as well and it does.

Comment 2

[Kevin Brosnan [Ex-Mozilla]]

If you have specific images and a testpage that could be attached to this bug that would be helpful.

Comment 3

[[ex-Mozilla] Agi Sferro | :agi]

I don't think we have any code specific to this in GeckoView, maybe folks over at Layout know why this is happening?

Comment 4

[Emilio Cobos Álvarez [:emilio]]

Attachment: Test-case

This does show a green image in mobile chrome, but a red image in Fenix.

Comment 5

[Emilio Cobos Álvarez [:emilio]]

So the relevant code is here, but I'm a bit confused about why are we choosing red here.

Comment 6

[Edgar Chen [:edgar]]

Spec doesn't define how should ua select source if there are multiple sources available.
Current Gecko behaviour is this comment in ResponsiveImageSelector::SelectImage,

// Per spec, "In a UA-specific manner, choose one image source"
// - For now, select the lowest density greater than displayDensity, otherwise
// the greatest density available