diff --git a/assets/images/big-face.png b/assets/images/big-face.png
deleted file mode 100644
index 3901373..0000000
Binary files a/assets/images/big-face.png and /dev/null differ
diff --git a/assets/images/big-face.webp b/assets/images/big-face.webp
new file mode 100644
index 0000000..6fb3b40
Binary files /dev/null and b/assets/images/big-face.webp differ
diff --git a/assets/images/borded-face.png b/assets/images/borded-face.png
deleted file mode 100644
index 847ba92..0000000
Binary files a/assets/images/borded-face.png and /dev/null differ
diff --git a/assets/images/borded-face.webp b/assets/images/borded-face.webp
new file mode 100644
index 0000000..09e3d38
Binary files /dev/null and b/assets/images/borded-face.webp differ
diff --git a/assets/images/small-face.png b/assets/images/small-face.png
deleted file mode 100644
index 6854054..0000000
Binary files a/assets/images/small-face.png and /dev/null differ
diff --git a/assets/images/small-face.webp b/assets/images/small-face.webp
new file mode 100644
index 0000000..7085b91
Binary files /dev/null and b/assets/images/small-face.webp differ
diff --git a/content/projects/react-weather-app/index.md b/content/projects/react-weather-app/index.md
index 69514bc..a7acdae 100644
--- a/content/projects/react-weather-app/index.md
+++ b/content/projects/react-weather-app/index.md
@@ -18,4 +18,4 @@ This is a project that I made as a step in the interview process for my final ye
 
 ## Screenshots
 
-![Project screenshot](react-weather-app-screenshot.png)
\ No newline at end of file
+![Project screenshot](react-weather-app-screenshot.webp)
\ No newline at end of file
diff --git a/content/projects/react-weather-app/react-weather-app-screenshot.png b/content/projects/react-weather-app/react-weather-app-screenshot.png
deleted file mode 100644
index c5f9ae9..0000000
Binary files a/content/projects/react-weather-app/react-weather-app-screenshot.png and /dev/null differ
diff --git a/content/projects/react-weather-app/react-weather-app-screenshot.webp b/content/projects/react-weather-app/react-weather-app-screenshot.webp
new file mode 100644
index 0000000..486884e
Binary files /dev/null and b/content/projects/react-weather-app/react-weather-app-screenshot.webp differ
diff --git a/hugo.toml b/hugo.toml
index 7a2c60c..0f72e1f 100644
--- a/hugo.toml
+++ b/hugo.toml
@@ -39,3 +39,20 @@ enableRobotsTXT = true
         name = 'Contact'
         url = '/contact'
         weight = 5
+[[deployment.matchers]]
+    # Cache static assets for 1 year.
+    pattern = "^.+\\.(js|css|svg|ttf)$"
+    cacheControl = "max-age=31536000, no-transform, public"
+    gzip = true
+[[deployment.matchers]]
+    pattern = "^.+\\.(gif|png|jpg|webp)$"
+    cacheControl = "max-age=31536000, no-transform, public"
+    gzip = false
+[[deployment.matchers]]
+    # Set custom content type for /sitemap.xml
+    pattern = "^sitemap\\.xml$"
+    contentType = "application/xml"
+    gzip = true
+[[deployment.matchers]]
+    pattern = "^.+\\.(html|xml|json)$"
+    gzip = true
diff --git a/layouts/_default/about.html b/layouts/_default/about.html
index 2da2ce0..a22454c 100644
--- a/layouts/_default/about.html
+++ b/layouts/_default/about.html
@@ -7,10 +7,10 @@
 {{ define "main" }}
     {{ partial "breadcrumb.html" . }}
 
-    {{ $faceImage := resources.Get "images/big-face.png" }}
+    {{ $faceImage := resources.Get "images/big-face.webp" }}
     
     <section>
-        <img src="{{ $faceImage.Permalink }}" alt="Hazem Krimi's face">
+        <img src="{{ $faceImage.Permalink }}" alt="Hazem Krimi's face" loading="lazy">
         {{ .Content }}
     </section>
     
diff --git a/layouts/index.html b/layouts/index.html
index 3d0cb95..b327fe6 100644
--- a/layouts/index.html
+++ b/layouts/index.html
@@ -4,7 +4,7 @@
     <link rel="stylesheet" href="{{ $styles.Permalink }}" />
 {{ end }}
 {{ define "main" }}
-    {{ $faceImage := resources.Get "images/big-face.png" }}
+    {{ $faceImage := resources.Get "images/big-face.webp" }}
     
     <section id="intro">
         <div>
@@ -15,7 +15,7 @@
                 <a href="{{ urls.JoinPath .Site.BaseURL "contact" }}">Contact</a>
             </div>
         </div>
-        <img src="{{ $faceImage.Permalink }}" alt="Hazem Krimi's face">
+        <img src="{{ $faceImage.Permalink }}" alt="Hazem Krimi's face" loading="lazy">
     </section>
 
     <section id="about">
diff --git a/layouts/partials/about-card.html b/layouts/partials/about-card.html
index c3605f5..8e75596 100644
--- a/layouts/partials/about-card.html
+++ b/layouts/partials/about-card.html
@@ -1,5 +1,5 @@
 {{ $cv := resources.Get "cv.pdf" }}
-{{ $faceImage := resources.Get "images/borded-face.png" }}
+{{ $faceImage := resources.Get "images/borded-face.webp" }}
 
 <div id="about-card">
   <img src="{{ $faceImage.Permalink }}" alt="Hazem Krimi's face" />
diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html
index 32bb2fa..e4c4827 100644
--- a/layouts/partials/footer.html
+++ b/layouts/partials/footer.html
@@ -1,4 +1,4 @@
-{{ $faceImage := resources.Get "images/small-face.png" }}
+{{ $faceImage := resources.Get "images/small-face.webp" }}
 {{ $cv :=resources.Get "cv.pdf" }}
 
 <footer>
diff --git a/layouts/partials/header.html b/layouts/partials/header.html
index 14fcffb..d69b955 100644
--- a/layouts/partials/header.html
+++ b/layouts/partials/header.html
@@ -1,4 +1,4 @@
-{{ $faceImage := resources.Get "images/small-face.png" }}
+{{ $faceImage := resources.Get "images/small-face.webp" }}
 {{ $cv := resources.Get "cv.pdf" }}
 
 <header>