diff --git a/src/assets/img/bg-medium.webp b/src/assets/img/bg-medium.webp
new file mode 100644
index 0000000..abd7356
Binary files /dev/null and b/src/assets/img/bg-medium.webp differ
diff --git a/src/assets/img/logo.webp b/src/assets/img/logo.webp
new file mode 100644
index 0000000..a0272b1
Binary files /dev/null and b/src/assets/img/logo.webp differ
diff --git a/src/components/Navigation.astro b/src/components/Navigation.astro
index 046a03b..b0410eb 100644
--- a/src/components/Navigation.astro
+++ b/src/components/Navigation.astro
@@ -12,7 +12,9 @@ const response = await fetch('https://graphql.datocms.com/', {
     query: `query Logo {
             home {
               logo {
-                url
+                responsiveImage {
+                  webpSrcSet
+                }
               }
             }
           }
@@ -22,7 +24,7 @@ const response = await fetch('https://graphql.datocms.com/', {
 
 const json = await response.json()
 const data = json.data
-const logo = data.home.logo.url
+const logo = data.home.logo.responsiveImage.webpSrcSet
 ---
 
 <div id="main-navigation" class="is-desktop py-8">
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 7feb676..4722b0d 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -135,7 +135,7 @@ const { page } = Astro.props
 
 <style lang="scss">
   body {
-    background: url('../assets/img/bg-medium.png');
+    background: url('../assets/img/bg-medium.webp');
     background-size: contain;
     background-repeat: no-repeat;
   }