Images can be lazy as well! (fixes #39)

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 -%}
 

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;
 

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 -%}