diff --git a/assets/sass/main.scss b/assets/sass/main.scss
index 96655b0..f919b82 100644
--- a/assets/sass/main.scss
+++ b/assets/sass/main.scss
@@ -1678,4 +1678,7 @@
 
     }
 
+{{ with (index ( index .Site.Data .Site.Language.Lang | default .Site.Data ) "homepage" "header" "image") -}}
+  $header-image: "{{- . -}}";
+{{- end }}
 @import 'custom.scss';
diff --git a/layouts/_default/list.html b/layouts/_default/list.html
index fec6ecf..faf9ed1 100644
--- a/layouts/_default/list.html
+++ b/layouts/_default/list.html
@@ -1,17 +1,50 @@
 {{ define "main" }}
-    <header>
-        <h2>{{ .Title }}</h2>
-        {{ with .Description -}}
-            <p>{{ . }}</p>
-        {{- end }}
-    </header>
-
-    {{- if .Params.image }}
-        <span class="image featured"><img src="{{ .Params.image | relURL }}" alt="{{ .Params.image_alt }}" /></span>
+  <header>
+    <h2>{{ .Title }}</h2>
+    {{ with .Description }}
+      <p>{{ . }}</p>
     {{ end }}
+  </header>
 
-    {{ range .RegularPages }}
-        {{ .Render "shortblock" }}
-    {{ end }}
+  {{- if .Params.image }}
+    {{- $alt := .Params.image_alt | default .Title -}}
+    {{- with $img := resources.Get .Params.image }}
+      {{ $image_options := $.Site.Params.image_options | default "webp q85 lanczos photo" }}
+      <picture class="image featured">
+        {{- $breakpoints := slice 1920 1600 1366 900 600 360 -}}
+        {{- range $bp := $breakpoints }}
+          {{- if le $bp .Width }}
+            {{- with .Resize (printf "%dx %s" $bp $image_options) }}
+              <source srcset="{{ .RelPermalink }}" type="{{ .MediaType.Type }}" media="(max-width: {{ $bp }}px)">
+            {{- end }}
+          {{- end }}
+        {{- end }}
+
+        {{- /* Fallback: full-sized optimized image */ -}}
+        {{- with .Resize (printf "%dx %s" .Width $image_options) }}
+          <img 
+            src="{{ .RelPermalink }}" 
+            srcset="{{- range $bp := $breakpoints -}}
+                      {{- with $.Resize (printf "%dx %s" $bp $image_options) -}}
+                        {{ .RelPermalink }} {{ .Width }}w,
+                      {{- end -}}
+                    {{- end -}}"
+            sizes="(max-width: 1920px) 100vw, 1920px"
+            alt="{{ $alt }}" 
+            width="{{ .Width }}" 
+            height="{{ .Height }}" 
+            loading="lazy"
+            class="img-fluid" />
+        {{- end }}
+      </picture>
+    {{- else }}
+      <span class="image featured">
+        <img src="{{ .Params.image | relURL }}" alt="{{ $alt }}">
+      </span>
+    {{- end }}
+  {{ end }}
 
+  {{ range .RegularPages }}
+    {{ .Render "shortblock" }}
+  {{ end }}
 {{ end }}
diff --git a/layouts/_default/shortblock.html b/layouts/_default/shortblock.html
index f85b0fb..2a3adac 100644
--- a/layouts/_default/shortblock.html
+++ b/layouts/_default/shortblock.html
@@ -1,18 +1,55 @@
 <section class="col-6 col-12-narrower">
