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: [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/templates/simple/macros.html | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

(limited to 'searx/templates/simple/macros.html')

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 -%}
 
-- 
cgit v1.2.3