karsttech.com/layouts/partials/home/page.html

<div class="background-container">
  <img id="background-thumb" alt="Background" class="background-image">
  <img id="background-full" alt="Background" class="background-image background-full" loading="lazy">
  <script>
    const thumbImg = document.getElementById('background-thumb');
    const fullImg = document.getElementById('background-full');
    const imageName = 'Apophysis_071008-64.webp';
    const thumbPath = `/backgrounds/thumbs/${imageName}`;
    const fullPath = `/backgrounds/${imageName}`;
    
    thumbImg.src = thumbPath;
    
    setTimeout(() => {
      const preloadImg = new Image();
      preloadImg.onload = () => {
        fullImg.src = fullPath;
        fullImg.classList.add('loaded');
        setTimeout(() => thumbImg.remove(), 2000);
      };
      preloadImg.onerror = () => {
        fullImg.src = fullPath;
        fullImg.classList.add('loaded');
      };
      preloadImg.src = fullPath;
    }, 800);
  </script>
</div>
<article class="prose max-w-full dark:prose-invert glass">
  {{ with .Title }}
    <header>
      <h1>{{ . | emojify }}</h1>
    </header>
  {{ end }}
  <section>{{ .Content | emojify }}</section>
</article>
<section>
  {{ partial "recent-articles.html" . }}
</section>