14 ms·

Native image lazy-loading for the web

115 points by skellertor 8y ago

skilled 8y ago
Hmm, I guess this is good news for WordPress users who won't have to rely on a plugin to do this? Excited to see what else they are going to bring to the browser to speed up sites.
- megaman821 8y ago
  I think the virtual scroller will be performance boon for many sites. https://chromestatus.com/feature/5673195159945216 https://chromestatus.com/feature/5673195159945216
georgecalm 8y ago
I’m excited about this. There’s usually a ton unnecessary CPU usage with the current techniques, not to mention the human time waste of re-implementing them in JS. There’s feature detection for this too, so we can gracefully degrade “loading” to existing solutions and take advantage of it right away.
s_y_n_t_a_x 8y ago
Does this support aborting the network call if you scroll the element offscreen before it loads? That's essential to infinite scrolling.
radarsat1 8y ago
Ah right, lazy loading, this is the reason that I have to make sure to scroll down the entire length of a medium.com article I'm reading on my phone and back to the top again to make sure the diagrams and math-as-images load completely before I get on a subway line that doesn't have 3g service. Hate it when I forget. Otherwise I'm left staring at blurry lines that don't explain much about what trying to read until it's time to get off. Sucks when my commute is 40 minutes straight on the same line. I guess an advantage of a 'native' feature could be that browsers could offer a button saying 'please pre-load this page!'
- reaperducer 8y ago
  The problem with the tech bubble these days is that people within it assume that everyone has the same internet connectivity they do. And that they have it all the time. Sadly, Apple has been like this since since at least the late 1980's. Out in the desert trying to help 150 children sign up for health care coverage and need to look something up via satellite connection? Oh, wait... the macOS is downloading Garage Band crap in the background that I didn't ask for and don't need. (I don't remember if Garage Band was the offender, but it was one of the pointless programs wasting space on my business computer). Just like app developers who only test their apps on the high-end phones they have, not the phones that the majority of people have. For the web sites I make for work, I test them on all kinds of devices. But I make sure that they all work on the cheapest pre-paid smartphone I could find at 7-Eleven. The internet was built to bring universal information to all, not just Flash games to the rich.
  - danaris 8y ago
    Apple's hardly the only offender here, and if you don't want the iLife programs on a Mac, removing them is trivial. Drag to trash, empty, boom, gone. Apple doesn't do anything to impede removal, nor does it aggressively try to push them on you like so much of the bloatware preloaded on Windows machines. (And if you had GarageBand in the late 1980s, then I definitely want to know who sold you your time machines...)
    - reaperducer 8y ago
      Drag to trash, empty, boom, gone. And then they’re back after the next OS upgrade.
      - danaris 8y ago
        Are you sure this is still true? I know it was for a while, but since the iLife apps were added to the Mac App Store, I thought they no longer reinstalled automatically, and if you wanted them back you just downloaded them from the Store. However, I haven't deleted them myself, so I don't know offhand.
oftenwrong 8y ago
Why would I want the loading behaviour of images to be chosen by the site I am browsing? I would prefer to choose for myself whether images load eagerly or lazily on all sites I visit. This way, I would always know which type of loading to expect as I browse, and I would always get the type of loading I prefer.
- karmakaze 8y ago
  This is toward the same goal. By standardizing it, browsers would be able to give you a lazy loading preference rather than sites implement their own in script that a browser/user can't override.
  - ksec 8y ago
    Well then the problem is users with different browser will get vastly different experience depending on the Browser Vendor, not the site owner.
- leeoniya 8y ago
  saving bandwidth for the user is one benefit. saving bandwidth for the host is the second. a large number of users never even make it below the fold, why should i serve them high res images they'll never see?
  - ZoomZoomZoom 8y ago
    There's such thing as clickable thumbnails, as you may have heard.
- dbbk 8y ago
  It seems like the loading behaviour is not chosen by the sites, per se. The options (lazyload or eager) are documented as being 'recommendations' to the browser. The default setting is "auto" which means it's up to the browser. So theoretically the browser could still give the user a setting.
really3452 8y ago
I hope they add an optional setting. IE: <img src="celebration.jpg" loading="optional" alt="..." /> Then there is a place-holder graphic in place that you could click on to load the image.
lol768 8y ago
This attribute appears to have been proposed and implemented by Google. Has any other vendor expressed an intent to implement/actually implemented this yet? It seems a little premature to describe this as native support "for the web" if the functionality is limited to one vendor and you're forced to use a polyfill everywhere else.
- franga2000 8y ago
  The driving force behind this feature do seem to be a couple of Googlers, but at least one person from Mozilla and one from Apple have been involved in the discussion and contributed to the spec changes. The changes have not been accepted into the spec, however, or even reviewed by W3C-TAG, so it isn't a standard yet. You can find the full discussion here: https://github.com/whatwg/html/pull/3752 https://github.com/whatwg/html/pull/3752
  - bzbarsky 8y ago
    The Mozilla person involved in that discussion is the editor of the relevant spec, and is only involved in terms of making sure the changes are correctly indicated in the spec. I don't believe he has expressed any opinion on the changes themselves. I just filed https://github.com/mozilla/standards-positions/issues/151 https://github.com/mozilla/standards-positions/issues/151 on getting an actual Mozilla position on this.
gardaani 8y ago
I hope that they ship this with image intrinsicsize / aspect-ratio or whatever it is called now. Otherwise this lazy-loading will make page jumping and layout instability worse, because images are loaded only after the user has scrolled to their position. https://googlechrome.github.io/samples/intrinsic-size/ https://googlechrome.github.io/samples/intrinsic-size/
- ZeroGravitas 8y ago
  It mentions that Chrome will download the first 2k of each image. I'd guess this intended to get the size to avoid this.
- JetSpiegel 8y ago
  Firefox at least has implemented Scroll Anchoring. https://hacks.mozilla.org/2019/03/scroll-anchoring-in-firefox-66/ https://hacks.mozilla.org/2019/03/scroll-anchoring-in-firefo...
revskill 8y ago
That's why i love React Suspense very much. It offers the flexibility in the hand of developers instead of some inflexible native API. <Suspense fallback={<Placeholder />}> <Image src="" /> </Suspense> When SSR, this one will show a real <img> tag. When SPA, this one will lazy load image. A Win-Win for both devs and customers.
leshow 8y ago
Is this something just chrome is implementing or is this actually part of the HTML standard now?
- stonogo 8y ago
  The HTML standard is "things chrome is implementing"
  - anoncake 8y ago
    AKA living document.
  - leshow 8y ago
    That's what scares me
eschaton 8y ago
Why would you have ever written JavaScript to lazy-load images? The browser knows what’s on the page and can optimize its loading already. Don’t screw with that. This kind of assistance from the browser is why. Also, you don’t need to run code in documents. Web pages are documents.

115 points by skellertor 8y ago

Hmm, I guess this is good news for WordPress users who won't have to rely on a plugin to do this? Excited to see what else they are going to bring to the browser to speed up sites.

megaman821 8y ago
I think the virtual scroller will be performance boon for many sites. https://chromestatus.com/feature/5673195159945216 https://chromestatus.com/feature/5673195159945216

georgecalm 8y ago

I’m excited about this. There’s usually a ton unnecessary CPU usage with the current techniques, not to mention the human time waste of re-implementing them in JS. There’s feature detection for this too, so we can gracefully degrade “loading” to existing solutions and take advantage of it right away.

s_y_n_t_a_x 8y ago

Does this support aborting the network call if you scroll the element offscreen before it loads? That's essential to infinite scrolling.

radarsat1 8y ago

Ah right, lazy loading, this is the reason that I have to make sure to scroll down the entire length of a medium.com article I'm reading on my phone and back to the top again to make sure the diagrams and math-as-images load completely before I get on a subway line that doesn't have 3g service. Hate it when I forget. Otherwise I'm left staring at blurry lines that don't explain much about what trying to read until it's time to get off. Sucks when my commute is 40 minutes straight on the same line. I guess an advantage of a 'native' feature could be that browsers could offer a button saying 'please pre-load this page!'

reaperducer 8y ago
The problem with the tech bubble these days is that people within it assume that everyone has the same internet connectivity they do. And that they have it all the time. Sadly, Apple has been like this since since at least the late 1980's. Out in the desert trying to help 150 children sign up for health care coverage and need to look something up via satellite connection? Oh, wait... the macOS is downloading Garage Band crap in the background that I didn't ask for and don't need. (I don't remember if Garage Band was the offender, but it was one of the pointless programs wasting space on my business computer). Just like app developers who only test their apps on the high-end phones they have, not the phones that the majority of people have. For the web sites I make for work, I test them on all kinds of devices. But I make sure that they all work on the cheapest pre-paid smartphone I could find at 7-Eleven. The internet was built to bring universal information to all, not just Flash games to the rich.
- danaris 8y ago
  Apple's hardly the only offender here, and if you don't want the iLife programs on a Mac, removing them is trivial. Drag to trash, empty, boom, gone. Apple doesn't do anything to impede removal, nor does it aggressively try to push them on you like so much of the bloatware preloaded on Windows machines. (And if you had GarageBand in the late 1980s, then I definitely want to know who sold you your time machines...)
  - reaperducer 8y ago
    Drag to trash, empty, boom, gone. And then they’re back after the next OS upgrade.
    - danaris 8y ago
      Are you sure this is still true? I know it was for a while, but since the iLife apps were added to the Mac App Store, I thought they no longer reinstalled automatically, and if you wanted them back you just downloaded them from the Store. However, I haven't deleted them myself, so I don't know offhand.

