Compress images u2fkey/yubikey using avif/webp (#1232)

Co-authored-by: Hinton <oscar@oscarhinton.com>
4 years ago · 45284eefb3
10 changed files with 16 additions and 4 deletions
--- a/src/app/accounts/two-factor.component.html
+++ b/src/app/accounts/two-factor.component.html
@ -58,7 +58,11 @@
				@@ -58,7 +58,11 @@
          </ng-container>
          <ng-container *ngIf="selectedProviderType === providerType.Yubikey">
            <p class="text-center">{{ "insertYubiKey" | i18n }}</p>
-            <img src="../../images/yubikey.jpg" class="rounded img-fluid mb-3" alt="" />
+            <picture>
+              <source srcset="../../images/yubikey.avif" type="image/avif">
+              <source srcset="../../images/yubikey.webp" type="image/webp">
+              <img src="../../images/yubikey.jpg" class="rounded img-fluid mb-3" alt="">
+            </picture>
            <div class="form-group">
              <label for="code" class="sr-only">{{ "verificationCode" | i18n }}</label>
              <input
--- a/src/connectors/webauthn-mobile.html
+++ b/src/connectors/webauthn-mobile.html
@ -16,7 +16,11 @@
				@@ -16,7 +16,11 @@
      <div>
        <img src="../images/logo-dark@2x.png" class="logo mb-2" alt="Bitwarden" />
        <p id="webauthn-header" class="lead text-center mx-4 mb-4"></p>
-        <img src="../images/u2fkey-mobile.jpg" class="rounded img-fluid" />
+        <picture>
+          <source srcset="../images/u2fkey-mobile.avif" type="image/avif">
+          <source srcset="../images/u2fkey-mobile.webp" type="image/webp">
+          <img src="../images/u2fkey-mobile.jpg" class="rounded img-fluid">
+        </picture>
        <div class="text-center mt-4">
          <button id="webauthn-button" class="btn btn-primary btn-lg"></button>
        </div>
--- a/src/connectors/webauthn.html
+++ b/src/connectors/webauthn.html
@ -6,7 +6,11 @@
				@@ -6,7 +6,11 @@
  </head>

  <body style="background: transparent">
-    <img src="../images/u2fkey.jpg" class="rounded img-fluid mb-3" />
+    <picture>
+      <source srcset="../images/u2fkey.avif" type="image/avif">
+      <source srcset="../images/u2fkey.webp" type="image/webp">
+      <img src="../images/u2fkey.jpg" class="rounded img-fluid mb-3">
+    </picture>
    <div class="text-center">
      <button id="webauthn-button" class="btn btn-primary"></button>
    </div>
--- a/src/images/u2fkey-mobile.avif
+++ b/src/images/u2fkey-mobile.avif
--- a/src/images/u2fkey-mobile.webp
+++ b/src/images/u2fkey-mobile.webp
--- a/src/images/u2fkey.avif
+++ b/src/images/u2fkey.avif
--- a/src/images/u2fkey.webp
+++ b/src/images/u2fkey.webp
--- a/src/images/yubikey.avif
+++ b/src/images/yubikey.avif
--- a/src/images/yubikey.webp
+++ b/src/images/yubikey.webp
--- a/webpack.config.js
+++ b/webpack.config.js
@ -36,7 +36,7 @@ const moduleRules = [
				@@ -36,7 +36,7 @@ const moduleRules = [
    type: "asset/resource",
  },
  {
-    test: /\.(jpe?g|png|gif|svg)$/i,
+    test: /\.(jpe?g|png|gif|svg|webp|avif)$/i,
    exclude: /.*(fontawesome-webfont)\.svg/,
    generator: {
      filename: "images/[name].[ext]",