diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
index 4e005c8..dc1979f 100644
--- a/layouts/_default/baseof.html
+++ b/layouts/_default/baseof.html
@@ -1,4 +1,5 @@
+
@@ -8,7 +9,7 @@
-
+
{{ $style := resources.Get "/sass/main.scss" | resources.ToCSS }}
diff --git a/layouts/_default/single.html b/layouts/_default/single.html
index 1a2d1fa..d02df25 100644
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@@ -7,7 +7,7 @@
{{ range (.GetTerms "tags") }}
<a class="small-text" href="{{ .Permalink }}">{{ .LinkTitle }}</a>
{{ end}}
- <img class="shadow large-image" srcset="{{ .Params.featured.srcset }}" src="{{ .Params.featured.url }}" alt="{{ .Params.featured.alt }}"/>
+ {{ partial "responsive-image.html" (dict "context" .Params.featured "class" "shadow large-image") }}
</div>
{{ if .Params.toc }}
diff --git a/layouts/partials/article-card.html b/layouts/partials/article-card.html
index c9d24a9..8ce9baf 100644
--- a/layouts/partials/article-card.html
+++ b/layouts/partials/article-card.html
@@ -1,7 +1,7 @@
<article class="shadow float-on-hover card">
<div class="article-image">
<a href=" {{ .Permalink }}">
- <img class="fill-wh" src="{{ .Params.featured.url }}" srcset="{{ .Params.featured.srcset }}" alt="{{ .Params.featured.alt }}"/></a>
+ {{ partial "responsive-image.html" (dict "context" .Params.featured)}}
</div>
<div class="article-info-container">
<div class="article-info">
diff --git a/layouts/partials/header.html b/layouts/partials/header.html
index 218a442..e29e4e1 100644
--- a/layouts/partials/header.html
+++ b/layouts/partials/header.html
@@ -1,6 +1,6 @@
<header>
<nav class="spread">
- <a href="/"><img src="/images/logo.svg"/></a>
+ <a href="/"><img src="/images/logo.svg" alt="The {{ .Site.Title }} Logo"/></a>
<ul class="spread">
<li><a href="https://gitea.beetbox.io/BeetBox" title="Gitea Repositories">Gitea</a></li>
<li><a href="https://odysee.com/@BeetBox:f" title="Odysee Channel">Odysee</a></li>
diff --git a/layouts/partials/responsive-image.html b/layouts/partials/responsive-image.html
new file mode 100644
index 0000000..0f39add
--- /dev/null
+++ b/layouts/partials/responsive-image.html
@@ -0,0 +1,10 @@
+<img class="{{ .class | default "fill-wh"}}"
+ {{ with resources.Get .context.url }}
+ srcset="
+ {{ (.Resize "320x q30").RelPermalink }} 320w,
+ {{ (.Resize "600x q40").RelPermalink }} 600w,
+ {{ (.Resize "1200x q65").RelPermalink }} 2x"
+ src="{{ .RelPermalink }}"
+ {{ end }}
+ alt="{{ .context.alt }}"
+/>