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/result_templates/images.html | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

(limited to 'searx/templates/simple/result_templates')

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