Major changes and the start of my post on a rust week.

 Changes to be committed:
        modified:   .gitignore
        modified:   config.toml
        modified:   content/posts/rust.md
        modified:   templates/404.html
        modified:   templates/index.html

        new file:   templates/shortcodes/image.html
        new file:   static/css/critical.css

        deleted:    rsync_to_testing

3 files changed, 64 insertions, 2 deletions

diff --git a/templates/404.html b/templates/404.html
index c565d09..58d8f52 100644
--- a/templates/404.html
+++ b/templates/404.html
@@ -35,7 +35,7 @@
 
   <div class="banner-404">
     <h1>404</h1>
-    <p>Oops, police door not found...</p>
+    <p>Oops, URL not found...</p>
     <p class="btn-404">
       <a href="{{ config.base_url }}">
         <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
diff --git a/templates/index.html b/templates/index.html
index a14a2d0..c968941 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -61,7 +61,23 @@
     <link rel="shortcut icon" href="{{ get_url(path="favicon.ico") }}"/>
 
     <!-- Stylesheets -->
-    <link rel="stylesheet" href="{{ get_url(path="style.css") }}"/>
+    <!--<link rel="stylesheet" href="{{ get_url(path="style.css") }}"/> old way of doing this, inefficient -->
+
+
+    {# 1. Load our single combined critical CSS file. #}
+    {% set critical_css = load_data(path="static/css/critical.css", required=false) %}
+
+    {# 2. If it was found, inline it. #}
+    {% if critical_css %}
+      <style>{{ critical_css | safe }}</style>
+    {% endif %}
+
+    {# 3. Load the full stylesheet asynchronously (this part is the same). #}
+    <link rel="stylesheet" href="{{ get_url(path='style.css') }}" media="print" onload="this.media='all'">
+
+    {# 4. Provide a fallback for browsers without JavaScript. #}
+    <noscript><link rel="stylesheet" href="{{ get_url(path='style.css') }}"></noscript>
+    <!-- Stylesheets End -->
 
     {% if page.extra.math %}
     <!-- Math rendering with KaTeX -->
diff --git a/templates/shortcodes/image.html b/templates/shortcodes/image.html
new file mode 100644
index 0000000..8b1a006
--- /dev/null
+++ b/templates/shortcodes/image.html
@@ -0,0 +1,46 @@
+{# /templates/shortcodes/image.html (Version 7 - The Final Quality Fix) #}
+
+{# --- Manually check for required 'src' and 'alt' parameters --- #}
+{% if not src %}
+    {{ throw(message="The 'src' parameter is required for the image shortcode.") }}
+{% endif %}
+{% if not alt %}
+    {{ throw(message="The 'alt' parameter is required for the image shortcode.") }}
+{% endif %}
+
+{# --- Get optional parameters, with sensible defaults --- #}
+{% set lazy = lazy | default(value=true) %}
+{% set fetch = fetch | default(value="auto") %}
+{% set quality = quality | default(value=60) %} {# <-- New: Set a default quality #}
+
+{# --- Let Zola process the image into ALL necessary formats and sizes --- #}
+{% set image_meta = get_image_metadata(path=src) %}
+
+{# Create small versions (PNG and WebP) with higher compression #}
+{% set image_small_png = resize_image(path=src, width=383, op="fit_width", quality=quality) %}
+{% set image_small_webp = resize_image(path=src, width=383, op="fit_width", format="webp", quality=quality) %}
+
+{# Create large versions (PNG and WebP) with higher compression #}
+{% set image_large_png = resize_image(path=src, width=682, op="fit_width", quality=quality) %}
+{% set image_large_webp = resize_image(path=src, width=682, op="fit_width", format="webp", quality=quality) %}
+
+<picture>
+    {# --- MODERN FORMATS FIRST (WebP) --- #}
+    <source media="(max-width: 600px)" srcset="{{ image_small_webp.url }}" type="image/webp">
+    <source media="(min-width: 601px)" srcset="{{ image_large_webp.url }}" type="image/webp">
+
+    {# --- FALLBACK FORMATS (PNG) --- #}
+    <source media="(max-width: 600px)" srcset="{{ image_small_png.url }}">
+    <source media="(min-width: 601px)" srcset="{{ image_large_png.url }}">
+
+    {# --- FINAL FALLBACK <img> --- #}
+    <img
+        src="{{ image_large_png.url }}"
+        width="{{ image_meta.width }}"
+        height="{{ image_meta.height }}"
+        alt="{{ alt }}"
+        {% if lazy %}loading="lazy"{% else %}loading="eager"{% endif %}
+        fetchpriority="{{ fetch }}"
+        style="width: 100%; height: auto; border-radius: 4px; margin: 1.5rem 0;"
+    >
+</picture>