Lazy load images in footer

emarsden · Feb 14, 2024 · 250a4c6 · 250a4c6
1 parent 1798e3c
commit 250a4c6
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 9 deletions.
diff --git a/html/decode.html b/html/decode.html
@@ -10,6 +10,7 @@
       crossorigin="anonymous" referrerpolicy="no-referrer" />
     <link rel="icon" href="data:,">
     <meta name="description" content="Decode a DRM PSSH box directly in your browser (WASM)." />
+    <meta name="author" content="Eric Marsden">
   </head>
   <body>
     <main>
@@ -69,10 +70,13 @@
     <hr>
     <footer style="font-size:small;display:flex;justify-content:space-between">
     <span>Version: <span id="version"></span></span>
-    <span><img src="img/github.svg" style="width:2em;vertical-align:bottom">
+    <span><img src="img/github.svg" style="width:1.4em;vertical-align:bottom" alt=""
+        loading="lazy" decoding="async">
       <a href="https://github.com/emarsden/pssh-box-wasm/">GitHub repository</a></span>
-    <span>WebAssembly <img src="img/webassembly.svg" style="width:2em;vertical-align:bottom"> made with Rust
-      <img src="img/rustacean.svg" style="width:2em;vertical-align:bottom"></span>
+    <span>WebAssembly <img src="img/webassembly.svg" style="width:2em;vertical-align:bottom"
+       alt="" loading="lazy" decoding="async"> made with Rust
+      <img src="img/rustacean.svg" style="width:2em;vertical-align:bottom"
+           alt="" loading="lazy" decoding="async"></span>
     </footer>
 
     <script type="module">

diff --git a/html/fetch-init.html b/html/fetch-init.html
@@ -9,6 +9,7 @@
       integrity="sha512-eoG3B3AJGSRXIEn/4X2/QrbAXRM1Bp+JNA4QKVdLAwno9AOv56TZo07rojZK4NHiMigWAMFM2YkZv986MsGwkg=="
       crossorigin="anonymous" referrerpolicy="no-referrer" />
     <link rel="icon" href="data:,">
+    <meta name="author" content="Eric Marsden">
   </head>
   <body>
     <main>
@@ -55,10 +56,13 @@
     <hr>
     <footer style="font-size:small;display:flex;justify-content:space-between">
     <span>Version: <span id="version"></span></span>
-    <span><img src="img/github.svg" style="width:2em;vertical-align:bottom">
+    <span><img src="img/github.svg" style="width:1.4em;vertical-align:bottom" alt=""
+        loading="lazy" decoding="async">
       <a href="https://github.com/emarsden/pssh-box-wasm/">GitHub repository</a></span>
-    <span>WebAssembly <img src="img/webassembly.svg" style="width:2em;vertical-align:bottom"> made with Rust
-      <img src="img/rustacean.svg" style="width:2em;vertical-align:bottom"></span>
+    <span>WebAssembly <img src="img/webassembly.svg" style="width:2em;vertical-align:bottom"
+       alt="" loading="lazy" decoding="async"> made with Rust
+      <img src="img/rustacean.svg" style="width:2em;vertical-align:bottom"
+           alt="" loading="lazy" decoding="async"></span>
     </footer>
 
     <script type="module">

diff --git a/html/generate.html b/html/generate.html
@@ -10,6 +10,7 @@
       crossorigin="anonymous" referrerpolicy="no-referrer" />
     <link rel="icon" href="data:," />
     <meta name="description" content="Generate a Widevine PSSH box directly in your browser (WASM)." />
+    <meta name="author" content="Eric Marsden">
     <style>
     body {
       font-size:15px;
@@ -64,13 +65,17 @@
       browser (there is no server backend).
 
     </main>
+
     <hr>
     <footer style="font-size:small;display:flex;justify-content:space-between">
     <span>Version: <span id="version"></span></span>
-    <span><img src="img/github.svg" style="width:2em;vertical-align:bottom">
+    <span><img src="img/github.svg" style="width:1.4em;vertical-align:bottom" alt=""
+        loading="lazy" decoding="async">
       <a href="https://github.com/emarsden/pssh-box-wasm/">GitHub repository</a></span>
-    <span>WebAssembly <img src="img/webassembly.svg" style="width:2em;vertical-align:bottom"> made with Rust
-      <img src="img/rustacean.svg" style="width:2em;vertical-align:bottom"></span>
+    <span>WebAssembly <img src="img/webassembly.svg" style="width:2em;vertical-align:bottom"
+       alt="" loading="lazy" decoding="async"> made with Rust
+      <img src="img/rustacean.svg" style="width:2em;vertical-align:bottom"
+           alt="" loading="lazy" decoding="async"></span>
     </footer>
 
     <script type="module" src="js/generate-pssh.js"></script>

diff --git a/html/index.html b/html/index.html
@@ -10,6 +10,7 @@
       crossorigin="anonymous" referrerpolicy="no-referrer" />
     <link rel="icon" href="data:," />
     <meta name="description" content="WASM tools to decode, generate and fetch PSSH boxes in your browser." />
+    <meta name="author" content="Eric Marsden">
     <style>
     body {
       font-size:16px;
@@ -36,6 +37,10 @@
          <article><a href="generate.html">Generate a Widevine PSSH</a></article>
          <article><a href="fetch-init.html">Fetch an initialization segment and decode any PSSH data</a></article>
       </div>
+
+      <p>These tools are all implemented in WebAssembly and run directly in your browser. There is
+         no server backend; the tools will run offline if you've loaded the page. All the content is
+         hosted on <a href="https://pages.github.com/">GitHub pages</a>.
     </main>
     <hr>
     <footer style="font-size:small;display:flex;justify-content:space-between">