feat: replace PNG images with WEBP format for improved performance

Author: pphatdev

content/projects/pphat-netlify-app/index.mdx

@@ -2,7 +2,7 @@
 title: "pphat.netlify.app"
 slug: "pphat-netlify-app"
 description: "A personal portfolio website for PPhat, showcasing frontend expertise, work experience, tech stack, and featured projects."
-image: "https://pphat.me/assets/projects/pphat.netlify.app/pphat.netlify.app.png"
+image: "https://pphat.me/assets/projects/pphat.netlify.app/pphat.netlify.app.webp"
 tags: ["Portfolio", "Blogs", "Projects"]
 languages: ["Next.js", "TailwindCss", "Shadcn"]
 source:
@@ -36,16 +36,16 @@ createdAt: "2026-03-14T10:12:15.648Z"
 ---
 
 <div class="blog-gallery" data-layout="snap" data-captions="true">
-  <img src="https://pphat.me/assets/projects/pphat.netlify.app/dark-1.png" alt="Home Page Dark Mode" className=""/>
-  <img src="https://pphat.me/assets/projects/pphat.netlify.app/light-1.png" alt="Home Page Light Mode" className=""/>
-  <img src="https://pphat.me/assets/projects/pphat.netlify.app/dark-2.png" alt="Project Page Dark Mode" className=""/>
-  <img src="https://pphat.me/assets/projects/pphat.netlify.app/light-2.png" alt="Project Page light Mode" className=""/>
-  <img src="https://pphat.me/assets/projects/pphat.netlify.app/dark-3.png" alt="Blog Page Dark Mode" className=""/>
-  <img src="https://pphat.me/assets/projects/pphat.netlify.app/light-3.png" alt="Blog Page light Mode" className=""/>
-  <img src="https://pphat.me/assets/projects/pphat.netlify.app/dark-4.png" alt="About Me page dark mode" className=""/>
-  <img src="https://pphat.me/assets/projects/pphat.netlify.app/light-4.png" alt="About Me page light mode" className=""/>
-  <img src="https://pphat.me/assets/projects/pphat.netlify.app/dark-5.png" alt="Contact me dark mode" className=""/>
-  <img src="https://pphat.me/assets/projects/pphat.netlify.app/light-5.png" alt="Contact me light mode" className=""/>
+  <img src="https://pphat.me/assets/projects/pphat.netlify.app/dark-1.webp" alt="Home Page Dark Mode" className=""/>
+  <img src="https://pphat.me/assets/projects/pphat.netlify.app/light-1.webp" alt="Home Page Light Mode" className=""/>
+  <img src="https://pphat.me/assets/projects/pphat.netlify.app/dark-2.webp" alt="Project Page Dark Mode" className=""/>
+  <img src="https://pphat.me/assets/projects/pphat.netlify.app/light-2.webp" alt="Project Page light Mode" className=""/>
+  <img src="https://pphat.me/assets/projects/pphat.netlify.app/dark-3.webp" alt="Blog Page Dark Mode" className=""/>
+  <img src="https://pphat.me/assets/projects/pphat.netlify.app/light-3.webp" alt="Blog Page light Mode" className=""/>
+  <img src="https://pphat.me/assets/projects/pphat.netlify.app/dark-4.webp" alt="About Me page dark mode" className=""/>
+  <img src="https://pphat.me/assets/projects/pphat.netlify.app/light-4.webp" alt="About Me page light mode" className=""/>
+  <img src="https://pphat.me/assets/projects/pphat.netlify.app/dark-5.webp" alt="Contact me dark mode" className=""/>
+  <img src="https://pphat.me/assets/projects/pphat.netlify.app/light-5.webp" alt="Contact me light mode" className=""/>
 </div>
 
 <br/>
@@ -113,5 +113,5 @@ Built with the latest Next.js 15 and React 19, it demonstrates best practices in
 
 Here is the screenshot preview:
 
-![pphat-netlify-app](https://pphat.me/assets/projects/pphat.netlify.app/dark-full.png)
-![pphat-netlify-app](https://pphat.me/assets/projects/pphat.netlify.app/light-full.png)
+![pphat-netlify-app](https://pphat.me/assets/projects/pphat.netlify.app/dark-full.webp)
+![pphat-netlify-app](https://pphat.me/assets/projects/pphat.netlify.app/light-full.webp)