feat: add rehypePictureWebp plugin for optimized image handling

astro.config.mjs

@@ -4,7 +4,8 @@ import mdx from "@astrojs/mdx";
 import tailwindcss from "@tailwindcss/vite";
 import icon from "astro-icon";
 import remarkReadingTime from "remark-reading-time";
-import { remarkR2Images } from './src/plugins/remark-r2-images.mjs';
+import { remarkR2Images } from "./src/plugins/remark-r2-images.mjs";
+import { rehypePictureWebp } from "./src/plugins/rehype-picture-webp.mjs";
 
 export default defineConfig({
   site: "https://balodeplao.com/",
@@ -18,8 +19,9 @@ export default defineConfig({
             file.data.readingTime.minutes;
         };
       },
-      remarkR2Images
+      remarkR2Images,
     ],
+    rehypePlugins: [rehypePictureWebp],
   },
   i18n: {
     defaultLocale: "vi",