diff --git a/app/models/concerns/has_image_uploads.rb b/app/models/concerns/has_image_uploads.rb
index a59df6d2..d3ed40bb 100644
--- a/app/models/concerns/has_image_uploads.rb
+++ b/app/models/concerns/has_image_uploads.rb
@@ -9,23 +9,23 @@ module HasImageUploads
     # todo: destroy from s3 on destroy
 
     def public_image_uploads
-      self.image_uploads.where(privacy: 'public').presence || ["card-headers/#{self.class.name.downcase.pluralize}.jpg"]
+      self.image_uploads.where(privacy: 'public').presence || ["card-headers/#{self.class.name.downcase.pluralize}.webp"]
     end
 
     def private_image_uploads
-      self.image.uploads.where(privacy: 'private').presence || ["card-headers/#{self.class.name.downcase.pluralize}.jpg"]
+      self.image.uploads.where(privacy: 'private').presence || ["card-headers/#{self.class.name.downcase.pluralize}.webp"]
     end
 
     def random_image_including_private(format: :medium)
-      image_uploads.sample.try(:src, format).presence || "card-headers/#{self.class.name.downcase.pluralize}.jpg"
+      image_uploads.sample.try(:src, format).presence || "card-headers/#{self.class.name.downcase.pluralize}.webp"
     end
 
     def first_public_image(format: :medium)
-      public_image_uploads.first.try(:src, format).presence || "card-headers/#{self.class.name.downcase.pluralize}.jpg"
+      public_image_uploads.first.try(:src, format).presence || "card-headers/#{self.class.name.downcase.pluralize}.webp"
     end
 
     def random_public_image(format: :medium)
-      public_image_uploads.sample.try(:src, format).presence || "card-headers/#{self.class.name.downcase.pluralize}.jpg"
+      public_image_uploads.sample.try(:src, format).presence || "card-headers/#{self.class.name.downcase.pluralize}.webp"
     end
   end
 end
diff --git a/app/models/page_collections/page_collection.rb b/app/models/page_collections/page_collection.rb
index 36e9e9a2..2e8cbb2f 100644
--- a/app/models/page_collections/page_collection.rb
+++ b/app/models/page_collections/page_collection.rb
@@ -51,7 +51,7 @@ class PageCollection < ApplicationRecord
     end
 
     # If all else fails, fall back on default header
-    "card-headers/#{self.class.name.downcase.pluralize}.jpg"
+    "card-headers/#{self.class.name.downcase.pluralize}.webp"
   end
 
   def first_public_image
diff --git a/app/models/page_types/content_page.rb b/app/models/page_types/content_page.rb
index 41581e4a..a703e965 100644
--- a/app/models/page_types/content_page.rb
+++ b/app/models/page_types/content_page.rb
@@ -3,7 +3,7 @@ class ContentPage < ApplicationRecord
   belongs_to :universe
 
   def random_image_including_private(format: :small)
-    ImageUpload.where(content_type: self.page_type, content_id: self.id).sample.try(:src, format) || "card-headers/#{self.page_type.downcase.pluralize}.jpg"
+    ImageUpload.where(content_type: self.page_type, content_id: self.id).sample.try(:src, format) || "card-headers/#{self.page_type.downcase.pluralize}.webp"
   end
 
   def icon
diff --git a/app/views/cards/intros/_content_type_intro.html.erb b/app/views/cards/intros/_content_type_intro.html.erb
index b2f76114..190449f6 100644
--- a/app/views/cards/intros/_content_type_intro.html.erb
+++ b/app/views/cards/intros/_content_type_intro.html.erb
@@ -6,7 +6,7 @@
 <%= link_to send("#{content_name}_worldbuilding_info_path"), class: 'black-text' do %>
   <div class="card hoverable" style="min-height: 330px;">
     <div class="card-image">
-      <%= image_tag "card-headers/#{content_name.pluralize}.jpg", height: 300, width: 300, style: 'object-fit: cover' %>
+      <%= image_tag "card-headers/#{content_name.pluralize}.webp", height: 300, width: 300, style: 'object-fit: cover' %>
       <h3 class="card-title bordered-text">Create <%= content_name == "magic" ? 'magic' : content_name.pluralize %></h3>
     </div>
     <div class="card-content fixed-card-content">
