diff --git a/src/app/accounts/two-factor.component.html b/src/app/accounts/two-factor.component.html
index af13713f9b3..5c7426637ce 100644
--- a/src/app/accounts/two-factor.component.html
+++ b/src/app/accounts/two-factor.component.html
@@ -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
diff --git a/src/connectors/webauthn-mobile.html b/src/connectors/webauthn-mobile.html
index 9dcc9a84930..036817dd18e 100644
--- a/src/connectors/webauthn-mobile.html
+++ b/src/connectors/webauthn-mobile.html
@@ -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>
diff --git a/src/connectors/webauthn.html b/src/connectors/webauthn.html
index 89927e1654b..b5d707cf44f 100644
--- a/src/connectors/webauthn.html
+++ b/src/connectors/webauthn.html
@@ -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>
diff --git a/src/images/u2fkey-mobile.avif b/src/images/u2fkey-mobile.avif
new file mode 100644
index 00000000000..2a1a733b923
Binary files /dev/null and b/src/images/u2fkey-mobile.avif differ
diff --git a/src/images/u2fkey-mobile.webp b/src/images/u2fkey-mobile.webp
new file mode 100644
index 00000000000..4faa32283d1
Binary files /dev/null and b/src/images/u2fkey-mobile.webp differ
diff --git a/src/images/u2fkey.avif b/src/images/u2fkey.avif
new file mode 100644
index 00000000000..3c5f94dd83f
Binary files /dev/null and b/src/images/u2fkey.avif differ
diff --git a/src/images/u2fkey.webp b/src/images/u2fkey.webp
new file mode 100644
index 00000000000..65d75019507
Binary files /dev/null and b/src/images/u2fkey.webp differ
diff --git a/src/images/yubikey.avif b/src/images/yubikey.avif
new file mode 100644
index 00000000000..ca67e1a25cb
Binary files /dev/null and b/src/images/yubikey.avif differ
diff --git a/src/images/yubikey.webp b/src/images/yubikey.webp
new file mode 100644
index 00000000000..8d390876824
Binary files /dev/null and b/src/images/yubikey.webp differ
diff --git a/webpack.config.js b/webpack.config.js
index a7cceffe565..a1366c0400a 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -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]",
