nitter Lazyload images

Thanks for creating Nitter, it is a joy to use :heart: - and so much faster than Twitter :rocket:

Most pages have lots of images (profile, avatars next to each tweet, shared images in tweet, etc.) so my suggestion is to use the loading attribute to only load images when they are visible (lazy loading) https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#loading

It is supported by modern browsers (if unsupported they just ignore it), easy to implement and no javascript is needed. https://caniuse.com/loading-lazy-attr

This small change will significantly reduce bandwith. :+1: Thanks and have a nice day!

Jan 28 '24 11:01 uok

Or have something that lets people selectively choose what type of media they want to see. Like https://github.com/zedeus/nitter/issues/1055. Sometimes I do not want to see profile images, uploaded images, images from outside Twitter, animated GIFs, videos, etc.

Jan 28 '24 20:01 pin-grid-array

Hopefully this could also help with #1109 .

Jan 30 '24 16:01 Petemir

These are the changes needed to enable lazy loading in images:

src/views/renderutils.nim

@@ proc genDate*(pref, state: string): VNode =
-    img(src=getPicUrl(url), class=class, alt="")
+    img(src=getPicUrl(url), class=class, loading="lazy", alt="")

src/views/tweet.nim

@@ const doctype = "<!DOCTYPE html>\n"
-    img(class=(prefs.getAvatarClass & " mini"), src=url)
+    img(class=(prefs.getAvatarClass & " mini"), src=url, loading="lazy")

@@ renderVideo*(video: Video; prefs: Prefs; path: string): VNode =
         if not video.available:
-          img(src=thumb)
+          img(src=thumb, loading="lazy")
           renderVideoUnavailable(video)
         elif not prefs.isPlaybackEnabled(playbackType):
-          img(src=thumb)
+          img(src=thumb, loading="lazy")

@@ proc renderPoll(poll: Poll): VNode =
 proc renderCardImage(card: Card): VNode =
   buildHtml(tdiv(class="card-image-container")):
     tdiv(class="card-image"):
-      img(src=getPicUrl(card.image), alt="")
+      img(src=getPicUrl(card.image), alt="", loading="lazy")

Then re-build docker image

Feb 01 '24 06:02 Petemir