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

This issue has been tracked since 2018-07-20.

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 wrote this answer on 2021-03-16

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

dertel wrote this answer on 2021-03-16

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>
More Details About Repo
Owner Name twobin
Repo Name react-lazyload
Full Name twobin/react-lazyload
Language JavaScript
Created Date 2015-08-07
Updated Date 2022-11-29
Star Count 5639
Watcher Count 52
Fork Count 482
Issue Count 153

YOU MAY BE INTERESTED

Issue Title Created Date Updated Date