@phuedx asked me to write this.
We talked about the proposal and I argued that this is the lowest risk change we can make to resolve all the subtasks of If we find this doesn't help those bugs and doesn't we should revert the patch and try something else.

Preliminary estimates varied between 2 and 5.

Change 347649 had a related patch set uploaded (by Pmiazga):
[mediawiki/extensions/MobileFrontend@master] Don't lazy load small images (smaller than 50px)

https://gerrit.wikimedia.org/r/347649

I made a test case that covers all the problems we have with lazy loaded images.
http://reading-web-staging.wmflabs.org/w/index.php?title=Lazy_images_are_the_bane_of_my_existence&mobileaction=toggle_view_mobile

The following table tests different solutions against our open bugs.

A couple of questions:

• How does the proposed solution work when images can be in non-pixel, e.g. ex, units?
• Are we not trying to reduce bytes shipped with lazy-loaded images? If so, then the acceptance criterion of looking at the width or height of an image and comparing it to 50px doesn't sound good because, an image may have a width of 50px and a height of 999px. It would be wise to lazyly load such images.

I suggest we use the weight of an image, in KB for example, to decide whether to lazyly load it or not.

@bmansurov proposed solution allows all images smaller than 50px or 10ex (width or height)

In T162623#3199506, @pmiazga wrote:

@bmansurov proposed solution allows all images smaller than 50px or 10ex (width or height)

I don't see the mention of '10ex' in the description. Also, that doesn't answer my second question, does it?

These are the solutions on the table:

1. We unconditionally load images where width or height is <50px. ( rEMFR6177cf09cb63: Don't lazy load small images (smaller than 50px)+ rEMFRdc00c36bdb8f: Restrict lazy loaded images to the viewport)

The trade off of this solution is we will load more bytes of images. So @bmansurov yes in your example, 50x999 will be loaded. That's a rare edge case on Wikipedia but it's something we have to agree with to go with this solution.

2. We use replaceWith ( rEMFR162394330f99: POC: Use JavaScript to animate the ease-in of lazy loaded image )

The issue with this is that there will be noticeable reflows in certain articles (see T146298 ... but I suspect there's a bug there unrelated to lazy loading images) and there is a slight change in the loading animation which has been approved by @Nirzar

3. Use bytes ( ? )

As @bmansurov suggests we could use bytes, but I'm not sure how that works. We have a URL not a filepath. How does that work for foreign files on a different domain? I'm worried that might be a little expensive. If someone wants to put a strawman solution for this go for it.

I should add none of the three solutions will fix T160946. It turns out that's unrelated to lazy loaded images.
I believe T160527 is already fixed on master so I haven't verified solutions against that.
Evaluating solution 1 and 2, both would be fine and solve the underlying bug.
I'm going to investigate T146298 a little more to see if I can understand what's going on there since it seems to be the main disadvantage of solution 2.

@bmansurov yes, I just answered your first question.

As we found out that all math images use ex instead of px I added another check - dimension has to be smaller than 10ex or 50px.
10ex was picked by checking many pages with Math equations and most of images were smaller than 10ex.

PS3 rEMFR0737ec068fe5: Use JavaScript to animate the ease-in of lazy loaded image seems to reduce the issue of reflows. @Krinkle I'd be interested in your thoughts about it. I've been trying it out on some real articles such as http://reading-web-staging.wmflabs.org/w/index.php?title=Black-body_radiation and I'm not seeing any nasty side effects...

@pmiazga let's chat tomorrow or Monday. Sorry for the change in scope!

Thanks. Left a comment at https://gerrit.wikimedia.org/r/349275.

Change 347649 merged by jenkins-bot:
[mediawiki/extensions/MobileFrontend@master] Don't lazy load small images (smaller than 50px or 10ex)

https://gerrit.wikimedia.org/r/347649

Sub-tickets are resolved. Ready for sign-off