On mobile we lazy load images with our own JavaScript implementation. We try to only download images that are showed for the user. This is good because:
- The page is downloaded fast for the user (images comes when needed).
- We save bytes for the user, so users that pays per byte only pays for images they actually see.
- Shipping less bytes means less CO2 impact from Wikipedia.
Since we did the implementation some browsers started to implement native image loading (see T230812). At the moment it looks like this:
- Chrome has implemented lazy loading. Theres a problem though, there's no solution for printing pages (missing images). The upstream task for that is https://bugs.chromium.org/p/chromium/issues/detail?id=875403
- Firefox says it will be included in Firefox 75 (release April 2020) but it seems to be some issues left, we should reach out to them about status and printing https://bugzilla.mozilla.org/show_bug.cgi?id=1542784
- Safari the main issue has been implemented in https://bugs.webkit.org/show_bug.cgi?id=200764 but I haven't found any info on print and when it will be released.
Yesterday we had a meeting (@Gilles @Krinkle @Jdlrobson) and I think we reached a conclusion on the way forward:
- For browsers that support native lazy loading, we should use that. For that to happen we need to influence browser vendors to fix the printing problem.
- Older browser that supports the Intersection Observer API should use that (that means we need re-implement our solution).
- Other browsers (Firefox 48 in Kai OS for example) should not load images by default and instead have click to load functionality (as suggested by @Gilles). Needs an product decision and I think if you try Wikipedia on a Kai OS device you will agree.
Using native and Intersection Observer will make lazy loading source code easier and make it easier to maintain our code base. The current code is also slow on low CPU devices (checkout the two videos on T246767) for an example.
If we have a solid implementation using native browser code, we can also start to try out lazy loading on desktop.