oftenwrong 8y ago

Why would I want the loading behaviour of images to be chosen by the site I am browsing? I would prefer to choose for myself whether images load eagerly or lazily on all sites I visit. This way, I would always know which type of loading to expect as I browse, and I would always get the type of loading I prefer.

karmakaze 8y ago
This is toward the same goal. By standardizing it, browsers would be able to give you a lazy loading preference rather than sites implement their own in script that a browser/user can't override.
- ksec 8y ago
  Well then the problem is users with different browser will get vastly different experience depending on the Browser Vendor, not the site owner.
leeoniya 8y ago
saving bandwidth for the user is one benefit. saving bandwidth for the host is the second. a large number of users never even make it below the fold, why should i serve them high res images they'll never see?
- ZoomZoomZoom 8y ago
  There's such thing as clickable thumbnails, as you may have heard.
dbbk 8y ago
It seems like the loading behaviour is not chosen by the sites, per se. The options (lazyload or eager) are documented as being 'recommendations' to the browser. The default setting is "auto" which means it's up to the browser. So theoretically the browser could still give the user a setting.

really3452 8y ago

I hope they add an optional setting. IE: <img src="celebration.jpg" loading="optional" alt="..." /> Then there is a place-holder graphic in place that you could click on to load the image.

lol768 8y ago

This attribute appears to have been proposed and implemented by Google. Has any other vendor expressed an intent to implement/actually implemented this yet? It seems a little premature to describe this as native support "for the web" if the functionality is limited to one vendor and you're forced to use a polyfill everywhere else.

franga2000 8y ago
The driving force behind this feature do seem to be a couple of Googlers, but at least one person from Mozilla and one from Apple have been involved in the discussion and contributed to the spec changes. The changes have not been accepted into the spec, however, or even reviewed by W3C-TAG, so it isn't a standard yet. You can find the full discussion here: https://github.com/whatwg/html/pull/3752 https://github.com/whatwg/html/pull/3752
- bzbarsky 8y ago
  The Mozilla person involved in that discussion is the editor of the relevant spec, and is only involved in terms of making sure the changes are correctly indicated in the spec. I don't believe he has expressed any opinion on the changes themselves. I just filed https://github.com/mozilla/standards-positions/issues/151 https://github.com/mozilla/standards-positions/issues/151 on getting an actual Mozilla position on this.

gardaani 8y ago

I hope that they ship this with image intrinsicsize / aspect-ratio or whatever it is called now. Otherwise this lazy-loading will make page jumping and layout instability worse, because images are loaded only after the user has scrolled to their position. https://googlechrome.github.io/samples/intrinsic-size/ https://googlechrome.github.io/samples/intrinsic-size/

ZeroGravitas 8y ago
It mentions that Chrome will download the first 2k of each image. I'd guess this intended to get the size to avoid this.
JetSpiegel 8y ago
Firefox at least has implemented Scroll Anchoring. https://hacks.mozilla.org/2019/03/scroll-anchoring-in-firefox-66/ https://hacks.mozilla.org/2019/03/scroll-anchoring-in-firefo...

revskill 8y ago

That's why i love React Suspense very much. It offers the flexibility in the hand of developers instead of some inflexible native API. <Suspense fallback={<Placeholder />}> <Image src="" /> </Suspense> When SSR, this one will show a real <img> tag. When SPA, this one will lazy load image. A Win-Win for both devs and customers.

leshow 8y ago

Is this something just chrome is implementing or is this actually part of the HTML standard now?

stonogo 8y ago
The HTML standard is "things chrome is implementing"
- anoncake 8y ago
  AKA living document.
- leshow 8y ago
  That's what scares me

eschaton 8y ago

Why would you have ever written JavaScript to lazy-load images? The browser knows what’s on the page and can optimize its loading already. Don’t screw with that. This kind of assistance from the browser is why. Also, you don’t need to run code in documents. Web pages are documents.