🐐

index.html

@@ -25,6 +25,7 @@
   <link rel="icon" type="image/png" href="/goat.png" sizes="any" />
   <link rel="apple-touch-icon" href="/goat.png" />
   <link rel="preload" as="font" type="font/woff2" crossorigin href="/fonts/space-grotesk-var.woff2" />
+  <link rel="preload" as="image" href="nikolaj.jpg" />
   <link rel="stylesheet" href="/fonts/fonts.css" />
   <link rel="stylesheet" href="/fa/css/all.min.css" />
   <link rel="stylesheet" href="style.css" />
@@ -96,7 +97,7 @@
       <div class="hero-visual">
         <div class="avatar-ring">
           <div class="avatar-placeholder">
-            <img src="nikolaj.jpg" draggable="false" alt="Nikolaj Gade, a very handsome (and extremely hireable) person."/>
+            <img src="nikolaj.jpg" fetchpriority="high" draggable="false" alt="Nikolaj Gade, a very handsome (and extremely hireable) person."/>
           </div>
         </div>
       </div>

style.css

@@ -309,7 +309,12 @@ main { position: relative; z-index: 1; }
   border-radius: 50%;
   overflow: hidden;
 }
-.avatar-placeholder img { width: 100%; height: 100%; object-fit: cover; }
+.avatar-placeholder img {
+  width: 100%; height: 100%; object-fit: cover;
+  /* Hide the alt text the browser paints into the ring while the JPEG
+     is still on its way; screen readers still get it. */
+  color: transparent;
+}
 
 /* Spin the image inside the ring, not the ring itself: the ring's hard
    offset shadow would visibly orbit if the shadowed element rotated.