diff --git a/workspaces/website/public/scott-nath-profile-photo-large.jpeg b/workspaces/website/public/scott-nath-profile-photo-large.jpeg
new file mode 100644
index 0000000..9fdf22c
Binary files /dev/null and b/workspaces/website/public/scott-nath-profile-photo-large.jpeg differ
diff --git a/workspaces/website/public/scott-nath-profile-photo.avif b/workspaces/website/public/scott-nath-profile-photo.avif
new file mode 100644
index 0000000..7fde7ff
Binary files /dev/null and b/workspaces/website/public/scott-nath-profile-photo.avif differ
diff --git a/workspaces/website/public/scott-nath-profile-photo.jpg b/workspaces/website/public/scott-nath-profile-photo.jpg
index 9fdf22c..eed3869 100644
Binary files a/workspaces/website/public/scott-nath-profile-photo.jpg and b/workspaces/website/public/scott-nath-profile-photo.jpg differ
diff --git a/workspaces/website/src/components/BaseHead.astro b/workspaces/website/src/components/BaseHead.astro
index c650b67..8fb2b4d 100644
--- a/workspaces/website/src/components/BaseHead.astro
+++ b/workspaces/website/src/components/BaseHead.astro
@@ -3,6 +3,7 @@
 // all pages through the use of the <BaseHead /> component.
 import '../styles/global.css';
 import '../components/resume/styles/resume.css';
+import { PROFILE_PIC } from '../consts';
 
 export interface Props {
 	title: string;
@@ -12,10 +13,10 @@ export interface Props {
 
 const canonicalURL = new URL(Astro.url.pathname, Astro.site);
 
-const { title, description, image = '/scott-nath-profile-pic.jpeg' } = Astro.props;
+const { title, description, image = PROFILE_PIC } = Astro.props;
 ---
 <script defer data-domain="scottnath.com" src="https://plausible.io/js/script.js" type="text/partytown"></script>
-<script type="text/partytown" defer data-domain="scottnath.com" src="https://plausible.io/js/script.outbound-links.js"></script>
+<script defer data-domain="scottnath.com" src="https://plausible.io/js/script.outbound-links.js" type="text/partytown"></script>
 
 
 
@@ -24,7 +25,7 @@ const { title, description, image = '/scott-nath-profile-pic.jpeg' } = Astro.pro
 <meta name="viewport" content="width=device-width,initial-scale=1" />
 <link rel="icon" href="/favicon-mind-blown.ico" id="favicon" />
 <meta name="generator" content={Astro.generator} />
-<link rel="preload" as="image" href="/scott-nath-profile-pic.jpeg" />
+<link rel="preload" as="image" href={image} />
 
 <!-- Canonical URL -->
 <link rel="canonical" href={canonicalURL} />
diff --git a/workspaces/website/src/components/DevToUser.astro b/workspaces/website/src/components/DevToUser.astro
index 4ea8159..66644c4 100644
--- a/workspaces/website/src/components/DevToUser.astro
+++ b/workspaces/website/src/components/DevToUser.astro
@@ -1,10 +1,11 @@
 ---
 import {dsd} from 'profile-components/devto-utils';
-import profilePic from '~/assets/scott-nath-profile-photo.jpeg';
+
+import { PROFILE_PIC } from '../consts';
 
 const declaredDOM = dsd({
   username: 'scottnath',
-  profile_image: profilePic.src,
+  profile_image: PROFILE_PIC,
 },true);
 ---
 
diff --git a/workspaces/website/src/components/GitHubUser.astro b/workspaces/website/src/components/GitHubUser.astro
index 32b0e1c..923ba19 100644
--- a/workspaces/website/src/components/GitHubUser.astro
+++ b/workspaces/website/src/components/GitHubUser.astro
@@ -1,11 +1,11 @@
 ---
 import {dsd} from 'profile-components/github-utils';
-import profilePic from '~/assets/scott-nath-profile-photo.jpeg';
+import { PROFILE_PIC } from '../consts';
 
 const repos = JSON.stringify(['scottnath/profile-components', 'storydocker/storydocker']);
 const declaredDOM = await dsd({
   login: 'scottnath',
-  avatar_url: profilePic.src,
+  avatar_url: PROFILE_PIC,
   repos
 },true)
 
diff --git a/workspaces/website/src/components/Header.astro b/workspaces/website/src/components/Header.astro
index 2dcef35..ba4f862 100644
--- a/workspaces/website/src/components/Header.astro
+++ b/workspaces/website/src/components/Header.astro
@@ -1,8 +1,7 @@
 ---
 import DopeStripes from './DopeStripes.astro';
 import HeaderLink from './HeaderLink.astro';
-import { SITE_TITLE, SITE_SUBTITLE } from '../consts';
-import profilePic from '~/assets/scott-nath-profile-photo.jpeg';
+import { SITE_TITLE, SITE_SUBTITLE, PROFILE_PIC } from '../consts';
 import devLogo from '~/assets/logos/dev.svg';
 import githubLogo from '~/assets/logos/github-inverse.svg';
 import linkedinLogo from '~/assets/logos/linkedin.svg';
@@ -17,7 +16,7 @@ import mastodonLogo from '~/assets/logos/Mastodon.svg';
       {SITE_TITLE}
     </h2>
     <h3>{SITE_SUBTITLE}</h3>
-    <img src={profilePic.src} alt="Scott Nath picture" width="400" height="400" class="avatar" />
+    <img src={PROFILE_PIC} alt="Scott Nath picture" width="400" height="400" class="avatar" />
     <nav>
       <HeaderLink href="/">Home</HeaderLink>
       <HeaderLink href="/blahg">Blahg</HeaderLink>
diff --git a/workspaces/website/src/consts.ts b/workspaces/website/src/consts.ts
index 982dedf..60f38c0 100644
--- a/workspaces/website/src/consts.ts
+++ b/workspaces/website/src/consts.ts
@@ -4,6 +4,8 @@
 export const SITE_TITLE = 'Scott Nath';
 export const SITE_SUBTITLE = 'Front-end architect';
 export const SITE_DESCRIPTION = `${SITE_SUBTITLE}, full-stack software engineer, and developer advocate. Extensive experience creating UI development systems with a focus on where developers and designers collaborate.`;
+// image must be in root of public folder
+export const PROFILE_PIC = '/scott-nath-profile-photo.avif';
 
 export const RESUME_DEFUALTS = {
   name: SITE_TITLE,