diff --git a/components/error-boundary.js b/components/error-boundary.js
index 82ebf626..2f5bac16 100644
--- a/components/error-boundary.js
+++ b/components/error-boundary.js
@@ -44,7 +44,7 @@ class ErrorBoundary extends Component {
       const errorDetails = this.getErrorDetails()
       return (
         <StaticLayout footer={false}>
-          <Image width='500' height='375' className='rounded-1 shadow-sm' src={`${process.env.NEXT_PUBLIC_ASSET_PREFIX}/floating.gif`} fluid />
+          <Image width='500' height='375' className='rounded-1 shadow-sm' src={`${process.env.NEXT_PUBLIC_ASSET_PREFIX}/floating.webp`} fluid />
           <h1 className={styles.status} style={{ fontSize: '48px' }}>something went wrong</h1>
           {this.state.error && <CopyErrorButton errorDetails={errorDetails} />}
         </StaticLayout>
diff --git a/pages/_error.js b/pages/_error.js
index 02d52c23..0a10ae77 100644
--- a/pages/_error.js
+++ b/pages/_error.js
@@ -48,18 +48,18 @@ const statusDescribe = {
 
 function ErrorImage ({ statusCode }) {
   if (statusCode === 404) {
-    return <Image className='rounded-1 shadow-sm' width='500' height='376' src={`${process.env.NEXT_PUBLIC_ASSET_PREFIX}/maze.gif`} fluid />
+    return <Image className='rounded-1 shadow-sm' width='500' height='376' src={`${process.env.NEXT_PUBLIC_ASSET_PREFIX}/maze.webp`} fluid />
   }
   if (statusCode >= 500) {
-    return <Image className='rounded-1 shadow-sm' width='300' height='225' src={`${process.env.NEXT_PUBLIC_ASSET_PREFIX}/falling.gif`} fluid />
+    return <Image className='rounded-1 shadow-sm' width='300' height='225' src={`${process.env.NEXT_PUBLIC_ASSET_PREFIX}/falling.webp`} fluid />
   }
   if (statusCode >= 400) {
-    return <Image className='rounded-1 shadow-sm' width='500' height='381' src={`${process.env.NEXT_PUBLIC_ASSET_PREFIX}/forbidden.gif`} fluid />
+    return <Image className='rounded-1 shadow-sm' width='500' height='381' src={`${process.env.NEXT_PUBLIC_ASSET_PREFIX}/forbidden.webp`} fluid />
   }
   if (statusCode >= 300) {
-    return <Image className='rounded-1 shadow-sm' width='500' height='375' src={`${process.env.NEXT_PUBLIC_ASSET_PREFIX}/double.gif`} fluid />
+    return <Image className='rounded-1 shadow-sm' width='500' height='375' src={`${process.env.NEXT_PUBLIC_ASSET_PREFIX}/double.webp`} fluid />
   }
-  return <Image className='rounded-1 shadow-sm' width='500' height='376' src={`${process.env.NEXT_PUBLIC_ASSET_PREFIX}/falling.gif`} fluid />
+  return <Image className='rounded-1 shadow-sm' width='500' height='376' src={`${process.env.NEXT_PUBLIC_ASSET_PREFIX}/falling.webp`} fluid />
 }
 
 export default function Error ({ statusCode }) {
diff --git a/pages/auth/error.js b/pages/auth/error.js
index 5df283bf..258bb48a 100644
--- a/pages/auth/error.js
+++ b/pages/auth/error.js
@@ -18,14 +18,14 @@ export default function AuthError ({ error }) {
   if (error === 'AccessDenied') {
     return (
       <StaticLayout>
-        <Image className='rounded-1 shadow-sm' width='500' height='381' src={`${process.env.NEXT_PUBLIC_ASSET_PREFIX}/forbidden.gif`} fluid />
+        <Image className='rounded-1 shadow-sm' width='500' height='381' src={`${process.env.NEXT_PUBLIC_ASSET_PREFIX}/forbidden.webp`} fluid />
         <h1 className={[styles.status, styles.smaller].join(' ')}><span>ACCESS DENIED</span></h1>
       </StaticLayout>
     )
   } else if (error === 'Verification') {
     return (
       <StaticLayout>
-        <Image className='rounded-1 shadow-sm' width='500' height='375' src={`${process.env.NEXT_PUBLIC_ASSET_PREFIX}/double.gif`} fluid />
+        <Image className='rounded-1 shadow-sm' width='500' height='375' src={`${process.env.NEXT_PUBLIC_ASSET_PREFIX}/double.webp`} fluid />
         <h2 className='pt-4'>Incorrect magic code</h2>
         <Button
           className='align-items-center my-3'
@@ -41,7 +41,7 @@ export default function AuthError ({ error }) {
   } else if (error === 'Configuration') {
     return (
       <StaticLayout>
-        <Image className='rounded-1 shadow-sm' width='500' height='375' src={`${process.env.NEXT_PUBLIC_ASSET_PREFIX}/double.gif`} fluid />
+        <Image className='rounded-1 shadow-sm' width='500' height='375' src={`${process.env.NEXT_PUBLIC_ASSET_PREFIX}/double.webp`} fluid />
         <h1 className={[styles.status, styles.smaller].join(' ')}><span>configuration error</span></h1>
       </StaticLayout>
     )
@@ -49,7 +49,7 @@ export default function AuthError ({ error }) {
 
   return (
     <StaticLayout>
-      <Image className='rounded-1 shadow-sm' width='500' height='375' src={`${process.env.NEXT_PUBLIC_ASSET_PREFIX}/double.gif`} fluid />
+      <Image className='rounded-1 shadow-sm' width='500' height='375' src={`${process.env.NEXT_PUBLIC_ASSET_PREFIX}/double.webp`} fluid />
       <h1 className={[styles.status, styles.smaller].join(' ')}><span>auth error</span></h1>
     </StaticLayout>
 
diff --git a/pages/email.js b/pages/email.js
index 0e7a8d5a..fc56d098 100644
--- a/pages/email.js
+++ b/pages/email.js
@@ -40,10 +40,7 @@ export default function Email () {
   return (
     <StaticLayout>
       <div className='p-4 text-center'>
-        <video width='640' height='302' loop autoPlay muted preload='auto' playsInline style={{ maxWidth: '100%' }}>
-          <source src={`${process.env.NEXT_PUBLIC_ASSET_PREFIX}/cowboy-saloon.mp4`} type='video/mp4' />
-          <Image className='rounded-1 shadow-sm' width='640' height='302' src={`${process.env.NEXT_PUBLIC_ASSET_PREFIX}/cowboy-saloon.gif`} fluid />
-        </video>
+        <Image className='rounded-1 shadow-sm' width='640' height='302' src={`${process.env.NEXT_PUBLIC_ASSET_PREFIX}/cowboy-saloon.webp`} fluid />
         <h2 className='pt-4'>Check your email</h2>
         <h4 className='text-muted pt-2 pb-4'>{buildMessage()}</h4>
         <MagicCodeForm onSubmit={(token) => pushCallback(token)} disabled={!callback} signin={signin} />
diff --git a/pages/offline.js b/pages/offline.js
index b9a0c58d..6afbef50 100644
--- a/pages/offline.js
+++ b/pages/offline.js
@@ -5,7 +5,7 @@ import styles from '@/styles/error.module.css'
 export default function offline () {
   return (
     <StaticLayout>
-      <Image width='499' height='293' className='rounded-1 shadow-sm' src={`${process.env.NEXT_PUBLIC_ASSET_PREFIX}/waiting.gif`} fluid />
+      <Image width='499' height='293' className='rounded-1 shadow-sm' src={`${process.env.NEXT_PUBLIC_ASSET_PREFIX}/waiting.webp`} fluid />
       <h1 className={styles.status}><span>Offline</span></h1>
     </StaticLayout>
   )
diff --git a/public/cowboy-saloon.gif b/public/cowboy-saloon.gif
deleted file mode 100644
index 5a86b46a..00000000
Binary files a/public/cowboy-saloon.gif and /dev/null differ
diff --git a/public/cowboy-saloon.mp4 b/public/cowboy-saloon.mp4
deleted file mode 100644
index 63a7556f..00000000
Binary files a/public/cowboy-saloon.mp4 and /dev/null differ
diff --git a/public/cowboy-saloon.webp b/public/cowboy-saloon.webp
new file mode 100644
index 00000000..f1972204
Binary files /dev/null and b/public/cowboy-saloon.webp differ
diff --git a/public/crying.gif b/public/crying.gif
deleted file mode 100644
index 18fb0e91..00000000
Binary files a/public/crying.gif and /dev/null differ
diff --git a/public/crying.webp b/public/crying.webp
new file mode 100644
index 00000000..4229514d
Binary files /dev/null and b/public/crying.webp differ
diff --git a/public/double.gif b/public/double.gif
deleted file mode 100644
index ba6861eb..00000000
Binary files a/public/double.gif and /dev/null differ
diff --git a/public/double.webp b/public/double.webp
new file mode 100644
index 00000000..0d488d3b
Binary files /dev/null and b/public/double.webp differ
diff --git a/public/falling.gif b/public/falling.gif
deleted file mode 100644
index 1420e65b..00000000
Binary files a/public/falling.gif and /dev/null differ
diff --git a/public/falling.webp b/public/falling.webp
new file mode 100644
index 00000000..6d44451a
Binary files /dev/null and b/public/falling.webp differ
diff --git a/public/floating.gif b/public/floating.gif
deleted file mode 100644
index 4445ce3b..00000000
Binary files a/public/floating.gif and /dev/null differ
diff --git a/public/floating.webp b/public/floating.webp
new file mode 100644
index 00000000..b9b62808
Binary files /dev/null and b/public/floating.webp differ
diff --git a/public/forbidden.gif b/public/forbidden.gif
deleted file mode 100644
index 5ca06534..00000000
Binary files a/public/forbidden.gif and /dev/null differ
diff --git a/public/forbidden.webp b/public/forbidden.webp
new file mode 100644
index 00000000..8738b5eb
Binary files /dev/null and b/public/forbidden.webp differ
diff --git a/public/maze.gif b/public/maze.webp
similarity index 100%
rename from public/maze.gif
rename to public/maze.webp
diff --git a/public/waiting.gif b/public/waiting.gif
deleted file mode 100644
index b8e8be0d..00000000
Binary files a/public/waiting.gif and /dev/null differ
diff --git a/public/waiting.webp b/public/waiting.webp
new file mode 100644
index 00000000..8ef0ee3a
Binary files /dev/null and b/public/waiting.webp differ
diff --git a/sw/build.js b/sw/build.js
index ea77c73b..cd0400ae 100644
--- a/sw/build.js
+++ b/sw/build.js
@@ -32,7 +32,7 @@ function generatePrecacheManifest () {
 
   const staticDir = join(__dirname, '../public')
   const staticFiles = walkSync(staticDir)
-  const staticMatch = f => [/\.(gif|jpe?g|ico|png|ttf|woff|woff2)$/].some(m => m.test(f))
+  const staticMatch = f => [/\.(webp|jpe?g|ico|png|ttf|woff|woff2)$/].some(m => m.test(f))
   staticFiles.filter(staticMatch).forEach(file => {
     const stats = statSync(file)
     addToManifest(file, file.slice(staticDir.length), stats.size)