diff --git a/frontend/src/Pages/Shop/ShopPage.jsx b/frontend/src/Pages/Shop/ShopPage.jsx
index 7cb0e716..bc209f22 100644
--- a/frontend/src/Pages/Shop/ShopPage.jsx
+++ b/frontend/src/Pages/Shop/ShopPage.jsx
@@ -36,7 +36,7 @@ const ShopPage = () => {
             <div className="shop-page p-8">
                 <div className="shop-details mb-10 bg-white shadow-xl rounded-xl overflow-hidden transition-transform transform hover:scale-105 duration-300 ease-in-out">
                     <img
-                        src={shop.image}
+                        src={shop.image.replace(/\.\w+$/, '.webp')}
                         alt={shop.name}
                         className="w-full h-48 object-cover"
                     />
diff --git a/frontend/src/Pages/blog manage/InduvidualBlog.jsx b/frontend/src/Pages/blog manage/InduvidualBlog.jsx
index 958301ac..7e47b89f 100644
--- a/frontend/src/Pages/blog manage/InduvidualBlog.jsx	
+++ b/frontend/src/Pages/blog manage/InduvidualBlog.jsx	
@@ -144,7 +144,7 @@ export default function IndividualBlog() {
 
                 {blog.newsImage && (
                     <img
-                        src={`${blog.newsImage}`}
+                        src={blog.newsImage.replace(/\.\w+$/, '.webp')}
                         alt={blog.title}
                         className="object-cover w-full h-auto mb-8 rounded-lg shadow-lg"
                     />
diff --git a/frontend/src/Pages/blog manage/UserBlog.jsx b/frontend/src/Pages/blog manage/UserBlog.jsx
index 5ed14766..5757521e 100644
--- a/frontend/src/Pages/blog manage/UserBlog.jsx	
+++ b/frontend/src/Pages/blog manage/UserBlog.jsx	
@@ -100,7 +100,7 @@ export default function TourismBlog() {
                                         <div className="relative w-full h-25">
                                             {blog.newsImage && (
                                                 <img
-                                                    src={`${blog.newsImage}`}
+                                                    src={blog.newsImage.replace(/\.\w+$/, '.webp')}
                                                     alt={blog.title}
                                                     className="object-cover w-full h-full rounded-lg shadow-lg"
                                                 />
@@ -181,7 +181,7 @@ export default function TourismBlog() {
                                 <div className="relative">
                                     {blog.newsImage && (
                                         <img
-                                            src={`${blog.newsImage}`}
+                                            src={blog.newsImage.replace(/\.\w+$/, '.webp')}
                                             alt={blog.title}
                                             className="object-cover w-full h-64"
                                         />