diff --git a/package.json b/package.json
index 323a29ac..8ee6cd59 100644
--- a/package.json
+++ b/package.json
@@ -189,7 +189,7 @@
     ],
     "moduleNameMapper": {
       "\\.css$": "<rootDir>/resources/assets/tests/__mocks__/style.ts",
-      "\\.(png|jpg)$": "<rootDir>/resources/assets/tests/__mocks__/file.ts",
+      "\\.(png|webp)$": "<rootDir>/resources/assets/tests/__mocks__/file.ts",
       "^@/(.*)$": "<rootDir>/resources/assets/src/$1"
     },
     "setupFilesAfterEnv": [
diff --git a/resources/assets/src/components/Viewer.tsx b/resources/assets/src/components/Viewer.tsx
index 79bf8203..b4224d22 100644
--- a/resources/assets/src/components/Viewer.tsx
+++ b/resources/assets/src/components/Viewer.tsx
@@ -7,13 +7,13 @@ import { t } from '@/scripts/i18n'
 import * as cssUtils from '@/styles/utils'
 import * as breakpoints from '@/styles/breakpoints'
 import SkinSteve from '../../../misc/textures/steve.png'
-import bg1 from '../../../misc/backgrounds/1.png'
-import bg2 from '../../../misc/backgrounds/2.png'
-import bg3 from '../../../misc/backgrounds/3.png'
-import bg4 from '../../../misc/backgrounds/4.png'
-import bg5 from '../../../misc/backgrounds/5.png'
-import bg6 from '../../../misc/backgrounds/6.png'
-import bg7 from '../../../misc/backgrounds/7.png'
+import bg1 from '../../../misc/backgrounds/1.webp'
+import bg2 from '../../../misc/backgrounds/2.webp'
+import bg3 from '../../../misc/backgrounds/3.webp'
+import bg4 from '../../../misc/backgrounds/4.webp'
+import bg5 from '../../../misc/backgrounds/5.webp'
+import bg6 from '../../../misc/backgrounds/6.webp'
+import bg7 from '../../../misc/backgrounds/7.webp'
 
 const backgrounds = [bg1, bg2, bg3, bg4, bg5, bg6, bg7]
 export const PICTURES_COUNT = backgrounds.length
@@ -205,6 +205,10 @@ const Viewer: React.FC<Props> = (props) => {
     setBackground(`url('${backgrounds[index]}')`)
   }
 
+  const backgroundStyle = background.startsWith('#')
+    ? { backgroundColor: background }
+    : { backgroundImage: background }
+
   return (
     <div className="card">
       <div className="card-header">
@@ -247,7 +251,7 @@ const Viewer: React.FC<Props> = (props) => {
           </div>
         </div>
       </div>
-      <div className="card-body" css={cssCardBody} style={{ background }}>
+      <div className="card-body" css={cssCardBody} style={backgroundStyle}>
         <div ref={containerRef} css={cssViewer}></div>
       </div>
       <div className="card-footer">
diff --git a/resources/assets/src/scripts/sw.ts b/resources/assets/src/scripts/sw.ts
index 6b1459c5..6f04f650 100644
--- a/resources/assets/src/scripts/sw.ts
+++ b/resources/assets/src/scripts/sw.ts
@@ -14,9 +14,9 @@ registerRoute(
 )
 
 registerRoute(
-  /\/app\/.*\.png/,
+  /\/app\/.*\.webp/,
   new StaleWhileRevalidate({
-    cacheName: 'png-resource-v1',
+    cacheName: 'webp-resource-v1',
     fetchOptions: {
       credentials: 'omit',
     },
diff --git a/resources/assets/src/webpack.d.ts b/resources/assets/src/webpack.d.ts
index aa357af0..7053c71a 100644
--- a/resources/assets/src/webpack.d.ts
+++ b/resources/assets/src/webpack.d.ts
@@ -9,3 +9,7 @@ declare module '*.scss' {
 declare module '*.png' {
   export default ''
 }
+
+declare module '*.webp' {
+  export default ''
+}
diff --git a/resources/assets/tests/webpack.d.ts b/resources/assets/tests/webpack.d.ts
index aa357af0..7053c71a 100644
--- a/resources/assets/tests/webpack.d.ts
+++ b/resources/assets/tests/webpack.d.ts
@@ -9,3 +9,7 @@ declare module '*.scss' {
 declare module '*.png' {
   export default ''
 }
+
+declare module '*.webp' {
+  export default ''
+}
diff --git a/resources/misc/backgrounds/1.png b/resources/misc/backgrounds/1.png
deleted file mode 100755
index 0b877a1e..00000000
Binary files a/resources/misc/backgrounds/1.png and /dev/null differ
diff --git a/resources/misc/backgrounds/1.webp b/resources/misc/backgrounds/1.webp
new file mode 100644
index 00000000..0bc53130
Binary files /dev/null and b/resources/misc/backgrounds/1.webp differ
diff --git a/resources/misc/backgrounds/2.png b/resources/misc/backgrounds/2.png
deleted file mode 100755
index 3f7c6e06..00000000
Binary files a/resources/misc/backgrounds/2.png and /dev/null differ
diff --git a/resources/misc/backgrounds/2.webp b/resources/misc/backgrounds/2.webp
new file mode 100644
index 00000000..2dde4e9b
Binary files /dev/null and b/resources/misc/backgrounds/2.webp differ
diff --git a/resources/misc/backgrounds/3.png b/resources/misc/backgrounds/3.png
deleted file mode 100755
index 54cf5070..00000000
Binary files a/resources/misc/backgrounds/3.png and /dev/null differ
diff --git a/resources/misc/backgrounds/3.webp b/resources/misc/backgrounds/3.webp
new file mode 100644
index 00000000..e2ef7f6d
Binary files /dev/null and b/resources/misc/backgrounds/3.webp differ
diff --git a/resources/misc/backgrounds/4.png b/resources/misc/backgrounds/4.png
deleted file mode 100755
index 72cbc6c2..00000000
Binary files a/resources/misc/backgrounds/4.png and /dev/null differ
diff --git a/resources/misc/backgrounds/4.webp b/resources/misc/backgrounds/4.webp
new file mode 100644
index 00000000..80eecbd7
Binary files /dev/null and b/resources/misc/backgrounds/4.webp differ
diff --git a/resources/misc/backgrounds/5.png b/resources/misc/backgrounds/5.png
deleted file mode 100755
index ed61b264..00000000
Binary files a/resources/misc/backgrounds/5.png and /dev/null differ
diff --git a/resources/misc/backgrounds/5.webp b/resources/misc/backgrounds/5.webp
new file mode 100644
index 00000000..ae8111de
Binary files /dev/null and b/resources/misc/backgrounds/5.webp differ
diff --git a/resources/misc/backgrounds/6.png b/resources/misc/backgrounds/6.png
deleted file mode 100755
index d9d6142a..00000000
Binary files a/resources/misc/backgrounds/6.png and /dev/null differ
diff --git a/resources/misc/backgrounds/6.webp b/resources/misc/backgrounds/6.webp
new file mode 100644
index 00000000..6b012aa1
Binary files /dev/null and b/resources/misc/backgrounds/6.webp differ
diff --git a/resources/misc/backgrounds/7.png b/resources/misc/backgrounds/7.png
deleted file mode 100755
index 179accae..00000000
Binary files a/resources/misc/backgrounds/7.png and /dev/null differ
diff --git a/resources/misc/backgrounds/7.webp b/resources/misc/backgrounds/7.webp
new file mode 100644
index 00000000..59068017
Binary files /dev/null and b/resources/misc/backgrounds/7.webp differ
diff --git a/resources/views/shared/head.twig b/resources/views/shared/head.twig
index 2de976de..760abdf7 100644
--- a/resources/views/shared/head.twig
+++ b/resources/views/shared/head.twig
@@ -12,7 +12,7 @@
 {% endif %}
 <script>
 window.addEventListener('load', () => {
-  navigator.serviceWorker.register('/sw.js?v2')
+  navigator.serviceWorker.register('/sw.js?v3')
 })
 </script>
 {% for link in links %}