diff --git a/src/Avatar/Avatar.stories.tsx b/src/Avatar/Avatar.stories.tsx
index 826cae3f..57c93a62 100644
--- a/src/Avatar/Avatar.stories.tsx
+++ b/src/Avatar/Avatar.stories.tsx
@@ -16,7 +16,7 @@ export default {
   },
   args: {
     innerClassName: 'rounded',
-    src: 'https://daisyui.com/images/stock/photo-1534528741775-53994a69daeb.jpg',
+    src: 'https://img.daisyui.com/images/stock/photo-1534528741775-53994a69daeb.webp',
   },
 } as Meta
 
diff --git a/src/Button/Button.stories.tsx b/src/Button/Button.stories.tsx
index 7e194818..5e93919c 100644
--- a/src/Button/Button.stories.tsx
+++ b/src/Button/Button.stories.tsx
@@ -170,7 +170,7 @@ export const Glass: Story<ButtonProps> = (args) => {
       className="w-full flex justify-center py-8 rounded-md"
       style={{
         backgroundImage:
-          'url(https://daisyui.com/images/stock/photo-1507358522600-9f71e620c44e.jpg)',
+          'url(https://img.daisyui.com/images/stock/photo-1507358522600-9f71e620c44e.webp)',
       }}
     >
       <Button {...args}>Glass button</Button>
diff --git a/src/Card/Card.stories.tsx b/src/Card/Card.stories.tsx
index 2ddf7ebf..3e069aa6 100644
--- a/src/Card/Card.stories.tsx
+++ b/src/Card/Card.stories.tsx
@@ -13,7 +13,7 @@ export const Default: Story<CardProps> = (args) => {
   return (
     <Card {...args}>
       <Card.Image
-        src="https://daisyui.com/images/stock/photo-1606107557195-0e29a4b5b4aa.jpg"
+        src="https://img.daisyui.com/images/stock/photo-1606107557195-0e29a4b5b4aa.webp"
         alt="Shoes"
       />
       <Card.Body>
@@ -35,7 +35,7 @@ export const Responsive: Story<CardProps> = (args) => {
       </div>
       <Card {...args} side="lg">
         <Card.Image
-          src="https://daisyui.com/images/stock/photo-1606107557195-0e29a4b5b4aa.jpg"
+          src="https://img.daisyui.com/images/stock/photo-1606107557195-0e29a4b5b4aa.webp"
           alt="Shoes"
         />
         <Card.Body>
@@ -54,7 +54,7 @@ export const Centered: Story<CardProps> = (args) => {
   return (
     <Card {...args}>
       <Card.Image
-        src="https://daisyui.com/images/stock/photo-1606107557195-0e29a4b5b4aa.jpg"
+        src="https://img.daisyui.com/images/stock/photo-1606107557195-0e29a4b5b4aa.webp"
         alt="Shoes"
       />
       <Card.Body className="items-center text-center">
@@ -72,7 +72,7 @@ export const ImageOverlay: Story<CardProps> = (args) => {
   return (
     <Card {...args} imageFull>
       <Card.Image
-        src="https://daisyui.com/images/stock/photo-1606107557195-0e29a4b5b4aa.jpg"
+        src="https://img.daisyui.com/images/stock/photo-1606107557195-0e29a4b5b4aa.webp"
         alt="Shoes"
       />
       <Card.Body>
diff --git a/src/Card/Card.test.tsx b/src/Card/Card.test.tsx
index 84bc65bd..604f5774 100644
--- a/src/Card/Card.test.tsx
+++ b/src/Card/Card.test.tsx
@@ -74,12 +74,12 @@ describe('Card', () => {
   })
 
   it('Should render CardImage component', () => {
-    render(<Card.Image src="http://xyz/images/pic-1.jpg" alt="test image" />)
+    render(<Card.Image src="http://xyz/images/pic-1.webp" alt="test image" />)
     const figureElement = screen.getByRole('figure')
     expect(figureElement).toBeInTheDocument()
     const imgElement = screen.getByRole('img') as HTMLImageElement
     expect(imgElement).toBeInTheDocument()
-    expect(imgElement.src).toBe('http://xyz/images/pic-1.jpg')
+    expect(imgElement.src).toBe('http://xyz/images/pic-1.webp')
     expect(imgElement.alt).toBe('test image')
   })
 })
diff --git a/src/Carousel/Carousel.stories.tsx b/src/Carousel/Carousel.stories.tsx
index 1a34f989..b5a92281 100644
--- a/src/Carousel/Carousel.stories.tsx
+++ b/src/Carousel/Carousel.stories.tsx
@@ -13,31 +13,31 @@ export const Default: Story<CarouselProps> = (args) => {
   return (
     <Carousel {...args} className="rounded-box">
       <Carousel.Item
-        src="https://daisyui.com/images/stock/photo-1559703248-dcaaec9fab78.jpg"
+        src="https://img.daisyui.com/images/stock/photo-1559703248-dcaaec9fab78.webp"
         alt="Fruits"
       />
       <Carousel.Item
-        src="https://daisyui.com/images/stock/photo-1565098772267-60af42b81ef2.jpg"
+        src="https://img.daisyui.com/images/stock/photo-1565098772267-60af42b81ef2.webp"
         alt="Fruits"
       />
       <Carousel.Item
-        src="https://daisyui.com/images/stock/photo-1572635148818-ef6fd45eb394.jpg"
+        src="https://img.daisyui.com/images/stock/photo-1572635148818-ef6fd45eb394.webp"
         alt="Fruits"
       />
       <Carousel.Item
-        src="https://daisyui.com/images/stock/photo-1494253109108-2e30c049369b.jpg"
+        src="https://img.daisyui.com/images/stock/photo-1494253109108-2e30c049369b.webp"
         alt="Fruits"
       />
       <Carousel.Item
-        src="https://daisyui.com/images/stock/photo-1550258987-190a2d41a8ba.jpg"
+        src="https://img.daisyui.com/images/stock/photo-1550258987-190a2d41a8ba.webp"
         alt="Fruits"
       />
       <Carousel.Item
-        src="https://daisyui.com/images/stock/photo-1559181567-c3190ca9959b.jpg"
+        src="https://img.daisyui.com/images/stock/photo-1559181567-c3190ca9959b.webp"
         alt="Fruits"
       />
       <Carousel.Item
-        src="https://daisyui.com/images/stock/photo-1601004890684-d8cbf643f5f2.jpg"
+        src="https://img.daisyui.com/images/stock/photo-1601004890684-d8cbf643f5f2.webp"
         alt="Fruits"
       />
     </Carousel>
@@ -49,31 +49,31 @@ export const Snap: Story<CarouselProps> = (args) => {
   return (
     <Carousel {...args} className="rounded-box">
       <Carousel.Item
-        src="https://daisyui.com/images/stock/photo-1559703248-dcaaec9fab78.jpg"
+        src="https://img.daisyui.com/images/stock/photo-1559703248-dcaaec9fab78.webp"
         alt="Fruits"
       />
       <Carousel.Item
-        src="https://daisyui.com/images/stock/photo-1565098772267-60af42b81ef2.jpg"
+        src="https://img.daisyui.com/images/stock/photo-1565098772267-60af42b81ef2.webp"
         alt="Fruits"
       />
       <Carousel.Item
-        src="https://daisyui.com/images/stock/photo-1572635148818-ef6fd45eb394.jpg"
+        src="https://img.daisyui.com/images/stock/photo-1572635148818-ef6fd45eb394.webp"
         alt="Fruits"
       />
       <Carousel.Item
-        src="https://daisyui.com/images/stock/photo-1494253109108-2e30c049369b.jpg"
+        src="https://img.daisyui.com/images/stock/photo-1494253109108-2e30c049369b.webp"
         alt="Fruits"
       />
       <Carousel.Item
-        src="https://daisyui.com/images/stock/photo-1550258987-190a2d41a8ba.jpg"
+        src="https://img.daisyui.com/images/stock/photo-1550258987-190a2d41a8ba.webp"
         alt="Fruits"
       />
       <Carousel.Item
-        src="https://daisyui.com/images/stock/photo-1559181567-c3190ca9959b.jpg"
+        src="https://img.daisyui.com/images/stock/photo-1559181567-c3190ca9959b.webp"
         alt="Fruits"
       />
       <Carousel.Item
-        src="https://daisyui.com/images/stock/photo-1601004890684-d8cbf643f5f2.jpg"
+        src="https://img.daisyui.com/images/stock/photo-1601004890684-d8cbf643f5f2.webp"
         alt="Fruits"
       />
     </Carousel>
@@ -87,31 +87,31 @@ export const FullWidth: Story<CarouselProps> = (args) => {
   return (
     <Carousel {...args} className="w-64 rounded-box">
       <Carousel.Item
-        src="https://daisyui.com/images/stock/photo-1559703248-dcaaec9fab78.jpg"
+        src="https://img.daisyui.com/images/stock/photo-1559703248-dcaaec9fab78.webp"
         alt="Fruits"
       />
       <Carousel.Item
-        src="https://daisyui.com/images/stock/photo-1565098772267-60af42b81ef2.jpg"
+        src="https://img.daisyui.com/images/stock/photo-1565098772267-60af42b81ef2.webp"
         alt="Fruits"
       />
       <Carousel.Item
-        src="https://daisyui.com/images/stock/photo-1572635148818-ef6fd45eb394.jpg"
+        src="https://img.daisyui.com/images/stock/photo-1572635148818-ef6fd45eb394.webp"
         alt="Fruits"
       />
       <Carousel.Item
-        src="https://daisyui.com/images/stock/photo-1494253109108-2e30c049369b.jpg"
+        src="https://img.daisyui.com/images/stock/photo-1494253109108-2e30c049369b.webp"
         alt="Fruits"
       />
       <Carousel.Item
-        src="https://daisyui.com/images/stock/photo-1550258987-190a2d41a8ba.jpg"
+        src="https://img.daisyui.com/images/stock/photo-1550258987-190a2d41a8ba.webp"
         alt="Fruits"
       />
       <Carousel.Item
-        src="https://daisyui.com/images/stock/photo-1559181567-c3190ca9959b.jpg"
+        src="https://img.daisyui.com/images/stock/photo-1559181567-c3190ca9959b.webp"
         alt="Fruits"
       />
       <Carousel.Item
-        src="https://daisyui.com/images/stock/photo-1601004890684-d8cbf643f5f2.jpg"
+        src="https://img.daisyui.com/images/stock/photo-1601004890684-d8cbf643f5f2.webp"
         alt="Fruits"
       />
     </Carousel>
@@ -125,31 +125,31 @@ export const HalfWidth: Story<CarouselProps> = (args) => {
   return (
     <Carousel {...args} className="w-64 rounded-box">
       <Carousel.Item
-        src="https://daisyui.com/images/stock/photo-1559703248-dcaaec9fab78.jpg"
+        src="https://img.daisyui.com/images/stock/photo-1559703248-dcaaec9fab78.webp"
         alt="Fruits"
       />
       <Carousel.Item
-        src="https://daisyui.com/images/stock/photo-1565098772267-60af42b81ef2.jpg"
+        src="https://img.daisyui.com/images/stock/photo-1565098772267-60af42b81ef2.webp"
         alt="Fruits"
       />
       <Carousel.Item
-        src="https://daisyui.com/images/stock/photo-1572635148818-ef6fd45eb394.jpg"
+        src="https://img.daisyui.com/images/stock/photo-1572635148818-ef6fd45eb394.webp"
         alt="Fruits"
       />
       <Carousel.Item
-        src="https://daisyui.com/images/stock/photo-1494253109108-2e30c049369b.jpg"
+        src="https://img.daisyui.com/images/stock/photo-1494253109108-2e30c049369b.webp"
         alt="Fruits"
       />
       <Carousel.Item
-        src="https://daisyui.com/images/stock/photo-1550258987-190a2d41a8ba.jpg"
+        src="https://img.daisyui.com/images/stock/photo-1550258987-190a2d41a8ba.webp"
         alt="Fruits"
       />
       <Carousel.Item
-        src="https://daisyui.com/images/stock/photo-1559181567-c3190ca9959b.jpg"
+        src="https://img.daisyui.com/images/stock/photo-1559181567-c3190ca9959b.webp"
         alt="Fruits"
       />
       <Carousel.Item
-        src="https://daisyui.com/images/stock/photo-1601004890684-d8cbf643f5f2.jpg"
+        src="https://img.daisyui.com/images/stock/photo-1601004890684-d8cbf643f5f2.webp"
         alt="Fruits"
       />
     </Carousel>
@@ -163,31 +163,31 @@ export const Vertical: Story<CarouselProps> = (args) => {
   return (
     <Carousel {...args} className="h-96 w-64 rounded-box">
       <Carousel.Item
-        src="https://daisyui.com/images/stock/photo-1559703248-dcaaec9fab78.jpg"
+        src="https://img.daisyui.com/images/stock/photo-1559703248-dcaaec9fab78.webp"
         alt="Fruits"
       />
       <Carousel.Item
-        src="https://daisyui.com/images/stock/photo-1565098772267-60af42b81ef2.jpg"
+        src="https://img.daisyui.com/images/stock/photo-1565098772267-60af42b81ef2.webp"
         alt="Fruits"
       />
       <Carousel.Item
-        src="https://daisyui.com/images/stock/photo-1572635148818-ef6fd45eb394.jpg"
+        src="https://img.daisyui.com/images/stock/photo-1572635148818-ef6fd45eb394.webp"
         alt="Fruits"
       />
       <Carousel.Item
-        src="https://daisyui.com/images/stock/photo-1494253109108-2e30c049369b.jpg"
+        src="https://img.daisyui.com/images/stock/photo-1494253109108-2e30c049369b.webp"
         alt="Fruits"
       />
       <Carousel.Item
-        src="https://daisyui.com/images/stock/photo-1550258987-190a2d41a8ba.jpg"
+        src="https://img.daisyui.com/images/stock/photo-1550258987-190a2d41a8ba.webp"
         alt="Fruits"
       />
       <Carousel.Item
-        src="https://daisyui.com/images/stock/photo-1559181567-c3190ca9959b.jpg"
+        src="https://img.daisyui.com/images/stock/photo-1559181567-c3190ca9959b.webp"
         alt="Fruits"
       />
       <Carousel.Item
-        src="https://daisyui.com/images/stock/photo-1601004890684-d8cbf643f5f2.jpg"
+        src="https://img.daisyui.com/images/stock/photo-1601004890684-d8cbf643f5f2.webp"
         alt="Fruits"
       />
     </Carousel>
@@ -202,19 +202,19 @@ export const Numbered: Story<CarouselProps> = (args) => {
   return (
     <Carousel {...args} className="rounded-box">
       <Carousel.Item
-        src="https://daisyui.com/images/stock/photo-1625726411847-8cbb60cc71e6.jpg"
+        src="https://img.daisyui.com/images/stock/photo-1625726411847-8cbb60cc71e6.webp"
         alt="City"
       />
       <Carousel.Item
-        src="https://daisyui.com/images/stock/photo-1609621838510-5ad474b7d25d.jpg"
+        src="https://img.daisyui.com/images/stock/photo-1609621838510-5ad474b7d25d.webp"
         alt="City"
       />
       <Carousel.Item
-        src="https://daisyui.com/images/stock/photo-1414694762283-acccc27bca85.jpg"
+        src="https://img.daisyui.com/images/stock/photo-1414694762283-acccc27bca85.webp"
         alt="City"
       />
       <Carousel.Item
-        src="https://daisyui.com/images/stock/photo-1665553365602-b2fb8e5d1707.jpg"
+        src="https://img.daisyui.com/images/stock/photo-1665553365602-b2fb8e5d1707.webp"
         alt="City"
       />
     </Carousel>
@@ -228,19 +228,19 @@ export const Sequential: Story<CarouselProps> = (args) => {
   return (
     <Carousel {...args} className="rounded-box">
       <Carousel.Item
-        src="https://daisyui.com/images/stock/photo-1625726411847-8cbb60cc71e6.jpg"
+        src="https://img.daisyui.com/images/stock/photo-1625726411847-8cbb60cc71e6.webp"
         alt="City"
       />
       <Carousel.Item
-        src="https://daisyui.com/images/stock/photo-1609621838510-5ad474b7d25d.jpg"
+        src="https://img.daisyui.com/images/stock/photo-1609621838510-5ad474b7d25d.webp"
         alt="City"
       />
       <Carousel.Item
-        src="https://daisyui.com/images/stock/photo-1414694762283-acccc27bca85.jpg"
+        src="https://img.daisyui.com/images/stock/photo-1414694762283-acccc27bca85.webp"
         alt="City"
       />
       <Carousel.Item
-        src="https://daisyui.com/images/stock/photo-1665553365602-b2fb8e5d1707.jpg"
+        src="https://img.daisyui.com/images/stock/photo-1665553365602-b2fb8e5d1707.webp"
         alt="City"
       />
     </Carousel>
@@ -260,19 +260,19 @@ export const CustomButton: Story<CarouselProps> = (args) => {
   return (
     <Carousel {...args} className="rounded-box">
       <Carousel.Item
-        src="https://daisyui.com/images/stock/photo-1625726411847-8cbb60cc71e6.jpg"
+        src="https://img.daisyui.com/images/stock/photo-1625726411847-8cbb60cc71e6.webp"
         alt="City"
       />
       <Carousel.Item
-        src="https://daisyui.com/images/stock/photo-1609621838510-5ad474b7d25d.jpg"
+        src="https://img.daisyui.com/images/stock/photo-1609621838510-5ad474b7d25d.webp"
         alt="City"
       />
       <Carousel.Item
-        src="https://daisyui.com/images/stock/photo-1414694762283-acccc27bca85.jpg"
+        src="https://img.daisyui.com/images/stock/photo-1414694762283-acccc27bca85.webp"
         alt="City"
       />
       <Carousel.Item
-        src="https://daisyui.com/images/stock/photo-1665553365602-b2fb8e5d1707.jpg"
+        src="https://img.daisyui.com/images/stock/photo-1665553365602-b2fb8e5d1707.webp"
         alt="City"
       />
     </Carousel>
diff --git a/src/Carousel/Carousel.test.tsx b/src/Carousel/Carousel.test.tsx
index 326f430b..511c9f89 100644
--- a/src/Carousel/Carousel.test.tsx
+++ b/src/Carousel/Carousel.test.tsx
@@ -5,19 +5,19 @@ const children = [
   <Carousel.Item
     key="1"
     id="slide1"
-    src="http://xyz/images/pic-1.jpg"
+    src="http://xyz/images/pic-1.webp"
     alt="Pic-1"
   />,
   <Carousel.Item
     key="2"
     id="slide2"
-    src="http://xyz/images/pic-2.jpg"
+    src="http://xyz/images/pic-2.webp"
     alt="Pic-2"
   />,
   <Carousel.Item
     key="3"
     id="slide3"
-    src="http://xyz/images/pic-3.jpg"
+    src="http://xyz/images/pic-3.webp"
     alt="Pic-3"
   />,
 ]
diff --git a/src/ChatBubble/ChatBubble.stories.tsx b/src/ChatBubble/ChatBubble.stories.tsx
index 0d74fe56..f201e3e5 100644
--- a/src/ChatBubble/ChatBubble.stories.tsx
+++ b/src/ChatBubble/ChatBubble.stories.tsx
@@ -40,7 +40,7 @@ export const Default: Story<DefaultControls> = ({
         </ChatBubble.Header>
       )}
       {avatar && (
-        <ChatBubble.Avatar src="https://daisyui.com/images/stock/photo-1534528741775-53994a69daeb.jpg" />
+        <ChatBubble.Avatar src="https://img.daisyui.com/images/stock/photo-1534528741775-53994a69daeb.webp" />
       )}
       <ChatBubble.Message>You were my brother, Anakin.</ChatBubble.Message>
       {footer && <ChatBubble.Footer>Seen</ChatBubble.Footer>}
@@ -79,21 +79,21 @@ export const Side: Story<ChatBubbleProps> = (args) => (
 export const WithImage: Story<ChatBubbleProps> = (args) => (
   <>
     <ChatBubble>
-      <ChatBubble.Avatar src="https://daisyui.com/images/stock/photo-1534528741775-53994a69daeb.jpg" />
+      <ChatBubble.Avatar src="https://img.daisyui.com/images/stock/photo-1534528741775-53994a69daeb.webp" />
       <ChatBubble.Message>
         It was said that you would, destroy the Sith, not join them.
       </ChatBubble.Message>
     </ChatBubble>
 
     <ChatBubble>
-      <ChatBubble.Avatar src="https://daisyui.com/images/stock/photo-1534528741775-53994a69daeb.jpg" />
+      <ChatBubble.Avatar src="https://img.daisyui.com/images/stock/photo-1534528741775-53994a69daeb.webp" />
       <ChatBubble.Message>
         It was you who would bring balance to the Force
       </ChatBubble.Message>
     </ChatBubble>
 
     <ChatBubble>
-      <ChatBubble.Avatar src="https://daisyui.com/images/stock/photo-1534528741775-53994a69daeb.jpg" />
+      <ChatBubble.Avatar src="https://img.daisyui.com/images/stock/photo-1534528741775-53994a69daeb.webp" />
       <ChatBubble.Message>Not leave it in Darkness</ChatBubble.Message>
     </ChatBubble>
   </>
@@ -105,7 +105,7 @@ export const WithHeader: Story<ChatBubbleProps> = (args) => (
       <ChatBubble.Header>
         Obi-Wan Kenobi <ChatBubble.Time>12:45</ChatBubble.Time>
       </ChatBubble.Header>
-      <ChatBubble.Avatar src="https://daisyui.com/images/stock/photo-1534528741775-53994a69daeb.jpg" />
+      <ChatBubble.Avatar src="https://img.daisyui.com/images/stock/photo-1534528741775-53994a69daeb.webp" />
       <ChatBubble.Message>You were the Chosen One!</ChatBubble.Message>
     </ChatBubble>
 
@@ -113,7 +113,7 @@ export const WithHeader: Story<ChatBubbleProps> = (args) => (
       <ChatBubble.Header>
         Anakin <ChatBubble.Time>12:46</ChatBubble.Time>
       </ChatBubble.Header>
-      <ChatBubble.Avatar src="https://daisyui.com/images/stock/photo-1534528741775-53994a69daeb.jpg" />
+      <ChatBubble.Avatar src="https://img.daisyui.com/images/stock/photo-1534528741775-53994a69daeb.webp" />
       <ChatBubble.Message>I hate you!</ChatBubble.Message>
     </ChatBubble>
   </>
@@ -122,13 +122,13 @@ export const WithHeader: Story<ChatBubbleProps> = (args) => (
 export const WithFooter: Story<ChatBubbleProps> = (args) => (
   <>
     <ChatBubble>
-      <ChatBubble.Avatar src="https://daisyui.com/images/stock/photo-1534528741775-53994a69daeb.jpg" />
+      <ChatBubble.Avatar src="https://img.daisyui.com/images/stock/photo-1534528741775-53994a69daeb.webp" />
       <ChatBubble.Message>You were the Chosen One!</ChatBubble.Message>
       <ChatBubble.Footer>Delivered</ChatBubble.Footer>
     </ChatBubble>
 
     <ChatBubble end>
-      <ChatBubble.Avatar src="https://daisyui.com/images/stock/photo-1534528741775-53994a69daeb.jpg" />
+      <ChatBubble.Avatar src="https://img.daisyui.com/images/stock/photo-1534528741775-53994a69daeb.webp" />
       <ChatBubble.Message>I hate you!</ChatBubble.Message>
       <ChatBubble.Footer>Seen at 12:46</ChatBubble.Footer>
     </ChatBubble>
diff --git a/src/ChatBubble/ChatBubble.test.tsx b/src/ChatBubble/ChatBubble.test.tsx
index f6847025..af31f10c 100644
--- a/src/ChatBubble/ChatBubble.test.tsx
+++ b/src/ChatBubble/ChatBubble.test.tsx
@@ -51,7 +51,7 @@ describe('ChatBubble', () => {
   test('Should render ChatBubbleAvatar subcomponent', () => {
     const { getByAltText } = render(
       <ChatBubble.Avatar>
-        <img src="avatar.jpg" alt="Avatar" />
+        <img src="avatar.webp" alt="Avatar" />
       </ChatBubble.Avatar>
     )
     expect(getByAltText('Avatar')).toBeInTheDocument()
diff --git a/src/Diff/Diff.stories.tsx b/src/Diff/Diff.stories.tsx
index 9326fcae..6db2e741 100644
--- a/src/Diff/Diff.stories.tsx
+++ b/src/Diff/Diff.stories.tsx
@@ -19,13 +19,13 @@ export const Default: Story<DiffProps> = ({ secondItem, ...args }) => (
     secondItem={
       <img
         alt="daisy"
-        src="https://daisyui.com/images/stock/photo-1560717789-0ac7c58ac90a-blur.jpg"
+        src="https://img.daisyui.com/images/stock/photo-1560717789-0ac7c58ac90a-blur.webp"
       />
     }
   >
     <img
       alt="daisy"
-      src=" https://daisyui.com/images/stock/photo-1560717789-0ac7c58ac90a.jpg"
+      src=" https://img.daisyui.com/images/stock/photo-1560717789-0ac7c58ac90a.webp"
     />
   </Diff>
 )
diff --git a/src/Hero/Hero.stories.tsx b/src/Hero/Hero.stories.tsx
index 1c51098f..ccf3d9a5 100644
--- a/src/Hero/Hero.stories.tsx
+++ b/src/Hero/Hero.stories.tsx
@@ -40,7 +40,7 @@ export const HeroWithFigure: Story<HeroProps> = (args) => {
     <Hero {...args}>
       <Hero.Content>
         <img
-          src="https://daisyui.com/images/stock/photo-1635805737707-575885ab0820.jpg"
+          src="https://img.daisyui.com/images/stock/photo-1635805737707-575885ab0820.webp"
           className="max-w-sm rounded-lg shadow-2xl"
         />
         <div>
@@ -107,7 +107,7 @@ export const HeroWithOverlayImage: Story<HeroProps> = (args) => {
     <Hero
       style={{
         backgroundImage:
-          'url(https://daisyui.com/images/stock/photo-1507358522600-9f71e620c44e.jpg)',
+          'url(https://img.daisyui.com/images/stock/photo-1507358522600-9f71e620c44e.webp)',
       }}
     >
       <Hero.Overlay {...args} />
diff --git a/src/Indicator/Indicator.stories.tsx b/src/Indicator/Indicator.stories.tsx
index fc6a5b1d..0c399a96 100644
--- a/src/Indicator/Indicator.stories.tsx
+++ b/src/Indicator/Indicator.stories.tsx
@@ -76,7 +76,7 @@ export const ForAvatar: Story<IndicatorItemProps> = (args) => {
       </Badge>
       <Avatar
         shape="square"
-        src="https://daisyui.com/images/stock/photo-1534528741775-53994a69daeb.jpg"
+        src="https://img.daisyui.com/images/stock/photo-1534528741775-53994a69daeb.webp"
       />
     </Indicator>
   )
@@ -119,7 +119,7 @@ export const InCenterOfImage: Story<IndicatorItemProps> = (args) => {
       <Badge color="secondary" className={Indicator.Item.className(args)}>
         Uploading Image...
       </Badge>
-      <img src="https://daisyui.com/images/stock/photo-1606107557195-0e29a4b5b4aa.jpg" />
+      <img src="https://img.daisyui.com/images/stock/photo-1606107557195-0e29a4b5b4aa.webp" />
     </Indicator>
   )
 }
diff --git a/src/Mask/Mask.stories.tsx b/src/Mask/Mask.stories.tsx
index 9bdb0f94..7edd2bc7 100644
--- a/src/Mask/Mask.stories.tsx
+++ b/src/Mask/Mask.stories.tsx
@@ -13,7 +13,7 @@ export const Default: Story<MaskProps> = (args) => {
 }
 
 Default.args = {
-  src: 'https://daisyui.com/images/stock/photo-1567653418876-5bb0e566e1c2.jpg',
+  src: 'https://img.daisyui.com/images/stock/photo-1567653418876-5bb0e566e1c2.webp',
   variant: 'squircle',
 }
 
@@ -21,7 +21,7 @@ export const MaskHeart: Story<MaskProps> = (args) => {
   return <Mask {...args} />
 }
 MaskHeart.args = {
-  src: 'https://daisyui.com/images/stock/photo-1567653418876-5bb0e566e1c2.jpg',
+  src: 'https://img.daisyui.com/images/stock/photo-1567653418876-5bb0e566e1c2.webp',
   variant: 'heart',
 }
 
@@ -29,7 +29,7 @@ export const Hexagon: Story<MaskProps> = (args) => {
   return <Mask {...args} />
 }
 Hexagon.args = {
-  src: 'https://daisyui.com/images/stock/photo-1567653418876-5bb0e566e1c2.jpg',
+  src: 'https://img.daisyui.com/images/stock/photo-1567653418876-5bb0e566e1c2.webp',
   variant: 'hexagon',
 }
 
@@ -37,7 +37,7 @@ export const HexagonTwo: Story<MaskProps> = (args) => {
   return <Mask {...args} />
 }
 HexagonTwo.args = {
-  src: 'https://daisyui.com/images/stock/photo-1567653418876-5bb0e566e1c2.jpg',
+  src: 'https://img.daisyui.com/images/stock/photo-1567653418876-5bb0e566e1c2.webp',
   variant: 'hexagon-2',
 }
 
@@ -45,7 +45,7 @@ export const Decagon: Story<MaskProps> = (args) => {
   return <Mask {...args} />
 }
 Decagon.args = {
-  src: 'https://daisyui.com/images/stock/photo-1567653418876-5bb0e566e1c2.jpg',
+  src: 'https://img.daisyui.com/images/stock/photo-1567653418876-5bb0e566e1c2.webp',
   variant: 'decagon',
 }
 
@@ -53,14 +53,14 @@ export const Pentagon: Story<MaskProps> = (args) => {
   return <Mask {...args} />
 }
 Pentagon.args = {
-  src: 'https://daisyui.com/images/stock/photo-1567653418876-5bb0e566e1c2.jpg',
+  src: 'https://img.daisyui.com/images/stock/photo-1567653418876-5bb0e566e1c2.webp',
   variant: 'pentagon',
 }
 export const Diamond: Story<MaskProps> = (args) => {
   return <Mask {...args} />
 }
 Diamond.args = {
-  src: 'https://daisyui.com/images/stock/photo-1567653418876-5bb0e566e1c2.jpg',
+  src: 'https://img.daisyui.com/images/stock/photo-1567653418876-5bb0e566e1c2.webp',
   variant: 'diamond',
 }
 
@@ -68,77 +68,77 @@ export const Square: Story<MaskProps> = (args) => {
   return <Mask {...args} />
 }
 Square.args = {
-  src: 'https://daisyui.com/images/stock/photo-1567653418876-5bb0e566e1c2.jpg',
+  src: 'https://img.daisyui.com/images/stock/photo-1567653418876-5bb0e566e1c2.webp',
   variant: 'square',
 }
 export const Circle: Story<MaskProps> = (args) => {
   return <Mask {...args} />
 }
 Circle.args = {
-  src: 'https://daisyui.com/images/stock/photo-1567653418876-5bb0e566e1c2.jpg',
+  src: 'https://img.daisyui.com/images/stock/photo-1567653418876-5bb0e566e1c2.webp',
   variant: 'circle',
 }
 export const Parallelogram: Story<MaskProps> = (args) => {
   return <Mask {...args} />
 }
 Parallelogram.args = {
-  src: 'https://daisyui.com/images/stock/photo-1567653418876-5bb0e566e1c2.jpg',
+  src: 'https://img.daisyui.com/images/stock/photo-1567653418876-5bb0e566e1c2.webp',
   variant: 'parallelogram',
 }
 export const ParallelogramTwo: Story<MaskProps> = (args) => {
   return <Mask {...args} />
 }
 ParallelogramTwo.args = {
-  src: 'https://daisyui.com/images/stock/photo-1567653418876-5bb0e566e1c2.jpg',
+  src: 'https://img.daisyui.com/images/stock/photo-1567653418876-5bb0e566e1c2.webp',
   variant: 'parallelogram-2',
 }
 export const ParallelogramThree: Story<MaskProps> = (args) => {
   return <Mask {...args} />
 }
 ParallelogramThree.args = {
-  src: 'https://daisyui.com/images/stock/photo-1567653418876-5bb0e566e1c2.jpg',
+  src: 'https://img.daisyui.com/images/stock/photo-1567653418876-5bb0e566e1c2.webp',
   variant: 'parallelogram-3',
 }
 export const ParallelogramFour: Story<MaskProps> = (args) => {
   return <Mask {...args} />
 }
 ParallelogramFour.args = {
-  src: 'https://daisyui.com/images/stock/photo-1567653418876-5bb0e566e1c2.jpg',
+  src: 'https://img.daisyui.com/images/stock/photo-1567653418876-5bb0e566e1c2.webp',
   variant: 'parallelogram-4',
 }
 export const Star: Story<MaskProps> = (args) => {
   return <Mask {...args} />
 }
 Star.args = {
-  src: 'https://daisyui.com/images/stock/photo-1567653418876-5bb0e566e1c2.jpg',
+  src: 'https://img.daisyui.com/images/stock/photo-1567653418876-5bb0e566e1c2.webp',
   variant: 'star',
 }
 export const StarTwo: Story<MaskProps> = (args) => {
   return <Mask {...args} />
 }
 StarTwo.args = {
-  src: 'https://daisyui.com/images/stock/photo-1567653418876-5bb0e566e1c2.jpg',
+  src: 'https://img.daisyui.com/images/stock/photo-1567653418876-5bb0e566e1c2.webp',
   variant: 'star-2',
 }
 export const Triangle: Story<MaskProps> = (args) => {
   return <Mask {...args} />
 }
 Triangle.args = {
-  src: 'https://daisyui.com/images/stock/photo-1567653418876-5bb0e566e1c2.jpg',
+  src: 'https://img.daisyui.com/images/stock/photo-1567653418876-5bb0e566e1c2.webp',
   variant: 'triangle',
 }
 export const TriangleTwo: Story<MaskProps> = (args) => {
   return <Mask {...args} />
 }
 TriangleTwo.args = {
-  src: 'https://daisyui.com/images/stock/photo-1567653418876-5bb0e566e1c2.jpg',
+  src: 'https://img.daisyui.com/images/stock/photo-1567653418876-5bb0e566e1c2.webp',
   variant: 'triangle-2',
 }
 export const TriangleThree: Story<MaskProps> = (args) => {
   return <Mask {...args} />
 }
 TriangleThree.args = {
-  src: 'https://daisyui.com/images/stock/photo-1567653418876-5bb0e566e1c2.jpg',
+  src: 'https://img.daisyui.com/images/stock/photo-1567653418876-5bb0e566e1c2.webp',
   variant: 'triangle-3',
 }
 
@@ -146,6 +146,6 @@ export const TriangleFour: Story<MaskProps> = (args) => {
   return <Mask {...args} />
 }
 TriangleFour.args = {
-  src: 'https://daisyui.com/images/stock/photo-1567653418876-5bb0e566e1c2.jpg',
+  src: 'https://img.daisyui.com/images/stock/photo-1567653418876-5bb0e566e1c2.webp',
   variant: 'triangle-4',
 }
diff --git a/src/Navbar/Navbar.stories.tsx b/src/Navbar/Navbar.stories.tsx
index b5e9b9d1..199b1fcf 100644
--- a/src/Navbar/Navbar.stories.tsx
+++ b/src/Navbar/Navbar.stories.tsx
@@ -166,7 +166,7 @@ export const SearchInputAndDropdown: Story<NavbarProps> = (args) => {
             shape="circle"
           >
             <div className="w-10 rounded-full">
-              <img src="https://daisyui.com/images/stock/photo-1534528741775-53994a69daeb.jpg" />
+              <img src="https://img.daisyui.com/images/stock/photo-1534528741775-53994a69daeb.webp" />
             </div>
           </Button>
           <Dropdown.Menu className="w-52 menu-sm mt-3 z-[1] p-2">
@@ -240,7 +240,7 @@ export const IconIndicatorAndDropdown: Story<NavbarProps> = (args) => {
             shape="circle"
           >
             <div className="w-10 rounded-full">
-              <img src="https://daisyui.com/images/stock/photo-1534528741775-53994a69daeb.jpg" />
+              <img src="https://img.daisyui.com/images/stock/photo-1534528741775-53994a69daeb.webp" />
             </div>
           </Button>
           <Dropdown.Menu className="mt-3 z-[1] w-52 menu-sm">
diff --git a/src/Stack/Stack.stories.tsx b/src/Stack/Stack.stories.tsx
index 1e464f62..6138e818 100644
--- a/src/Stack/Stack.stories.tsx
+++ b/src/Stack/Stack.stories.tsx
@@ -29,17 +29,17 @@ export const StackedImages: Story<StackProps> = (args) => {
   return (
     <Stack {...args}>
       <img
-        src="https://daisyui.com/images/stock/photo-1559703248-dcaaec9fab78.jpg"
+        src="https://img.daisyui.com/images/stock/photo-1559703248-dcaaec9fab78.webp"
         alt="Image 1"
         className="rounded"
       />
       <img
-        src="https://daisyui.com/images/stock/photo-1565098772267-60af42b81ef2.jpg"
+        src="https://img.daisyui.com/images/stock/photo-1565098772267-60af42b81ef2.webp"
         alt="Image 2"
         className="rounded"
       />
       <img
-        src="https://daisyui.com/images/stock/photo-1572635148818-ef6fd45eb394.jpg"
+        src="https://img.daisyui.com/images/stock/photo-1572635148818-ef6fd45eb394.webp"
         alt="Image 3"
         className="rounded"
       />
diff --git a/src/Stats/Stats.stories.tsx b/src/Stats/Stats.stories.tsx
index 6aee59ff..93e741e4 100644
--- a/src/Stats/Stats.stories.tsx
+++ b/src/Stats/Stats.stories.tsx
@@ -87,7 +87,7 @@ export const IconsOrImage: Story<StatsProps> = (args) => {
           <Avatar
             size="sm"
             online={true}
-            src="https://daisyui.com/images/stock/photo-1534528741775-53994a69daeb.jpg"
+            src="https://img.daisyui.com/images/stock/photo-1534528741775-53994a69daeb.webp"
             shape="circle"
           ></Avatar>
         </Stats.Stat.Figure>
diff --git a/src/Table/Table.stories.tsx b/src/Table/Table.stories.tsx
index 7ccb9f86..2847fdee 100644
--- a/src/Table/Table.stories.tsx
+++ b/src/Table/Table.stories.tsx
@@ -151,7 +151,7 @@ export const WithVisualElements: Story<TableProps> = (args) => {
             <div className="flex items-center space-x-3 truncate">
               <Mask
                 variant="squircle"
-                src="http://daisyui.com/tailwind-css-component-profile-2@56w.png"
+                src="https://img.daisyui.com/images/profile/demo/2@94.webp"
               />
               <div>
                 <div className="font-bold">Hart Hagerty</div>
@@ -176,7 +176,7 @@ export const WithVisualElements: Story<TableProps> = (args) => {
             <div className="flex items-center space-x-3 truncate">
               <Mask
                 variant="squircle"
-                src="http://daisyui.com/tailwind-css-component-profile-3@56w.png"
+                src="https://img.daisyui.com/images/profile/demo/3@94.webp"
               />
               <div>
                 <div className="font-bold">Brice Swyre</div>
@@ -201,7 +201,7 @@ export const WithVisualElements: Story<TableProps> = (args) => {
             <div className="flex items-center space-x-3 truncate">
               <Mask
                 variant="squircle"
-                src="http://daisyui.com/tailwind-css-component-profile-4@56w.png"
+                src="https://img.daisyui.com/images/profile/demo/4@94.webp"
               />
               <div>
                 <div className="font-bold">Marjy Ferencz</div>
@@ -226,7 +226,7 @@ export const WithVisualElements: Story<TableProps> = (args) => {
             <div className="flex items-center space-x-3 truncate">
               <Mask
                 variant="squircle"
-                src="http://daisyui.com/tailwind-css-component-profile-5@56w.png"
+                src="https://img.daisyui.com/images/profile/demo/5@94.webp"
               />
               <div>
                 <div className="font-bold">Yancy Tear</div>