diff --git a/package-lock.json b/package-lock.json
index fba6ab70..5bc0918c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1604,6 +1604,60 @@
         "node": ">=14.0.0"
       }
     },
+    "node_modules/@tailwindcss/oxide-wasm32-wasi/node_modules/@emnapi/core": {
+      "version": "1.4.5",
+      "inBundle": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@emnapi/wasi-threads": "1.0.4",
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-wasm32-wasi/node_modules/@emnapi/runtime": {
+      "version": "1.4.5",
+      "inBundle": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-wasm32-wasi/node_modules/@emnapi/wasi-threads": {
+      "version": "1.0.4",
+      "inBundle": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-wasm32-wasi/node_modules/@napi-rs/wasm-runtime": {
+      "version": "0.2.12",
+      "inBundle": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@emnapi/core": "^1.4.3",
+        "@emnapi/runtime": "^1.4.3",
+        "@tybys/wasm-util": "^0.10.0"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-wasm32-wasi/node_modules/@tybys/wasm-util": {
+      "version": "0.10.0",
+      "inBundle": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-wasm32-wasi/node_modules/tslib": {
+      "version": "2.8.0",
+      "inBundle": true,
+      "license": "0BSD",
+      "optional": true
+    },
     "node_modules/@tailwindcss/oxide-win32-arm64-msvc": {
       "version": "4.1.13",
       "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-arm64-msvc/-/oxide-win32-arm64-msvc-4.1.13.tgz",
diff --git a/src/pages/News/NewsDetailPage.tsx b/src/pages/News/NewsDetailPage.tsx
index 8e10ead6..b39feca6 100644
--- a/src/pages/News/NewsDetailPage.tsx
+++ b/src/pages/News/NewsDetailPage.tsx
@@ -275,18 +275,26 @@ const NewsDetailPage: React.FC = () => {
             animate={{ opacity: 1, y: 0 }}
             transition={{ duration: 0.5 }}
           >
-            <img
-              src={post.image}
-              alt={post.title}
-              className="w-full h-auto max-h-80 object-contain mx-auto cursor-pointer hover:scale-105 transition-transform duration-300"
-              onClick={() =>
-                setModalImage({
-                  src: post.image,
-                  alt: post.title,
-                })
-              }
-              data-zoomable="true"
-            />
+            <picture>
+              {post.image.endsWith('.png') && (
+                <source
+                  srcSet={post.image.replace(/\.png$/, '.webp')}
+                  type="image/webp"
+                />
+              )}
+              <img
+                src={post.image}
+                alt={post.title}
+                className="w-full h-auto max-h-80 object-contain mx-auto cursor-pointer hover:scale-105 transition-transform duration-300"
+                onClick={() =>
+                  setModalImage({
+                    src: post.image.replace(/\.png$/, '.webp'),
+                    alt: post.title,
+                  })
+                }
+                data-zoomable="true"
+              />
+            </picture>
           </motion.div>
         )}
 
@@ -407,6 +415,7 @@ const NewsDetailPage: React.FC = () => {
             />
             <p className="text-white text-center mt-2 text-sm">
               {modalImage.alt}
+              {modalImage.src}
             </p>
             <button
               onClick={closeImageModal}
diff --git a/src/pages/News/NewsPage.tsx b/src/pages/News/NewsPage.tsx
index ebdec180..1a54188f 100644
--- a/src/pages/News/NewsPage.tsx
+++ b/src/pages/News/NewsPage.tsx
@@ -498,11 +498,19 @@ const NewsPage: React.FC = () => {
                         className={`${viewMode === 'list' ? 'h-full' : 'h-56'} overflow-hidden`}
                       >
                         {post.image ? (
-                          <img
-                            src={post.image}
-                            alt={post.title}
-                            className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-700"
-                          />
+                          <picture>
+                            {post.image.endsWith('.png') && (
+                              <source
+                                srcSet={post.image.replace(/\.png$/, '.webp')}
+                                type="image/webp"
+                              />
+                            )}
+                            <img
+                              src={post.image}
+                              alt={post.title}
+                              className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-700"
+                            />
+                          </picture>
                         ) : (
                           <div className="w-full h-full bg-gradient-to-br from-blue-100 via-purple-50 to-green-100 flex items-center justify-center">
                             <div className="text-6xl opacity-50">📰</div>