diff --git a/app/views/content/cards/_content_relation_list.html.erb b/app/views/content/cards/_content_relation_list.html.erb
index f53adb73..05776f83 100644
--- a/app/views/content/cards/_content_relation_list.html.erb
+++ b/app/views/content/cards/_content_relation_list.html.erb
@@ -12,7 +12,7 @@ render partial: 'content/cards/content_relation_list', locals: { content_type: :
     <% if images.any? && rand(3) < 2 %>
       <%= image_tag images.sample.src(:large), class: 'activator', style: 'height: 265px' %>
     <% else %>
-      <%= image_tag "card-headers/#{content_type.to_s.pluralize}.jpg", class: 'activator', style: 'height: 265px' %>
+      <%= image_tag "card-headers/#{content_type.to_s.pluralize}.webp", class: 'activator', style: 'height: 265px' %>
     <% end %>
   </div>
   <div class="card-content">
diff --git a/app/views/content/cards/_in_universe_content_list.html.erb b/app/views/content/cards/_in_universe_content_list.html.erb
index 6e9d924c..765023cb 100644
--- a/app/views/content/cards/_in_universe_content_list.html.erb
+++ b/app/views/content/cards/_in_universe_content_list.html.erb
@@ -25,7 +25,7 @@
       category_image = if rand(3) < 2 && images.any?
         images.sample.src(:original)
       else
-        asset_path("card-headers/#{content_type_pluralized}.jpg")
+        asset_path("card-headers/#{content_type_pluralized}.webp")
       end
     %>
     <div class="activator mp-iucl-view-list" style="height: 300px; background: url('<%= category_image %>'); background-size: cover;"></div>
diff --git a/app/views/content/components/_parallax_header.html.erb b/app/views/content/components/_parallax_header.html.erb
index 0963c8b8..429e0925 100644
--- a/app/views/content/components/_parallax_header.html.erb
+++ b/app/views/content/components/_parallax_header.html.erb
@@ -1,7 +1,7 @@
 <div class="parallax-header slider" style="height: 1px; position: relative; top: -1px">
   <ul class="slides">
     <li>
-      <%= image_tag "card-headers/#{content_type.downcase.pluralize}.jpg" %>
+      <%= image_tag "card-headers/#{content_type.downcase.pluralize}.webp" %>
       <% unless defined?(image_only) && !!image_only %>
         <div class="caption center-align bordered-text">
           <h4>
diff --git a/app/views/content/components/_parallax_universe_header.html.erb b/app/views/content/components/_parallax_universe_header.html.erb
index 342b3da6..4924b3e5 100644
--- a/app/views/content/components/_parallax_universe_header.html.erb
+++ b/app/views/content/components/_parallax_universe_header.html.erb
@@ -1,7 +1,7 @@
 <div class="parallax-header slider" style="height: 1px; position: relative; top: -1px">
   <ul class="slides">
     <li>
-      <%= image_tag @universe_scope.try(:random_image_including_private) || "card-headers/universes.jpg" %>
+      <%= image_tag @universe_scope.try(:random_image_including_private) || "card-headers/universes.webp" %>
       <div class="caption center-align bordered-text">
         <h4>
           <i class="material-icons <%= Universe.text_color %>"><%= Universe.icon %></i>
diff --git a/app/views/content/list/_cards.html.erb b/app/views/content/list/_cards.html.erb
index a08b5ece..48d64086 100644
--- a/app/views/content/list/_cards.html.erb
+++ b/app/views/content/list/_cards.html.erb
@@ -4,7 +4,7 @@
       <div class="hoverable card sticky-action" style="margin-bottom: 2px">
         <div class="card-image waves-effect waves-block waves-light">
           <%= render partial: 'content/display/favorite_control', locals: { content: content } %>
-          <% content_image = asset_path("card-headers/#{content_type.name.downcase.pluralize}.jpg") %>
+          <% content_image = asset_path("card-headers/#{content_type.name.downcase.pluralize}.webp") %>
           <% if content.respond_to?(:image_uploads) %>
             <% images = content.image_uploads %>
             <% if images.any? %>
diff --git a/app/views/content/list/_dense_cards.html.erb b/app/views/content/list/_dense_cards.html.erb
index 37b7c5d2..b67a5f71 100644
--- a/app/views/content/list/_dense_cards.html.erb
+++ b/app/views/content/list/_dense_cards.html.erb
@@ -6,7 +6,7 @@
           <% if content_type.name == 'Document' %>
             <div class='activator' style='height: 200px'></div>
           <% else %>
-            <% content_image = asset_path("card-headers/#{content_type.name.downcase.pluralize}.jpg") %>
+            <% content_image = asset_path("card-headers/#{content_type.name.downcase.pluralize}.webp") %>
             <% if content.respond_to?(:image_uploads) %>
               <% images = content.image_uploads %>
               <% if images.any? %>
diff --git a/app/views/customization/content_types.html.erb b/app/views/customization/content_types.html.erb
index ab63bd87..8512537d 100644
--- a/app/views/customization/content_types.html.erb
+++ b/app/views/customization/content_types.html.erb
@@ -77,7 +77,7 @@
         <div class="hoverable card <%= 'active' if @my_activators.include?(content_type.name) %>"
              style="border-bottom: 10px solid <%= content_type.hex_color %>">
           <div class="card-image">
-            <%= image_tag "card-headers/#{content_type.name.downcase.pluralize}.jpg", height: 240, width: 200 %>
+            <%= image_tag "card-headers/#{content_type.name.downcase.pluralize}.webp", height: 240, width: 200 %>
             <span class="enabled-badge new badge <%= content_type.color %>" data-badge-caption="<%= @my_activators.include?(content_type.name) ? 'active' : 'hidden' %>"></span>
             <span class="card-title bordered-text">
               <i class="material-icons <%= content_type.text_color %>" style="position: relative; top: 3px;"><%= content_type.icon %></i>
@@ -94,7 +94,7 @@
   <div class="col s12 m6 offset-m3">
     <div class="hoverable card">
       <div class="card-image">
-        <%= image_tag "card-headers/more.jpg", height: 200, width: 300 %>
+        <%= image_tag "card-headers/more.webp", height: 200, width: 300 %>
         <span class="card-title" style="width: 100%">
           <div>
             <i class="material-icons white-text" style="position: relative; top: 3px;">add</i>
diff --git a/app/views/documents/analysis/sections/_entities.html.erb b/app/views/documents/analysis/sections/_entities.html.erb
index 7fe4d125..65958ca5 100644
--- a/app/views/documents/analysis/sections/_entities.html.erb
+++ b/app/views/documents/analysis/sections/_entities.html.erb
@@ -28,7 +28,7 @@
           <% if entity.entity && entity.entity.image_uploads.any? %>
             <%= image_tag entity.entity.image_uploads.sample.src.url(:large), class: 'activator' %>
           <% else %>
-            <%= image_tag 'card-headers/' + entity_class.name.downcase.pluralize + '.jpg', class: 'activator' %>
+            <%= image_tag 'card-headers/' + entity_class.name.downcase.pluralize + '.webp', class: 'activator' %>
           <% end %>
         </div>
         <div class="card-content">
diff --git a/app/views/documents/analysis/sections/_general.html.erb b/app/views/documents/analysis/sections/_general.html.erb
index 50181aa7..57890772 100644
--- a/app/views/documents/analysis/sections/_general.html.erb
+++ b/app/views/documents/analysis/sections/_general.html.erb
@@ -2,7 +2,7 @@
   <div class="col s12">
     <div class="card horizontal">
       <div class="card-image">
-        <%= image_tag 'card-headers/document-mini.jpg' %>
+        <%= image_tag 'card-headers/document-mini.webp' %>
       </div>
       <div class="card-stacked">
         <div class="card-content">
diff --git a/app/views/information/content_type.html.erb b/app/views/information/content_type.html.erb
index adeb57aa..4b3fcfc9 100644
--- a/app/views/information/content_type.html.erb
+++ b/app/views/information/content_type.html.erb
@@ -5,7 +5,7 @@
 
   set_meta_tags title: "Creating #{pluralized_class_name.downcase}",
                 description: "Notebook.ai provides a thorough #{singular_class_name.downcase} template to create and edit fictional #{pluralized_class_name.downcase} within a rich world.",
-                image_src: URI.join(root_url, asset_path("card-headers/#{pluralized_class_name.downcase}.jpg")),
+                image_src: URI.join(root_url, asset_path("card-headers/#{pluralized_class_name.downcase}.webp")),
                 og: {
                   title: "Creating #{pluralized_class_name.downcase} on Notebook.ai"
                 }
@@ -19,7 +19,7 @@
   <div class="col s12">
     <div class="card horizontal">
       <div class="card-image">
-        <%= image_tag "card-headers/#{pluralized_class_name.downcase}.jpg", class: 'materialboxed tooltipped', alt: "The default image used for all #{pluralized_class_name.downcase} on Notebook.ai, but you can replace it with your own uploads.", data: { tooltip: "The default image used for all #{pluralized_class_name.downcase} on Notebook.ai, but you can replace it with your own uploads."} %>
+        <%= image_tag "card-headers/#{pluralized_class_name.downcase}.webp", class: 'materialboxed tooltipped', alt: "The default image used for all #{pluralized_class_name.downcase} on Notebook.ai, but you can replace it with your own uploads.", data: { tooltip: "The default image used for all #{pluralized_class_name.downcase} on Notebook.ai, but you can replace it with your own uploads."} %>
       </div>
       <div class="card-stacked">
         <div class="card-content spaced-paragraphs">
diff --git a/app/views/main/index.html.erb b/app/views/main/index.html.erb
index e6f74227..f4af39e7 100644
--- a/app/views/main/index.html.erb
+++ b/app/views/main/index.html.erb
@@ -260,7 +260,7 @@
         <div class="col l3 m6 s12">
           <div class="card hoverable" style="min-height: 330px;">
             <div class="card-image">
-              <%= image_tag "card-headers/timelines.jpg", height: 300, width: 300, style: 'object-fit: cover' %>
+              <%= image_tag "card-headers/timelines.webp", height: 300, width: 300, style: 'object-fit: cover' %>
               <h3 class="card-title bordered-text">Create timelines</h3>
             </div>
             <div class="card-content fixed-card-content">
@@ -274,7 +274,7 @@
         <div class="col l3 m6 s12">
           <div class="card hoverable" style="min-height: 330px;">
             <div class="card-image">
-              <%= image_tag "card-headers/pagecollections.jpg", height: 300, width: 300, style: 'object-fit: cover' %>
+              <%= image_tag "card-headers/pagecollections.webp", height: 300, width: 300, style: 'object-fit: cover' %>
               <h3 class="card-title bordered-text">Create collections</h3>
             </div>
             <div class="card-content fixed-card-content">
diff --git a/app/views/prompts/_smart_sidebar.html.erb b/app/views/prompts/_smart_sidebar.html.erb
index e72ea6d7..633e52bc 100644
--- a/app/views/prompts/_smart_sidebar.html.erb
+++ b/app/views/prompts/_smart_sidebar.html.erb
@@ -5,7 +5,7 @@
   <li>
     <div class="user-view">
       <div class="background">
-        <%= image_tag "card-headers/#{content.class.name.downcase.pluralize}.jpg", width: '100%' %>
+        <%= image_tag "card-headers/#{content.class.name.downcase.pluralize}.webp", width: '100%' %>
       </div>
       <a href="#name">
         <h1 class="white-text name bordered-text">
diff --git a/app/views/universes/content_list.html.erb b/app/views/universes/content_list.html.erb
index db0fd232..e25652ce 100644
--- a/app/views/universes/content_list.html.erb
+++ b/app/views/universes/content_list.html.erb
@@ -3,7 +3,7 @@
     <div class="col s12">
       <div class="card">
         <div class="card-image", style="height: 260px; overflow-y: hidden;">
-          <%= image_tag "card-headers/#{@content_type.to_s.downcase.pluralize}.jpg" %>
+          <%= image_tag "card-headers/#{@content_type.to_s.downcase.pluralize}.webp" %>
           <span class="card-title black lighten-3">
             <i class="material-icons <%= @content_type.text_color %>"><%= @content_type.icon %></i>
             <%= @content_type.to_s.capitalize.pluralize %>
diff --git a/app/views/users/content_list.html.erb b/app/views/users/content_list.html.erb
index 9e0ee293..bfd38188 100644
--- a/app/views/users/content_list.html.erb
+++ b/app/views/users/content_list.html.erb
@@ -3,7 +3,7 @@
     <div class="col s12">
       <div class="card">
         <div class="card-image", style="height: 260px; overflow-y: hidden;">
-          <%= image_tag "card-headers/#{@content_type.to_s.downcase.pluralize}.jpg" %>
+          <%= image_tag "card-headers/#{@content_type.to_s.downcase.pluralize}.webp" %>
           <span class="card-title black lighten-3">
             <i class="material-icons <%= @content_type.text_color %>"><%= @content_type.icon %></i>
             <%= @content_type.to_s.capitalize.pluralize %>
diff --git a/lib/extensions/thredded/topic.rb b/lib/extensions/thredded/topic.rb
index 41144bcc..95696f98 100644
--- a/lib/extensions/thredded/topic.rb
+++ b/lib/extensions/thredded/topic.rb
@@ -37,11 +37,11 @@ module Extensions
       end
 
       def random_public_image
-        "card-headers/discussions.jpg"
+        "card-headers/discussions.webp"
       end
 
       def first_public_image
-        "card-headers/discussions.jpg"
+        "card-headers/discussions.webp"
       end
 
       def name
diff --git a/lib/tasks/one_off.rake b/lib/tasks/one_off.rake
index 879b652a..3fc6f8ab 100644
--- a/lib/tasks/one_off.rake
+++ b/lib/tasks/one_off.rake
@@ -23,7 +23,7 @@ namespace :one_off do
       page_types: ['Universe'],
       color: Universe.color,
       user_id: OWNER_USER_ID,
-      cover_image: "card-headers/universes.jpg",
+      cover_image: "card-headers/universes.webp",
       description: "The Multiverse is for all of our universes. It's a single, public index — a starting point, if you will — for the wonderful worlds of Notebook.ai.\n\nWhether it's sci-fi or modern, fantasy or fairy tale, modern or horror, original content or alternate universes — your universe is welcome in the Multiverse. Just make sure it's all filled out and has all kinds of pages to continue getting lost in from the universe's page!"
     )
 
@@ -56,7 +56,7 @@ namespace :one_off do
       page_types: ['Creature', 'Flora'],
       color: Creature.color,
       user_id: OWNER_USER_ID,
-      cover_image: "card-headers/creatures.jpg",
+      cover_image: "card-headers/creatures.webp",
       description: "The Bestiary is a collection of life.\n\nSubmit your creatures from all your universes, big or small, and then submit your plant life too!"
     )
 
@@ -67,7 +67,7 @@ namespace :one_off do
       page_types: ['Location', 'Planet', 'Continent', 'Country', 'Town', 'Landmark'],
       color: Location.color,
       user_id: OWNER_USER_ID,
-      cover_image: "card-headers/locations.jpg",
+      cover_image: "card-headers/locations.webp",
       description: "The Atlas is a public collection for the locations in our worlds.\n\nYou can submit locations, planets, continents, countries, towns, and landmarks! Let's fill the atlas up with a rich shared world populated with locations around the multiverse."
     )
 
@@ -78,7 +78,7 @@ namespace :one_off do
       page_types: ['Religion', 'Deity'],
       color: Religion.color,
       user_id: OWNER_USER_ID,
-      cover_image: "card-headers/religions.jpg",
+      cover_image: "card-headers/religions.webp",
       description: "We can build a collective pantheon of gods and goddesses by submitting our deity and religion pages to this collection. Feel free to have your characters take up any the religions shared here!"
     )
 
@@ -100,7 +100,7 @@ namespace :one_off do
       page_types: ['Tradition'],
       color: Tradition.color,
       user_id: OWNER_USER_ID,
-      cover_image: "card-headers/traditions.jpg",
+      cover_image: "card-headers/traditions.webp",
       description: "We're building a giant calendar of all kinds of traditions, events, routines, and important dates. Submit your traditions and let's see if we can fill up a whole year!"
     )