feat: replace PNG images with WEBP format for improved performance

Author: pphatdev

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

@@ -2,7 +2,7 @@
 title: "pphat.vercel.app"
 slug: "pphat-vercel-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.vercel.app/pphat.vercel.app.png"
+image: "https://pphat.me/assets/projects/pphat.vercel.app/pphat.vercel.app.webp"
 tags: ["Portfolio"]
 languages: ["Next.js", "TailwindCss", "Shadcn"]
 source:
@@ -26,16 +26,16 @@ createdAt: "2025-03-31T10:12:15.648Z"
 ---
 
 <div class="blog-gallery" data-layout="snap" data-captions="true">
-  <img src="https://pphat.me/assets/projects/pphat.vercel.app/dark-1.png" alt="Home Page Dark Mode" className=""/>
-  <img src="https://pphat.me/assets/projects/pphat.vercel.app/light-1.png" alt="Home Page Light Mode" className=""/>
-  <img src="https://pphat.me/assets/projects/pphat.vercel.app/dark-2.png" alt="Project Page Dark Mode" className=""/>
-  <img src="https://pphat.me/assets/projects/pphat.vercel.app/light-2.png" alt="Project Page light Mode" className=""/>
-  <img src="https://pphat.me/assets/projects/pphat.vercel.app/dark-3.png" alt="Blog Page Dark Mode" className=""/>
-  <img src="https://pphat.me/assets/projects/pphat.vercel.app/light-3.png" alt="Blog Page light Mode" className=""/>
-  <img src="https://pphat.me/assets/projects/pphat.vercel.app/dark-4.png" alt="About Me page dark mode" className=""/>
-  <img src="https://pphat.me/assets/projects/pphat.vercel.app/light-4.png" alt="About Me page light mode" className=""/>
-  <img src="https://pphat.me/assets/projects/pphat.vercel.app/dark-5.png" alt="Contact me dark mode" className=""/>
-  <img src="https://pphat.me/assets/projects/pphat.vercel.app/light-5.png" alt="Contact me light mode" className=""/>
+  <img src="https://pphat.me/assets/projects/pphat.vercel.app/dark-1.webp" alt="Home Page Dark Mode" className=""/>
+  <img src="https://pphat.me/assets/projects/pphat.vercel.app/light-1.webp" alt="Home Page Light Mode" className=""/>
+  <img src="https://pphat.me/assets/projects/pphat.vercel.app/dark-2.webp" alt="Project Page Dark Mode" className=""/>
+  <img src="https://pphat.me/assets/projects/pphat.vercel.app/light-2.webp" alt="Project Page light Mode" className=""/>
+  <img src="https://pphat.me/assets/projects/pphat.vercel.app/dark-3.webp" alt="Blog Page Dark Mode" className=""/>
+  <img src="https://pphat.me/assets/projects/pphat.vercel.app/light-3.webp" alt="Blog Page light Mode" className=""/>
+  <img src="https://pphat.me/assets/projects/pphat.vercel.app/dark-4.webp" alt="About Me page dark mode" className=""/>
+  <img src="https://pphat.me/assets/projects/pphat.vercel.app/light-4.webp" alt="About Me page light mode" className=""/>
+  <img src="https://pphat.me/assets/projects/pphat.vercel.app/dark-5.webp" alt="Contact me dark mode" className=""/>
+  <img src="https://pphat.me/assets/projects/pphat.vercel.app/light-5.webp" alt="Contact me light mode" className=""/>
 </div>
 
 <br/>
@@ -93,5 +93,5 @@ Built with Next.js 15 and React 19, it demonstrates cutting-edge web development
 
 Here is the screenshot preview:
 
-![pphat.vercel.app](https://pphat.me/assets/projects/pphat.vercel.app/dark-full.png)
-![pphat.vercel.app](https://pphat.me/assets/projects/pphat.vercel.app/light-full.png)
+![pphat.vercel.app](https://pphat.me/assets/projects/pphat.vercel.app/dark-full.webp)
+![pphat.vercel.app](https://pphat.me/assets/projects/pphat.vercel.app/light-full.webp)