diff --git a/.gitignore b/.gitignore
index 067a097..e6b2b3a 100644
--- a/.gitignore
+++ b/.gitignore
@@ -50,6 +50,9 @@ npm-cache/
 # Marketing book cover (raster; see docs/guides/static-assets.md)
 !public/assets/marketing/community-rules-cover.png
 
+# Header Create-rule portraits
+!public/assets/marketing/avatar-*.png
+
 # Open Graph 1200×630 share images (`npm run generate:og-images`)
 !public/assets/marketing/og-image.png
 !public/assets/marketing/og-image-templates.png
diff --git a/app/layout.tsx b/app/layout.tsx
index 3e78027..7fdbd2d 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -123,19 +123,19 @@ export default function RootLayout({ children }: { children: ReactNode }) {
           rel="preload"
           as="image"
           href={getAssetPath(ASSETS.AVATAR_1)}
-          type="image/svg+xml"
+          type="image/png"
         />
         <link
           rel="preload"
           as="image"
           href={getAssetPath(ASSETS.AVATAR_2)}
-          type="image/svg+xml"
+          type="image/png"
         />
         <link
           rel="preload"
           as="image"
           href={getAssetPath(ASSETS.AVATAR_3)}
-          type="image/svg+xml"
+          type="image/png"
         />
       </head>
       <body
diff --git a/docs/guides/static-assets.md b/docs/guides/static-assets.md
index 5af6730..dfb9dff 100644
--- a/docs/guides/static-assets.md
+++ b/docs/guides/static-assets.md
@@ -65,7 +65,7 @@ stage. Raster → SVG conversion is tracked in
 | `marketing/feature-*.svg` (×4) | Mini cards | Panel art (`support`, `exercises`, `guidance`, `tools`) |
 | `icons/icon-{git-branch,arrow-left-right,door-open,message-square-share}.svg` | FeatureGrid | Card glyphs from Figma Section/Feature-Grid (18632:10668) |
 | `marketing/section-number-*.svg` (×3) | SectionNumber | **Done** — SVG |
-| `marketing/avatar-*.svg` (×3) | Avatar / ASSETS | **Done** — SVG |
+| `marketing/avatar-*.png` (×3) | Avatar / ASSETS | **Done** — PNG portraits (not SVG wrappers) |
 | `marketing/hero-image.png` | HeroBanner | **Design review** — likely keep raster |
 | `marketing/og-image.png` | Default `og:image` / `twitter:image` | **Done** — 1200×630 hero crop (`ASSETS.OG_IMAGE`; `npm run generate:og-images`) |
 | `marketing/og-image-templates.png` | Templates `og:image` | **Done** — 1200×630 (`ASSETS.OG_IMAGE_TEMPLATES`) |
diff --git a/lib/assetUtils.ts b/lib/assetUtils.ts
index 0a4425c..5e28dc5 100644
--- a/lib/assetUtils.ts
+++ b/lib/assetUtils.ts
@@ -228,9 +228,9 @@ export const ASSETS = {
   LOGO: "assets/logos/community-rule.svg",
 
   // Avatars
-  AVATAR_1: "assets/marketing/avatar-1.svg",
-  AVATAR_2: "assets/marketing/avatar-2.svg",
-  AVATAR_3: "assets/marketing/avatar-3.svg",
+  AVATAR_1: "assets/marketing/avatar-1.png",
+  AVATAR_2: "assets/marketing/avatar-2.png",
+  AVATAR_3: "assets/marketing/avatar-3.png",
 
   // Social media
   BLUESKY_LOGO: "assets/logos/bluesky.svg",
diff --git a/public/assets/marketing/avatar-1.png b/public/assets/marketing/avatar-1.png
new file mode 100644
index 0000000..fabb281
Binary files /dev/null and b/public/assets/marketing/avatar-1.png differ
diff --git a/public/assets/marketing/avatar-1.svg b/public/assets/marketing/avatar-1.svg
deleted file mode 100644
index 4bfbd40..0000000
--- a/public/assets/marketing/avatar-1.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="32" height="32" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-<image width="64" height="64" href="data:image/png;base64,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"/>
-</svg>
diff --git a/public/assets/marketing/avatar-2.png b/public/assets/marketing/avatar-2.png
new file mode 100644
index 0000000..9100a69
Binary files /dev/null and b/public/assets/marketing/avatar-2.png differ
diff --git a/public/assets/marketing/avatar-2.svg b/public/assets/marketing/avatar-2.svg
deleted file mode 100644
index fc41405..0000000
--- a/public/assets/marketing/avatar-2.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="32" height="32" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-<image width="64" height="64" href="data:image/png;base64,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"/>
-</svg>
diff --git a/public/assets/marketing/avatar-3.png b/public/assets/marketing/avatar-3.png
new file mode 100644
index 0000000..026635a
Binary files /dev/null and b/public/assets/marketing/avatar-3.png differ
diff --git a/public/assets/marketing/avatar-3.svg b/public/assets/marketing/avatar-3.svg
deleted file mode 100644
index b019939..0000000
--- a/public/assets/marketing/avatar-3.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="32" height="32" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-<image width="64" height="64" href="data:image/png;base64,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"/>
-</svg>
diff --git a/stories/asset/Avatar.stories.js b/stories/asset/Avatar.stories.js
index 2c5a09c..f7d7491 100644
--- a/stories/asset/Avatar.stories.js
+++ b/stories/asset/Avatar.stories.js
@@ -55,7 +55,7 @@ export default {
 
 export const Default = {
   args: {
-    src: "assets/marketing/avatar-1.svg",
+    src: "assets/marketing/avatar-1.png",
     alt: "User Avatar",
     size: "medium",
   },
@@ -63,7 +63,7 @@ export const Default = {
 
 export const Sizes = {
   args: {
-    src: "assets/marketing/avatar-1.svg",
+    src: "assets/marketing/avatar-1.png",
     alt: "User Avatar",
   },
   render: (args) => (
@@ -146,9 +146,9 @@ export const DifferentAvatars = {
   render: (args) => (
     <div className="space-y-4">
       <div className="space-x-4">
-        <Avatar {...args} src="assets/marketing/avatar-1.svg" alt="User 1" />
-        <Avatar {...args} src="assets/marketing/avatar-2.svg" alt="User 2" />
-        <Avatar {...args} src="assets/marketing/avatar-3.svg" alt="User 3" />
+        <Avatar {...args} src="assets/marketing/avatar-1.png" alt="User 1" />
+        <Avatar {...args} src="assets/marketing/avatar-2.png" alt="User 2" />
+        <Avatar {...args} src="assets/marketing/avatar-3.png" alt="User 3" />
       </div>
     </div>
   ),
@@ -168,36 +168,36 @@ export const AllSizesWithDifferentAvatars = {
       <div>
         <h3 className="text-white font-semibold mb-3">Small Size</h3>
         <div className="space-x-4">
-          <Avatar size="small" src="assets/marketing/avatar-1.svg" alt="User 1" />
-          <Avatar size="small" src="assets/marketing/avatar-2.svg" alt="User 2" />
-          <Avatar size="small" src="assets/marketing/avatar-3.svg" alt="User 3" />
+          <Avatar size="small" src="assets/marketing/avatar-1.png" alt="User 1" />
+          <Avatar size="small" src="assets/marketing/avatar-2.png" alt="User 2" />
+          <Avatar size="small" src="assets/marketing/avatar-3.png" alt="User 3" />
         </div>
       </div>
 
       <div>
         <h3 className="text-white font-semibold mb-3">Medium Size</h3>
         <div className="space-x-4">
-          <Avatar size="medium" src="assets/marketing/avatar-1.svg" alt="User 1" />
-          <Avatar size="medium" src="assets/marketing/avatar-2.svg" alt="User 2" />
-          <Avatar size="medium" src="assets/marketing/avatar-3.svg" alt="User 3" />
+          <Avatar size="medium" src="assets/marketing/avatar-1.png" alt="User 1" />
+          <Avatar size="medium" src="assets/marketing/avatar-2.png" alt="User 2" />
+          <Avatar size="medium" src="assets/marketing/avatar-3.png" alt="User 3" />
         </div>
       </div>
 
       <div>
         <h3 className="text-white font-semibold mb-3">Large Size</h3>
         <div className="space-x-4">
-          <Avatar size="large" src="assets/marketing/avatar-1.svg" alt="User 1" />
-          <Avatar size="large" src="assets/marketing/avatar-2.svg" alt="User 2" />
-          <Avatar size="large" src="assets/marketing/avatar-3.svg" alt="User 3" />
+          <Avatar size="large" src="assets/marketing/avatar-1.png" alt="User 1" />
+          <Avatar size="large" src="assets/marketing/avatar-2.png" alt="User 2" />
+          <Avatar size="large" src="assets/marketing/avatar-3.png" alt="User 3" />
         </div>
       </div>
 
       <div>
         <h3 className="text-white font-semibold mb-3">XLarge Size</h3>
         <div className="space-x-4">
-          <Avatar size="xlarge" src="assets/marketing/avatar-1.svg" alt="User 1" />
-          <Avatar size="xlarge" src="assets/marketing/avatar-2.svg" alt="User 2" />
-          <Avatar size="xlarge" src="assets/marketing/avatar-3.svg" alt="User 3" />
+          <Avatar size="xlarge" src="assets/marketing/avatar-1.png" alt="User 1" />
+          <Avatar size="xlarge" src="assets/marketing/avatar-2.png" alt="User 2" />
+          <Avatar size="xlarge" src="assets/marketing/avatar-3.png" alt="User 3" />
         </div>
       </div>
     </div>
diff --git a/stories/asset/AvatarContainer.stories.js b/stories/asset/AvatarContainer.stories.js
index 2ab7cab..3c48851 100644
--- a/stories/asset/AvatarContainer.stories.js
+++ b/stories/asset/AvatarContainer.stories.js
@@ -33,9 +33,9 @@ export const Default = {
   },
   render: (args) => (
     <AvatarContainer {...args}>
-      <Avatar size={args.size} src="assets/marketing/avatar-1.svg" alt="User 1" />
-      <Avatar size={args.size} src="assets/marketing/avatar-2.svg" alt="User 2" />
-      <Avatar size={args.size} src="assets/marketing/avatar-3.svg" alt="User 3" />
+      <Avatar size={args.size} src="assets/marketing/avatar-1.png" alt="User 1" />
+      <Avatar size={args.size} src="assets/marketing/avatar-2.png" alt="User 2" />
+      <Avatar size={args.size} src="assets/marketing/avatar-3.png" alt="User 3" />
     </AvatarContainer>
   ),
 };
@@ -47,36 +47,36 @@ export const Sizes = {
       <div>
         <h3 className="text-white font-semibold mb-3">Small Size</h3>
         <AvatarContainer size="small">
-          <Avatar size="small" src="assets/marketing/avatar-1.svg" alt="User 1" />
-          <Avatar size="small" src="assets/marketing/avatar-2.svg" alt="User 2" />
-          <Avatar size="small" src="assets/marketing/avatar-3.svg" alt="User 3" />
+          <Avatar size="small" src="assets/marketing/avatar-1.png" alt="User 1" />
+          <Avatar size="small" src="assets/marketing/avatar-2.png" alt="User 2" />
+          <Avatar size="small" src="assets/marketing/avatar-3.png" alt="User 3" />
         </AvatarContainer>
       </div>
 
       <div>
         <h3 className="text-white font-semibold mb-3">Medium Size</h3>
         <AvatarContainer size="medium">
-          <Avatar size="medium" src="assets/marketing/avatar-1.svg" alt="User 1" />
-          <Avatar size="medium" src="assets/marketing/avatar-2.svg" alt="User 2" />
-          <Avatar size="medium" src="assets/marketing/avatar-3.svg" alt="User 3" />
+          <Avatar size="medium" src="assets/marketing/avatar-1.png" alt="User 1" />
+          <Avatar size="medium" src="assets/marketing/avatar-2.png" alt="User 2" />
+          <Avatar size="medium" src="assets/marketing/avatar-3.png" alt="User 3" />
         </AvatarContainer>
       </div>
 
       <div>
         <h3 className="text-white font-semibold mb-3">Large Size</h3>
         <AvatarContainer size="large">
-          <Avatar size="large" src="assets/marketing/avatar-1.svg" alt="User 1" />
-          <Avatar size="large" src="assets/marketing/avatar-2.svg" alt="User 2" />
-          <Avatar size="large" src="assets/marketing/avatar-3.svg" alt="User 3" />
+          <Avatar size="large" src="assets/marketing/avatar-1.png" alt="User 1" />
+          <Avatar size="large" src="assets/marketing/avatar-2.png" alt="User 2" />
+          <Avatar size="large" src="assets/marketing/avatar-3.png" alt="User 3" />
         </AvatarContainer>
       </div>
 
       <div>
         <h3 className="text-white font-semibold mb-3">XLarge Size</h3>
         <AvatarContainer size="xlarge">
-          <Avatar size="xlarge" src="assets/marketing/avatar-1.svg" alt="User 1" />
-          <Avatar size="xlarge" src="assets/marketing/avatar-2.svg" alt="User 2" />
-          <Avatar size="xlarge" src="assets/marketing/avatar-3.svg" alt="User 3" />
+          <Avatar size="xlarge" src="assets/marketing/avatar-1.png" alt="User 1" />
+          <Avatar size="xlarge" src="assets/marketing/avatar-2.png" alt="User 2" />
+          <Avatar size="xlarge" src="assets/marketing/avatar-3.png" alt="User 3" />
         </AvatarContainer>
       </div>
     </div>
@@ -98,38 +98,38 @@ export const DifferentGroupSizes = {
       <div>
         <h3 className="text-white font-semibold mb-3">2 Users</h3>
         <AvatarContainer size="large">
-          <Avatar size="large" src="assets/marketing/avatar-1.svg" alt="User 1" />
-          <Avatar size="large" src="assets/marketing/avatar-2.svg" alt="User 2" />
+          <Avatar size="large" src="assets/marketing/avatar-1.png" alt="User 1" />
+          <Avatar size="large" src="assets/marketing/avatar-2.png" alt="User 2" />
         </AvatarContainer>
       </div>
 
       <div>
         <h3 className="text-white font-semibold mb-3">3 Users</h3>
         <AvatarContainer size="large">
-          <Avatar size="large" src="assets/marketing/avatar-1.svg" alt="User 1" />
-          <Avatar size="large" src="assets/marketing/avatar-2.svg" alt="User 2" />
-          <Avatar size="large" src="assets/marketing/avatar-3.svg" alt="User 3" />
+          <Avatar size="large" src="assets/marketing/avatar-1.png" alt="User 1" />
+          <Avatar size="large" src="assets/marketing/avatar-2.png" alt="User 2" />
+          <Avatar size="large" src="assets/marketing/avatar-3.png" alt="User 3" />
         </AvatarContainer>
       </div>
 
       <div>
         <h3 className="text-white font-semibold mb-3">4 Users</h3>
         <AvatarContainer size="large">
-          <Avatar size="large" src="assets/marketing/avatar-1.svg" alt="User 1" />
-          <Avatar size="large" src="assets/marketing/avatar-2.svg" alt="User 2" />
-          <Avatar size="large" src="assets/marketing/avatar-3.svg" alt="User 3" />
-          <Avatar size="large" src="assets/marketing/avatar-1.svg" alt="User 4" />
+          <Avatar size="large" src="assets/marketing/avatar-1.png" alt="User 1" />
+          <Avatar size="large" src="assets/marketing/avatar-2.png" alt="User 2" />
+          <Avatar size="large" src="assets/marketing/avatar-3.png" alt="User 3" />
+          <Avatar size="large" src="assets/marketing/avatar-1.png" alt="User 4" />
         </AvatarContainer>
       </div>
 
       <div>
         <h3 className="text-white font-semibold mb-3">5 Users</h3>
         <AvatarContainer size="large">
-          <Avatar size="large" src="assets/marketing/avatar-1.svg" alt="User 1" />
-          <Avatar size="large" src="assets/marketing/avatar-2.svg" alt="User 2" />
-          <Avatar size="large" src="assets/marketing/avatar-3.svg" alt="User 3" />
-          <Avatar size="large" src="assets/marketing/avatar-1.svg" alt="User 4" />
-          <Avatar size="large" src="assets/marketing/avatar-2.svg" alt="User 5" />
+          <Avatar size="large" src="assets/marketing/avatar-1.png" alt="User 1" />
+          <Avatar size="large" src="assets/marketing/avatar-2.png" alt="User 2" />
+          <Avatar size="large" src="assets/marketing/avatar-3.png" alt="User 3" />
+          <Avatar size="large" src="assets/marketing/avatar-1.png" alt="User 4" />
+          <Avatar size="large" src="assets/marketing/avatar-2.png" alt="User 5" />
         </AvatarContainer>
       </div>
     </div>
@@ -158,9 +158,9 @@ export const InContext = {
             <h3 className="text-white font-semibold mb-4">Team Members</h3>
             <div className="flex items-center space-x-4">
               <AvatarContainer size="medium">
-                <Avatar size="medium" src="assets/marketing/avatar-1.svg" alt="User 1" />
-                <Avatar size="medium" src="assets/marketing/avatar-2.svg" alt="User 2" />
-                <Avatar size="medium" src="assets/marketing/avatar-3.svg" alt="User 3" />
+                <Avatar size="medium" src="assets/marketing/avatar-1.png" alt="User 1" />
+                <Avatar size="medium" src="assets/marketing/avatar-2.png" alt="User 2" />
+                <Avatar size="medium" src="assets/marketing/avatar-3.png" alt="User 3" />
               </AvatarContainer>
               <span className="text-white">3 team members</span>
             </div>
@@ -172,10 +172,10 @@ export const InContext = {
             </h3>
             <div className="flex items-center space-x-4">
               <AvatarContainer size="large">
-                <Avatar size="large" src="assets/marketing/avatar-1.svg" alt="User 1" />
-                <Avatar size="large" src="assets/marketing/avatar-2.svg" alt="User 2" />
-                <Avatar size="large" src="assets/marketing/avatar-3.svg" alt="User 3" />
-                <Avatar size="large" src="assets/marketing/avatar-1.svg" alt="User 4" />
+                <Avatar size="large" src="assets/marketing/avatar-1.png" alt="User 1" />
+                <Avatar size="large" src="assets/marketing/avatar-2.png" alt="User 2" />
+                <Avatar size="large" src="assets/marketing/avatar-3.png" alt="User 3" />
+                <Avatar size="large" src="assets/marketing/avatar-1.png" alt="User 4" />
               </AvatarContainer>
               <span className="text-white">4 contributors</span>
             </div>
@@ -185,8 +185,8 @@ export const InContext = {
             <h3 className="text-white font-semibold mb-4">Small Team</h3>
             <div className="flex items-center space-x-4">
               <AvatarContainer size="small">
-                <Avatar size="small" src="assets/marketing/avatar-1.svg" alt="User 1" />
-                <Avatar size="small" src="assets/marketing/avatar-2.svg" alt="User 2" />
+                <Avatar size="small" src="assets/marketing/avatar-1.png" alt="User 1" />
+                <Avatar size="small" src="assets/marketing/avatar-2.png" alt="User 2" />
               </AvatarContainer>
               <span className="text-white">2 members</span>
             </div>
diff --git a/tests/components/Avatar.test.tsx b/tests/components/Avatar.test.tsx
index 733c0cc..54b9b09 100644
--- a/tests/components/Avatar.test.tsx
+++ b/tests/components/Avatar.test.tsx
@@ -15,7 +15,7 @@ import {
 type AvatarProps = React.ComponentProps<typeof Avatar>;
 
 const baseProps: AvatarProps = {
-  src: "/assets/marketing/avatar-1.svg",
+  src: "/assets/marketing/avatar-1.png",
   alt: "User avatar",
   size: "medium",
 };
@@ -46,7 +46,7 @@ describe("Avatar (behavioral tests)", () => {
   it("does not show initials while the image is loading", () => {
     render(
       <Avatar
-        src="/assets/marketing/avatar-1.svg"
+        src="/assets/marketing/avatar-1.png"
         alt="Ada Lovelace"
         initials="AL"
       />,
@@ -57,7 +57,7 @@ describe("Avatar (behavioral tests)", () => {
   it("applies the small photo ring after the image loads", () => {
     const { container } = render(
       <Avatar
-        src="/assets/marketing/avatar-1.svg"
+        src="/assets/marketing/avatar-1.png"
         alt="User avatar"
         size="small"
       />,