-    <div class="box post">
-        <a href="{{ .RelPermalink }}" class="image left"><img src="{{ .Params.image | relURL }}" alt="{{ .Params.image_alt }}" /></a>
-        <div class="inner">
-            <h3><a href="{{ .RelPermalink }}">{{ .Title }}</a></h3>
-            {{ if .Site.Params.show_post_dates | default true }}
-                {{- with .Date }}<time>{{ . | time.Format ":date_medium" }}</time>{{ end }}
-            {{ end }}
-            <p>
-                {{ with .Description }}
-                    {{- . }}
-                {{- else }}
-                    {{- .Summary }}
-                {{- end }}
-            </p>
-        </div>
+  <div class="box post">
+    <a href="{{ .RelPermalink }}" class="image left">
+      {{- $alt := .Params.image_alt | default .Title -}}
+      {{- with $img := resources.Get .Params.image }}
+        {{ $image_options := $.Site.Params.image_options | default "webp q85 lanczos photo" }}
+        {{- $breakpoints := slice 800 600 400 300 -}}
+        {{- $orig := $img -}}
+
+        <picture>
+          {{- range $bp := $breakpoints }}
+            {{- if le $bp $orig.Width }}
+              {{- with $orig.Resize (printf "%dx %s" $bp $image_options) }}
+                <source srcset="{{ .RelPermalink }}" type="{{ .MediaType.Type }}" media="(max-width: {{ $bp }}px)">
+              {{- end }}
+            {{- end }}
+          {{- end }}
+
+          {{- /* Fallback main image (max 800px) */ -}}
+          {{- with $orig.Resize (printf "800x %s" $image_options) }}
+            <img 
+              src="{{ .RelPermalink }}"
+              srcset="{{- range $bp := $breakpoints -}}
+                        {{- with $orig.Resize (printf "%dx %s" $bp $image_options) -}}
+                          {{ .RelPermalink }} {{ .Width }}w,
+                        {{- end -}}
+                      {{- end -}}"
+              sizes="(max-width: 800px) 100vw, 300px"
+              alt="{{ $alt }}"
+              width="{{ .Width }}"
+              height="{{ .Height }}"
+              loading="lazy"
+              class="img-fluid" />
+          {{- end }}
+        </picture>
+      {{- else }}
+        <img src="{{ .Params.image | relURL }}" alt="{{ $alt }}">
+      {{- end }}
+    </a>
+
+    <div class="inner">
+      <h3><a href="{{ .RelPermalink }}">{{ .Title }}</a></h3>
+      {{ if .Site.Params.show_post_dates | default true }}
+        {{- with .Date }}<time>{{ . | time.Format ":date_medium" }}</time>{{ end }}
+      {{ end }}
+      <p>
+        {{ with .Description }}
+          {{- . }}
+        {{- else }}
+          {{- .Summary }}
+        {{- end }}
+      </p>
     </div>
+  </div>
 </section>
diff --git a/layouts/_default/single.html b/layouts/_default/single.html
index 1a60c49..ed11b85 100644
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@@ -8,8 +8,28 @@ <h2>{{ .Title }}</h2>
         {{ partial "tags.html" . }}
     </header>
 
-    {{- if .Params.image }}
-        <span class="image featured"><img src="{{ .Params.image | relURL }}" alt="{{ .Params.image_alt }}" /></span>
+    {{- if .Params.image -}}
+    <span class="image featured">
+	{{- $alt := .Title -}}
+	{{- $img := resources.Get .Params.image -}}
+	{{- with $img -}}
+	    {{ $image_options := $.Site.Params.image_options | default "webp q85 lanczos photo" -}}
+	    <picture>
+	    {{ range $width := slice 1920 1600 1366 900 600 360 }}
+	    {{ if le $width $img.Width }}
+		{{- with $img.Resize ( printf "%dx %s" $width $image_options ) }}
+		<source srcset="{{ .RelPermalink }}" type="{{- .MediaType.Type -}}" media="(max-width: {{- .Width -}}px)">
+		{{- end }}
+	    {{- end }}
+	    {{- end }}
+	    {{- with $img.Resize ( printf "%dx%d %s" $img.Width $img.Height $image_options ) -}}
+		<img loading="lazy" src='{{ .RelPermalink }}' type="{{- .MediaType.Type -}}" width="{{- .Width -}}" height="{{- .Height -}}" class='img-fluid' alt='{{ $alt }}' />
+	    {{- end -}}
+	    </picture>
+	{{- else -}}
+        <img src="{{ .Params.image | relURL }}" alt="{{ .Params.image_alt }}" />
+	{{- end -}}
+    </span>
     {{ end }}
 
     {{- .Content }}
