1
0
mirror of https://github.com/bitwarden/browser.git synced 2024-12-31 17:57:43 +01:00

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

Co-authored-by: Hinton <oscar@oscarhinton.com>
This commit is contained in:
Simon Legner 2022-01-10 12:37:21 +01:00 committed by GitHub
parent 49f6cfab7f
commit 45284eefb3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
10 changed files with 16 additions and 4 deletions

View File

@ -58,7 +58,11 @@
</ng-container> </ng-container>
<ng-container *ngIf="selectedProviderType === providerType.Yubikey"> <ng-container *ngIf="selectedProviderType === providerType.Yubikey">
<p class="text-center">{{ "insertYubiKey" | i18n }}</p> <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"> <div class="form-group">
<label for="code" class="sr-only">{{ "verificationCode" | i18n }}</label> <label for="code" class="sr-only">{{ "verificationCode" | i18n }}</label>
<input <input

View File

@ -16,7 +16,11 @@
<div> <div>
<img src="../images/logo-dark@2x.png" class="logo mb-2" alt="Bitwarden" /> <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> <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"> <div class="text-center mt-4">
<button id="webauthn-button" class="btn btn-primary btn-lg"></button> <button id="webauthn-button" class="btn btn-primary btn-lg"></button>
</div> </div>

View File

@ -6,7 +6,11 @@
</head> </head>
<body style="background: transparent"> <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"> <div class="text-center">
<button id="webauthn-button" class="btn btn-primary"></button> <button id="webauthn-button" class="btn btn-primary"></button>
</div> </div>

Binary file not shown.

Binary file not shown.

After

Width:  |  Height:  |  Size: 26 KiB

BIN
src/images/u2fkey.avif Normal file

Binary file not shown.

BIN
src/images/u2fkey.webp Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 22 KiB

BIN
src/images/yubikey.avif Normal file

Binary file not shown.

BIN
src/images/yubikey.webp Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 13 KiB

View File

@ -36,7 +36,7 @@ const moduleRules = [
type: "asset/resource", type: "asset/resource",
}, },
{ {
test: /\.(jpe?g|png|gif|svg)$/i, test: /\.(jpe?g|png|gif|svg|webp|avif)$/i,
exclude: /.*(fontawesome-webfont)\.svg/, exclude: /.*(fontawesome-webfont)\.svg/,
generator: { generator: {
filename: "images/[name].[ext]", filename: "images/[name].[ext]",