From c4164649496d3b1b3ffa8b6b01b750903a0edffd Mon Sep 17 00:00:00 2001
From: Markus Heiser <markus.heiser@darmarit.de>
Date: Wed, 1 Dec 2021 18:05:25 +0100
Subject: [PATCH] [fix] lazy loading of <img> tags
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Images should include dimension attributes.  Without `width` and `height`
specified, image dimensions are 0×0 pixels at first.  ...  In this case the
browser determines that all of them are visible to the user and decides to load
everything [1].

In CSS the `width` is set to a value and the `height` is unsed to scale the image
proportional in both dimensions.

[1] https://web.dev/browser-level-image-lazy-loading/#images-should-include-dimension-attributes
[2] https://caniuse.com/loading-lazy-attr

Signed-off-by: Markus Heiser <markus.heiser@darmarit.de>
---
 searx/static/themes/simple/src/less/style.less      | 1 +
 searx/templates/simple/macros.html                  | 4 ++--
 searx/templates/simple/result_templates/images.html | 4 ++--
 3 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/searx/static/themes/simple/src/less/style.less b/searx/static/themes/simple/src/less/style.less
index 5e015579c..bb983838b 100644
--- a/searx/static/themes/simple/src/less/style.less
+++ b/searx/static/themes/simple/src/less/style.less
@@ -267,6 +267,7 @@ article[data-vim-selected].category-social {
       float: left;
       padding: 0.6rem 1rem 0 0;
       width: 20rem;
+      height: unset; // remove heigth value that was needed for lazy loading
     }
 
     &.image {
diff --git a/searx/templates/simple/macros.html b/searx/templates/simple/macros.html
index 3920da2b3..c1c421ab1 100644
--- a/searx/templates/simple/macros.html
+++ b/searx/templates/simple/macros.html
@@ -23,8 +23,8 @@
   <span class="url_o{{loop.index}}"><span class="url_i{{loop.index}}">{{- part -}}</span></span>
   {%- endfor %}
   {{- result_close_link() -}}
-  {%- if result.img_src %}{{ result_open_link(result.url) }}<img class="image" src="{{ image_proxify(result.img_src) }}" title="{{ result.title|striptags }}">{{ result_close_link() }}{% endif -%}
-  {%- if result.thumbnail %}{{ result_open_link(result.url) }}<img class="thumbnail" src="{{ image_proxify(result.thumbnail) }}" title="{{ result.title|striptags }}">{{ result_close_link() }}{% endif -%}
+  {%- if result.img_src %}{{ result_open_link(result.url) }}<img class="image" src="{{ image_proxify(result.img_src) }}" title="{{ result.title|striptags }}" loading="lazy" width="200" height="200">{{ result_close_link() }}{% endif -%}
+  {%- if result.thumbnail %}{{ result_open_link(result.url) }}<img class="thumbnail" src="{{ image_proxify(result.thumbnail) }}" title="{{ result.title|striptags }}" loading="lazy" width="200" height="200">{{ result_close_link() }}{% endif -%}
   <h3>{{ result_link(result.url, result.title|safe) }}</h3>
 {%- endmacro -%}
 
diff --git a/searx/templates/simple/result_templates/images.html b/searx/templates/simple/result_templates/images.html
index 7e45f028e..e521ee211 100644
--- a/searx/templates/simple/result_templates/images.html
+++ b/searx/templates/simple/result_templates/images.html
@@ -1,6 +1,6 @@
 <article class="result result-images {% if result['category'] %}category-{{ result['category'] }}{% endif %}">{{- "" -}}
         <a {% if results_on_new_tab %}target="_blank" rel="noopener noreferrer"{% else %}rel="noreferrer"{% endif %} href="{{ result.img_src }}">{{- "" -}}
-                <img class="image_thumbnail" {% if results_on_new_tab %}target="_blank" rel="noopener noreferrer"{% else %}rel="noreferrer"{% endif %} src="{% if result.thumbnail_src %}{{ image_proxify(result.thumbnail_src) }}{% else %}{{ image_proxify(result.img_src) }}{% endif %}" loading="lazy" alt="{{ result.title|striptags }}">{{- "" -}}
+                <img class="image_thumbnail" {% if results_on_new_tab %}target="_blank" rel="noopener noreferrer"{% else %}rel="noreferrer"{% endif %} src="{% if result.thumbnail_src %}{{ image_proxify(result.thumbnail_src) }}{% else %}{{ image_proxify(result.img_src) }}{% endif %}" alt="{{ result.title|striptags }}" loading="lazy" width="200" height="200">{{- "" -}}
                 <span class="title">{{ result.title|striptags }}</span>{{- "" -}}
         </a>{{- "" -}}
         <div class="detail">{{- "" -}}
@@ -11,7 +11,7 @@
                         {%- if result.thumbnail_src -%}
                                 <img src="" data-src="{{ image_proxify(result.img_src) }}" alt="{{ result.title|striptags }}">
                         {%- else -%}
-                                <img src="{{ image_proxify(result.img_src) }}" alt="{{ result.title|striptags }}" loading="lazy">
+                                <img src="{{ image_proxify(result.img_src) }}" alt="{{ result.title|striptags }}" loading="lazy" width="200" height="200">
                         {%- endif -%}
                 </a>{{- "" -}}
                 <div class="result-images-labels">{{- "" -}}