diff --git a/layouts/partials/head/head.html b/layouts/partials/head/head.html
index bfaa21c..7febd73 100644
--- a/layouts/partials/head/head.html
+++ b/layouts/partials/head/head.html
@@ -2,7 +2,7 @@
 {{ $style := resources.Get "sass/main.scss" | resources.ExecuteAsTemplate "main.scss" . | css.Sass $options }}
 <title>{{ if .IsHome }}{{ .Site.Title }}{{ else }}{{ .Title }} | {{ .Site.Title }}{{ end }}</title>
 <meta charset="utf-8" />
-<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
+<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
 <link rel="stylesheet" href="{{ $style.RelPermalink }}" />
 {{- partial "analytics/google-tag-manager/head.html" . -}}
 {{- partial "head/custom.html" . -}}
diff --git a/layouts/partials/scripts.html b/layouts/partials/scripts.html
index 381dc64..9141324 100644
--- a/layouts/partials/scripts.html
+++ b/layouts/partials/scripts.html
@@ -1,6 +1,11 @@
-<script src="{{ (resources.Get "js/jquery.min.js").RelPermalink }}"></script>
-<script src="{{ (resources.Get "js/jquery.dropotron.min.js").RelPermalink }}"></script>
-<script src="{{ (resources.Get "js/browser.min.js").RelPermalink }}"></script>
-<script src="{{ (resources.Get "js/breakpoints.min.js").RelPermalink }}"></script>
-<script src="{{ (resources.Get "js/util.js").RelPermalink }}"></script>
-<script src="{{ (resources.Get "js/main.js").RelPermalink }}"></script>
+{{- $js := slice
+    (resources.Get "js/jquery.min.js")
+    (resources.Get "js/jquery.dropotron.min.js")
+    (resources.Get "js/browser.min.js")
+    (resources.Get "js/breakpoints.min.js")
+    (resources.Get "js/util.js")
+    (resources.Get "js/main.js")
+-}}
+
+{{- $bundle := $js | resources.Concat "js/bundle.js" | resources.Minify | resources.Fingerprint -}}
+<script src="{{ $bundle.RelPermalink }}" integrity="{{ $bundle.Data.Integrity }}" crossorigin="anonymous"></script>
diff --git a/static/css/font-source-sans-pro.css b/static/css/font-source-sans-pro.css
index c15f5ef..f59fa7e 100644
--- a/static/css/font-source-sans-pro.css
+++ b/static/css/font-source-sans-pro.css
@@ -2,27 +2,27 @@
     font-family:"Source Sans Pro";
     font-style:normal;
     font-weight:300;
-    font-display:auto;
+    font-display:swap;
     src:url(../webfonts/SourceSansPro-Light.ttf);
 }
 @font-face{
     font-family:"Source Sans Pro";
     font-style:italic;
     font-weight:300;
-    font-display:auto;
+    font-display:swap;
     src:url(../webfonts/SourceSansPro-LightItalic.ttf);
 }
 @font-face{
     font-family:"Source Sans Pro";
     font-style:normal;
     font-weight:600;
-    font-display:auto;
+    font-display:swap;
     src:url(../webfonts/SourceSansPro-SemiBold.ttf);
 }
 @font-face{
     font-family:"Source Sans Pro";
     font-style:italic;
     font-weight:600;
-    font-display:auto;
+    font-display:swap;
     src:url(../webfonts/SourceSansPro-SemiBoldItalic.ttf);
 }
\ No newline at end of file