Images using srcset attribute download both 1x and 2x versions in Safari and Firefox

[jasonbarry]

When wrapping LazyLoad around an image that utilizes the srcset attribute, both the 1x and 2x versions download in Safari and Firefox. Chrome seems to do the right thing and only download one version.

<LazyLoad height={height} once offset={100}>
  <img
    alt={alt}
    src="/path/to/image.png"
    srcSet="/path/to/image.png 1x, /path/to/[email protected] 2x"
    height={height}
    width={width}
  />
</LazyLoad>

According to the devtools, in Safari and Firefox both /path/to/image.png and /path/to/[email protected] get download as you scroll past. I would expect on my Retina laptop only the 2x image to get downloaded (Chrome's behavior).

[dertel]

I'm also getting this, though only on Safari. Did you find a solution?

[dertel]

OK I found a solution. This is crazy but if you change the order of the attributes to sizes, srcSet, THEN src, then it fixes the problem for me. For example

<LazyLoad height={height} once offset={100}>
  <img
    alt={alt}
    sizes{...}
    srcSet="/path/to/image.png 1x, /path/to/[email protected] 2x"
    src="/path/to/image.png"
    height={height}
    width={width}
  />
</LazyLoad>