diff --git a/README.md b/README.md
index 831390f..cca8af4 100644
--- a/README.md
+++ b/README.md
@@ -483,6 +483,7 @@ yarn build:debug  # Debug build for development
 2. **Make your changes** with appropriate tests
 3. **Update documentation** if needed
 4. **Run the full test suite**
+3. **Add changeset**. Run `yarn changeset` and update the appropriate packages with proper changelog
 5. **Submit a pull request** with a clear description
 
 
diff --git a/examples/vite-react-ts/src/App.css b/examples/vite-react-ts/src/App.css
index 5b493e3..8a6dc36 100644
--- a/examples/vite-react-ts/src/App.css
+++ b/examples/vite-react-ts/src/App.css
@@ -29,6 +29,16 @@ body {
   position: relative;
   width: 100%;
   height: 100%;
+  border-radius: 10px;
+  overflow: hidden;
+}
+
+.preview-image-container .image-container {
+  display: inline-block;
+  font-size: 0;
+  position: relative;
+  width: 100%;
+  height: 100%;
 }
 
 .preview-image-container img {
@@ -36,7 +46,22 @@ body {
   height: 100%;
   display: block;
   object-fit: cover;
-  border-radius: 10px;
+}
+
+.preview-image-container .placeholder-image {
+  width: 100%;
+}
+
+.preview-image-container .main-image {
+  position: absolute;
+  left: 0;
+  top: 0;
+  opacity: 0;
+  transition: opacity 0.25s ease-in-out;
+}
+
+.preview-image-container .image-container:hover .main-image {
+  opacity: 1;
 }
 
 .loader-container {
@@ -90,7 +115,6 @@ body {
   color: #000;
 }
 
-
 .preview-image-container:hover .image-source {
   display: block;
 }
@@ -106,4 +130,3 @@ body {
   width: 100%;
   min-width: 300px;
 }
-
diff --git a/examples/vite-react-ts/src/components/image.tsx b/examples/vite-react-ts/src/components/image.tsx
index 2dc9868..08aacfd 100644
--- a/examples/vite-react-ts/src/components/image.tsx
+++ b/examples/vite-react-ts/src/components/image.tsx
@@ -1,44 +1,30 @@
-import { useEffect, useState, type ImgHTMLAttributes } from "react";
+import { type ImgHTMLAttributes } from "react";
 
 export const PreviewImage = ({
-  actualSrc,
+  src,
   placeholder,
   imageSource,
   ...props
 }: ImgHTMLAttributes<HTMLImageElement> & {
   placeholder: string;
-  actualSrc: string;
   imageSource?: string;
 }) => {
-  const [loaded, setLoaded] = useState(false);
-  const [hovered, setHovered] = useState(false);
-
-  useEffect(() => {
-    const image = new Image();
-    image.src = actualSrc;
-    image.onload = () => setLoaded(true);
-  }, []);
-
   return (
     <div className="preview-image-container">
-      <img
-        {...props}
-        src={hovered && loaded ? actualSrc : placeholder}
-        onMouseEnter={() => setHovered(true)}
-        onMouseLeave={() => setHovered(false)}
-      />
-      {hovered && !loaded && (
-        <div className="loader-container">
-          <div className="loader"></div>
-        </div>
-      )}
-      {imageSource && (
-        <div className="image-source">
-          <a href={imageSource} target="_blank" rel="noopener noreferrer">
-            Image Source
-          </a>
-        </div>
-      )}
+      <div className="image-container">
+        <img src={placeholder} className="placeholder-image" />
+        <img
+          src={src}
+          {...props}
+          className={["main-image", props.className].join(" ")}
+          loading="lazy"
+        />
+      </div>
+      <div className="image-source">
+        <a href={imageSource} target="_blank" rel="noopener noreferrer">
+          Image Source
+        </a>
+      </div>
     </div>
   );
 };
diff --git a/examples/vite-react-ts/src/components/placeholder-average-color.tsx b/examples/vite-react-ts/src/components/placeholder-average-color.tsx
index 7518263..e38eb21 100644
--- a/examples/vite-react-ts/src/components/placeholder-average-color.tsx
+++ b/examples/vite-react-ts/src/components/placeholder-average-color.tsx
@@ -48,7 +48,7 @@ export const PlaceholderAverageColorType = () => {
           <div className="item" key={image.src}>
             <PreviewImage
               placeholder={image.preview}
-              actualSrc={image.src}
+              src={image.src}
               imageSource={image.source}
             />
           </div>
diff --git a/examples/vite-react-ts/src/components/placeholder-blurred.tsx b/examples/vite-react-ts/src/components/placeholder-blurred.tsx
index 8e5b10a..56499f4 100644
--- a/examples/vite-react-ts/src/components/placeholder-blurred.tsx
+++ b/examples/vite-react-ts/src/components/placeholder-blurred.tsx
@@ -48,7 +48,7 @@ export const PlaceholderBlurredType = () => {
           <div className="item" key={image.src}>
             <PreviewImage
               placeholder={image.preview}
-              actualSrc={image.src}
+              src={image.src}
               imageSource={image.source}
             />
           </div>
diff --git a/examples/vite-react-ts/src/components/placeholder-dominant-color.tsx b/examples/vite-react-ts/src/components/placeholder-dominant-color.tsx
index 32da3bd..ce70cb2 100644
--- a/examples/vite-react-ts/src/components/placeholder-dominant-color.tsx
+++ b/examples/vite-react-ts/src/components/placeholder-dominant-color.tsx
@@ -48,7 +48,7 @@ export const PlaceholderDominantColorType = () => {
           <div className="item" key={image.src}>
             <PreviewImage
               placeholder={image.preview}
-              actualSrc={image.src}
+              src={image.src}
               imageSource={image.source}
             />
           </div>
diff --git a/examples/vite-react-ts/src/components/placeholder-grayscale.tsx b/examples/vite-react-ts/src/components/placeholder-grayscale.tsx
index 829330c..00d2bf1 100644
--- a/examples/vite-react-ts/src/components/placeholder-grayscale.tsx
+++ b/examples/vite-react-ts/src/components/placeholder-grayscale.tsx
@@ -47,7 +47,7 @@ export const PlaceholderGrayscaleType = () => {
           <div className="item" key={image.src}>
             <PreviewImage
               placeholder={image.preview}
-              actualSrc={image.src}
+              src={image.src}
               imageSource={image.source}
             />
           </div>
diff --git a/examples/vite-react-ts/src/components/placeholder-no-svg-wrap.tsx b/examples/vite-react-ts/src/components/placeholder-no-svg-wrap.tsx
index b5a7570..c4b738a 100644
--- a/examples/vite-react-ts/src/components/placeholder-no-svg-wrap.tsx
+++ b/examples/vite-react-ts/src/components/placeholder-no-svg-wrap.tsx
@@ -51,7 +51,7 @@ export const PlaceholderNoSvgWrap = () => {
           <div className="item" key={image.src}>
             <PreviewImage
               placeholder={image.preview}
-              actualSrc={image.src}
+              src={image.src}
               imageSource={image.source}
             />
           </div>
diff --git a/examples/vite-react-ts/src/components/placeholder-normal.tsx b/examples/vite-react-ts/src/components/placeholder-normal.tsx
index 4a905f9..4cd6ebb 100644
--- a/examples/vite-react-ts/src/components/placeholder-normal.tsx
+++ b/examples/vite-react-ts/src/components/placeholder-normal.tsx
@@ -34,7 +34,7 @@ export const PlaceholderNormalType = () => {
           <div className="item" key={image.src}>
             <PreviewImage
               placeholder={image.preview}
-              actualSrc={image.src}
+              src={image.src}
               imageSource={image.source}
             />
           </div>