diff options
| author | Markus Heiser <markus.heiser@darmarit.de> | 2021-12-01 18:05:25 +0100 |
|---|---|---|
| committer | Markus Heiser <markus.heiser@darmarit.de> | 2021-12-15 10:39:55 +0100 |
| commit | c4164649496d3b1b3ffa8b6b01b750903a0edffd (patch) | |
| tree | 7bdabef8bd9ceec00a92026104af88b1c985a702 /searx/templates/simple/macros.html | |
| parent | da1f970eb50e9a48a25e9cb240585f8d81a5459a (diff) | |
[fix] lazy loading of <img> tags
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>
Diffstat (limited to 'searx/templates/simple/macros.html')
| -rw-r--r-- | searx/templates/simple/macros.html | 4 |
1 files changed, 2 insertions, 2 deletions
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 -%} |