diff --git a/demo/partials/avatar.html b/demo/partials/avatar.html
index f377f70..7a429bc 100644
--- a/demo/partials/avatar.html
+++ b/demo/partials/avatar.html
@@ -19,7 +19,7 @@
 
   <h3>Image</h3>
   <div class="cluster">
-    <img class="avatar avatar-md" src="/assets/avatar-placeholder.png" alt="User avatar">
+    <img class="avatar avatar-md" src="/assets/avatar-placeholder.jpg" alt="User avatar">
   </div>
 
   <h3>Icon avatar</h3>
@@ -47,7 +47,7 @@
         <div class="cluster">
           <gn-avatar initials="JD" size="md" variant="mint" status="online"></gn-avatar>
           <gn-avatar icon="ph-user" size="md" variant="neutral"></gn-avatar>
-          <gn-avatar src="/assets/avatar-placeholder.png" alt="User" size="md"></gn-avatar>
+          <gn-avatar src="/assets/avatar-placeholder.jpg" alt="User" size="md"></gn-avatar>
         </div>
       `
     }).mount("#vue-avatar-app");
diff --git a/demo/partials/cards.html b/demo/partials/cards.html
index 3f8ec96..a048ae3 100644
--- a/demo/partials/cards.html
+++ b/demo/partials/cards.html
@@ -120,7 +120,7 @@
   <div class="demo-row" style="align-items: stretch;">
     <article class="card card-horizontal" style="max-width: 640px;">
       <div class="card-media">
-        <img src="/assets/avatar-placeholder.png" alt="">
+        <img src="/assets/avatar-placeholder.jpg" alt="">
       </div>
       <div class="card-body">
         <h3 class="card-title"><a href="#">Project Alpha</a></h3>
@@ -172,7 +172,7 @@
         <a class="profile-identity" href="#" target="_blank" rel="noopener noreferrer">
           <span class="identity">
             <span class="avatar avatar-mint avatar-sm is-online">
-              <img src="/assets/avatar-placeholder.png" alt="">
+              <img src="/assets/avatar-placeholder.jpg" alt="">
             </span>
             <span class="identity-content">
               <span class="identity-title">Eugene Sukhodolskiy</span>
@@ -194,7 +194,7 @@
       <div class="user-card-body">
         <span class="identity">
           <span class="avatar avatar-mint avatar-md is-online">
-            <img src="/assets/avatar-placeholder.png" alt="">
+            <img src="/assets/avatar-placeholder.jpg" alt="">
           </span>
           <span class="identity-content">
             <span class="identity-title">Eugene Sukhodolskiy</span>
@@ -267,7 +267,7 @@
       },
       template: `
         <div class="demo-row" style="align-items: stretch; flex-wrap: wrap;">
-          <gn-horizontal-card image="/assets/avatar-placeholder.png" title="Project Alpha" title-href="#project" icon="ph-arrow-right" style="max-width: 640px;">
+          <gn-horizontal-card image="/assets/avatar-placeholder.jpg" title="Project Alpha" title-href="#project" icon="ph-arrow-right" style="max-width: 640px;">
             <p>Compact horizontal layout for content listings.</p>
             <template #footer>
               <span>Updated 2h ago</span>
@@ -283,7 +283,7 @@
             name="Eugene Sukhodolskiy"
             email="goldmikki@gmail.com"
             role="Lead Frontend Engineer"
-            :avatar="{ src: '/assets/avatar-placeholder.png', status: 'online', size: 'md', variant: 'mint' }"
+            :avatar="{ src: '/assets/avatar-placeholder.jpg', status: 'online', size: 'md', variant: 'mint' }"
             href="#profile"
             :actions="[
               { icon: 'ph-user', label: 'View profile', variant: 'primary' },
diff --git a/demo/partials/navigation-shell.html b/demo/partials/navigation-shell.html
index db9ffd9..8b4f5d9 100644
--- a/demo/partials/navigation-shell.html
+++ b/demo/partials/navigation-shell.html
@@ -53,7 +53,7 @@
               <gn-identity
                 title="Eugene Sukhodolskiy"
                 meta="goldmikki@gmail.com"
-                :avatar="{ src: '/assets/avatar-placeholder.png', status: 'online', size: 'sm', variant: 'mint' }"
+                :avatar="{ src: '/assets/avatar-placeholder.jpg', status: 'online', size: 'sm', variant: 'mint' }"
               />
             </a>
             <gn-icon-button icon="ph-pencil-simple" label="Edit profile" variant="secondary" size="sm" />