Hacker Newsnew | past | comments | ask | show | jobs | submitlogin
Native image lazy-loading for the web (addyosmani.com)
115 points by skellertor on April 7, 2019 | hide | past | favorite | 42 comments


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!'


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.


> 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.

> 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.

I'm a little surprised by your reaction to this feature, accusing it of being part of the tech bubble, given that you said that you make sure to develop for the phones that the majority of people have. Part of the motivation for native lazy-loading is to provide a better web experience for people in countries where network data costs a lot. Lazy-loading images is a step in the right direction, because it helps ensure that the only images that users download are the ones they look at.

It's not a perfect solution, as radarsat1's use case demonstrates. But it seems like a step in the right direction.

Disclosure: I work on the same team as Addy. I'm not speaking on behalf of the team, just commenting based on my understanding of the motivation for features like this.


> The problem with the tech bubble these days is that people within it assume that everyone has the same internet connectivity they do.

Heheh don't feel too bad for me, I live in a major European city with service on most of the lines. Just not _all_ of them -- so I suspect that's the same for most people.


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...)


Drag to trash, empty, boom, gone.

And then they’re back after the next OS upgrade.


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.


As someone who reads a lot of articles online, I agree with you.

Medium, and similar websites, should push their images via HTTP2.

But as everything in life, it depends, read my use case for lazy loading…

I maintain a few marketing websites for a game studio, and as you can guess these websites contain several high-resolution images that —according to the marketing team— need to be loaded all together from the front page. This is obviously a stupid requirement, but I don’t get paid to complain, instead I decided to add lazy loading to these websites. Many users just visit the home page to access the navigation bar, and jump to internal pages specific to the games they are interested in, they don’t care about the rest of the content, so why should I —as the maintainer of these websites— force the immediately download of all these heavy images?

I, too, pay for a limited mobile plan (CAD $95 for only 3GB per month, yeah, I know, it’s very expensive) so of course I want to avoid the download of unnecessary resources from every website I visit. Unfortunately, I do not maintain every major website in the Internet, so I cannot optimize things for the masses. I can only give a good example using the websites I maintain. I am looking forward to have `loading="auto"` enabled by default in every modern web browser, that or 5G with less expensive data plans, but that’s a different story.


By using the img tag, you dont force the download of those images. The browser decides to download them eagerly, rather than lazily. That is outside your responsibility.


Arguably, Apple already offers a version of a “pre-load” button in Safari (on iOS and macOS), with the setting to “Automatically save Reading List articles for offline reading”. (Not on by default, but the user sees a prompt to turn it on the first time they add an article to the Reading List.)

Ideally, you could add an article to the Reading List on your computer, and then view it later on your phone that downloaded it in the background when it still had network access.

In practice, my quick testing results just now were mixed: Safari kept saying that a Medium article wasn’t available offline, a Quartz article only loaded the header (with what looked like a fully-opaque white overlay covering the content itself), but a Daring Fireball post (i.e., without any JavaScript trickery) loaded just fine.

A how-to for this feature: https://www.macworld.com/article/3252168/how-to-set-offline-...


Even better than a page by page preload button would be for the OS to know when you are about to leave reliable internet coverage (based on location, or schedule, previous usage patterns, or even just a toggle).

The OS could then automatically apply this to website load behavior, and apps could request permission to receive this information too. E.g. Spotify could pre buffer more of the playlist you’re listening to, and news reader apps could load a few articles in advance.


> I guess an advantage of a 'native' feature could be that browsers could offer a button saying 'please pre-load this page!'

I think you are spot-on here. The current JavaScript hacks cause problems, handing the control to the browser is a much better solution.


> I guess an advantage of a 'native' feature could be that browsers could offer a button saying 'please pre-load this page!'

You don't need a native feature for that. Just emulate a big screen and dispatch a scroll event, that's what SingleFile [1] does.

[1] https://github.com/gildas-lormeau/SingleFile


I'm confused, the page you linked states,

> Wait until the page is fully loaded, you may need to scroll down the entire page to be sure all elements are loaded.

You say it solves this, but then why does it say this?


You may need... I cannot guarantee it will work 100% of time, but it works very well. Try the extension on Medium for example, you should be able to save the whole page without needing to scroll.


This. Although I have to say Offline Reading List in Safari is made for this.

I like the basic loading idea, I think it is a little problematic since the Browser Vendor gets to decide how it is loaded. I kind of understand why we need this with, but most of the implementation sucks. They keep thinking about optimising for Network, bandwidth or resources and not the User Experience.

In the Medium Example, I don't want to see image loading, it is annoying. Images should always be preloaded before I scroll down. Something like ~2 / 3 Fold below the current view should have been fully loaded. So Scrolling ( In general pace ) down all content should be there already.


the correct way would be to still load images out of view and prioritize those in view.

but I'm also worried about the "unloading" of these resources. with a proper implementation you don't only load first images into view and preload the others, but also unload those out of view to ease the compositing load on older gpu - and older iphones that have most their ram eaten by the updated ios are really problematic, especially because when the gpu crashes with an out of memory error safari shows a "the website crashed" message that puts the blame on the page instead on its own shitty memory management.


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

I guess not on Medium, but it's very common for sites to unload any image that isn't in the viewport, so...the joke's on us.


Lazy loading has its advantage and medium.com could have done better. The images / diagrams can be lazy loaded after initial HTML content is rendered, and there is no need to wait for user to scroll the image in viewport in order to start loading the image.


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.


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.


Well then the problem is users with different browser will get vastly different experience depending on the Browser Vendor, not the site owner.


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?


There's such thing as clickable thumbnails, as you may have heard.


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.


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.


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


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 on getting an actual Mozilla position on this.


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/


Firefox at least has implemented Scroll Anchoring.

https://hacks.mozilla.org/2019/03/scroll-anchoring-in-firefo...


It mentions that Chrome will download the first 2k of each image. I'd guess this intended to get the size to avoid this.


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.


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.


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


The HTML standard is "things chrome is implementing"


That's what scares me


AKA living document.


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.


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.


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


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


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.




Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact

Search: