diff --git a/data/de/homepage.yml b/data/de/homepage.yml
index 737d01fa..e4670905 100644
--- a/data/de/homepage.yml
+++ b/data/de/homepage.yml
@@ -93,7 +93,7 @@ slider:
 ############################# success #############################
 success_banner:
   enable : true
-  image : "media/success/success_banner.png"
+  image : "media/success/success_banner.webp"
   feature_item:
     # feature item loop
     - name : "Mathematikolympiade"
@@ -157,7 +157,7 @@ cta:
 ######################## Success story #############################
 success_story:
   enable : true
-  bg_image : "media/backgrounds/success-story.jpg"
+  bg_image : "media/backgrounds/success-story.webp"
   title : "Über die Schule"
   content : "Das Georg-Cantor-Gymnasium wurde im Jahre 1988 als eine mathematisch-naturwissenschaftliche Schule gegründet. Über die vielen Jahre kamen viele Veränderungen auf die Schule zu. Nach der Verleihung des Namen ''Georg-Cantor'', umformung zu einem Gymnasium, dem Umzug in ein neues Gebäude u.v.m ist die Schule heute ein erfolgreiches, modernes und produktives Gymnasium mit mathematisch-naturwissenschaftlichem Schwerpunkt, und dem Gütesiegel begabungsfördernde Schule vom Landesinstitut für Schulqualität und Lehrbildung."
   # video link
diff --git a/data/en/homepage.yml b/data/en/homepage.yml
index 59f3aa8f..c7d98abb 100644
--- a/data/en/homepage.yml
+++ b/data/en/homepage.yml
@@ -98,11 +98,11 @@ cta:
 ######################## Success story #############################
 success_story:
   enable : true
-  bg_image : "media/backgrounds/success-story.jpg"
+  bg_image : "media/backgrounds/success-story.webp"
   title : "Success Stories"
   content : "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat pariatur. Excepteur sint occaecat.
-            
-            
+
+
   ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
   dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris"
   # video link
@@ -115,7 +115,7 @@ event:
   title : "Upcoming Events"
   # event item comes from "content/**/event" folder.
 
-  
+
 ########################### funfacts ############################
 funfacts:
   enable : true
@@ -144,4 +144,4 @@ funfacts:
 blog:
   enable : true
   title : "Latest News"
-  # blog item comes from "content/**/blog" folder.
\ No newline at end of file
+  # blog item comes from "content/**/blog" folder.
diff --git a/static/media/backgrounds/success-story.webp b/static/media/backgrounds/success-story.webp
new file mode 100644
index 00000000..052ec571
Binary files /dev/null and b/static/media/backgrounds/success-story.webp differ
diff --git a/static/media/success/success_banner.webp b/static/media/success/success_banner.webp
new file mode 100644
index 00000000..caaa276f
Binary files /dev/null and b/static/media/success/success_banner.webp differ
diff --git a/themes/educenter-hugo/exampleSite/data/fr/homepage.yml b/themes/educenter-hugo/exampleSite/data/fr/homepage.yml
index beaf57ab..e2f7c93d 100644
--- a/themes/educenter-hugo/exampleSite/data/fr/homepage.yml
+++ b/themes/educenter-hugo/exampleSite/data/fr/homepage.yml
@@ -98,11 +98,11 @@ cta:
 ######################## Success story #############################
 success_story:
   enable : true
-  bg_image : "media/backgrounds/success-story.jpg"
+  bg_image : "media/backgrounds/success-story.webp"
   title : "Histoires de réussites"
   content : "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat pariatur. Excepteur sint occaecat.
-            
-            
+
+
   ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
   dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris"
   # video link
@@ -115,7 +115,7 @@ event:
   title : "Événements à venir"
   # event item comes from "content/**/event" folder.
 
-  
+
 ########################### funfacts ############################
 funfacts:
   enable : true
@@ -144,4 +144,4 @@ funfacts:
 blog:
   enable : true
   title : "DERNIÈRES NOUVELLES"
-  # blog item comes from "content/**/blog" folder.
\ No newline at end of file
+  # blog item comes from "content/**/blog" folder.