perf: optimize branded 404 artwork

2026-08-31 12:07:38 -03:00
parent a3859f1efc
commit 5f20e5d2b7
9 changed files with 59 additions and 19 deletions
@@ -17,9 +17,9 @@
    <meta property="og:description" content="__SEO_DESCRIPTION__">
    <meta property="og:url" content="__SEO_URL__">
    <meta property="og:image" content="__SEO_IMAGE__">
-    <meta property="og:image:type" content="image/png">
-    <meta property="og:image:width" content="1266">
-    <meta property="og:image:height" content="1242">
+    <meta property="og:image:type" content="image/webp">
+    <meta property="og:image:width" content="828">
+    <meta property="og:image:height" content="813">
    <meta property="og:image:alt" content="__SEO_IMAGE_ALT__">
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:title" content="__SEO_TITLE__">
@@ -31,6 +31,15 @@
    <link rel="shortcut icon" href="/favicon.ico?v=20260814">
    <link rel="apple-touch-icon" sizes="180x180" href="/assets/favicon/apple-touch-icon.png?v=20260814">
    <meta name="apple-mobile-web-app-title" content="Meme Protocol">
+    <link
+      rel="preload"
+      as="image"
+      type="image/webp"
+      href="/assets/homo-reseticus-404-552.f829379a.webp"
+      imagesrcset="/assets/homo-reseticus-404-276.0fde8f3e.webp 276w, /assets/homo-reseticus-404-552.f829379a.webp 552w, /assets/homo-reseticus-404-828.68be2119.webp 828w"
+      imagesizes="(max-width: 488px) 127px, (max-width: 1062px) 26vmin, 276px"
+      fetchpriority="high"
+    >
    <link rel="stylesheet" href="/assets/styles.css">
  </head>
  <body class="not-found-page">
@@ -51,9 +60,12 @@
      <section class="not-found-content" aria-label="Page not found">
        <div class="not-found-visual">
          <img
-            src="/assets/homo-reseticus-404.png"
-            width="1266"
-            height="1242"
+            src="/assets/homo-reseticus-404-552.f829379a.webp"
+            srcset="/assets/homo-reseticus-404-276.0fde8f3e.webp 276w, /assets/homo-reseticus-404-552.f829379a.webp 552w, /assets/homo-reseticus-404-828.68be2119.webp 828w"
+            sizes="(max-width: 488px) 127px, (max-width: 1062px) 26vmin, 276px"
+            width="552"
+            height="542"
+            fetchpriority="high"
            alt="Homo Reseticus surrounded by an unreachable node pattern"
          >
        </div>