From 16762b4bc49ca022966b98e39a8907e74325f993 Mon Sep 17 00:00:00 2001
From: daudix <ddaudix@gmail.com>
Date: Mon, 29 Jul 2024 17:47:26 +0300
Subject: [PATCH] Images can be lazy as well! (fixes #39)

---
 templates/article.html           |  2 +-
 templates/partials/comments.html | 13 +++++++++++++
 templates/shortcodes/image.html  |  8 ++++++--
 3 files changed, 20 insertions(+), 3 deletions(-)

diff --git a/templates/article.html b/templates/article.html
index 1ed53f3..9473deb 100644
--- a/templates/article.html
+++ b/templates/article.html
@@ -7,7 +7,7 @@
 <article>
 	{%- if page.extra.banner -%}
 		<div id="banner-container">
-			<img id="banner" class="full-bleed" src="{{ current_url | safe }}{{ page.extra.banner }}" />
+			<img id="banner" class="full-bleed" src="{{ current_url | safe }}{{ page.extra.banner }}" {%- if config.markdown.lazy_async_image -%}decoding="async" loading="lazy"{%- endif -%} />
 		</div>
 	{%- endif -%}
 
diff --git a/templates/partials/comments.html b/templates/partials/comments.html
index 92467ab..6fb9780 100644
--- a/templates/partials/comments.html
+++ b/templates/partials/comments.html
@@ -61,6 +61,10 @@
 				img.setAttribute("src", escapeHtml(emoji.static_url));
 				img.setAttribute("alt", `:${emoji.shortcode}:`);
 				img.setAttribute("title", `:${emoji.shortcode}:`);
+				{%- if config.markdown.lazy_async_image -%}
+					img.setAttribute("decoding", "async");
+					img.setAttribute("loading", "lazy");
+				{%- endif -%}
 
 				picture.appendChild(source);
 				picture.appendChild(img);
@@ -141,6 +145,10 @@
 								"alt",
 								`@${status.account.username}@${instance} avatar`
 							);
+							{%- if config.markdown.lazy_async_image -%}
+								avatarImg.setAttribute("decoding", "async");
+								avatarImg.setAttribute("loading", "lazy");
+							{%- endif -%}
 
 							let avatarPicture = document.createElement("picture");
 							avatarPicture.appendChild(avatarSource);
@@ -220,6 +228,11 @@
 													mediaElement.setAttribute("title", attachment.description);
 												}
 
+												{%- if config.markdown.lazy_async_image -%}
+													mediaElement.setAttribute("decoding", "async");
+													mediaElement.setAttribute("loading", "lazy");
+												{%- endif -%}
+
 												media.appendChild(mediaElement);
 												break;
 
diff --git a/templates/shortcodes/image.html b/templates/shortcodes/image.html
index 64999a1..5d9726a 100644
--- a/templates/shortcodes/image.html
+++ b/templates/shortcodes/image.html
@@ -10,7 +10,9 @@
 			{% if no_hover %}no-hover{% endif %}
 		"
 		{%- if alt -%}alt="{{ alt }}"{%- endif -%}
-		src="{{ url_min }}" />
+		src="{{ url_min }}"
+		{%- if config.markdown.lazy_async_image -%}decoding="async" loading="lazy"{%- endif -%}
+		/>
 	</a>
 {%- else -%}
 	<img class="
@@ -23,5 +25,7 @@
 			{% if no_hover %}no-hover{% endif %}
 		"
 		{%- if alt -%}alt="{{ alt }}"{%- endif -%}
-		src="{{ url }}" />
+		src="{{ url }}"
+		{%- if config.markdown.lazy_async_image -%}decoding="async" loading="lazy"{%- endif -%}
+		/>
 {%- endif -%}