use next/image for profile images

src/components/ProfileMenu.tsx

@@ -4,6 +4,8 @@ import { signOut, useSession } from "next-auth/react";
 import { useRouter } from "next/router";
 import { api } from "~/utils/api";
 import { usePostHog } from "posthog-js/react";
+import defaultProfileIcon from "~/assets/default profile icon.jpg";
+import Image from "next/image";
 
 export default function ProfileMenu() {
   const { mutateAsync: createBillingPortalSession } =
@@ -28,10 +30,13 @@ export default function ProfileMenu() {
     <Menu as="div" className="relative inline-block text-left">
       <Menu.Button className="flex rounded-full bg-gray-800 text-sm focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-gray-800">
         <span className="sr-only">Open user menu</span>
-        <img
+        <Image
           className="h-8 w-8 rounded-full"
-          src={session?.user?.image ?? "https://i.stack.imgur.com/dr5qp.jpg"}
-          alt=""
+          src={session?.user?.image ?? defaultProfileIcon}
+          alt="profile icon"
+          width={32}
+          height={32}
+          unoptimized
         />
       </Menu.Button>
       <Transition

src/pages/share/[videoId].tsx

@@ -15,6 +15,7 @@ import { usePostHog } from "posthog-js/react";
 import { useAtom } from "jotai";
 import recordVideoModalOpen from "~/atoms/recordVideoModalOpen";
 import VideoRecordModal from "~/components/VideoRecordModal";
+import defaultProfileIcon from "~/assets/default profile icon.jpg";
 
 const VideoList: NextPage = () => {
   const router = useRouter();
@@ -175,13 +176,12 @@ const VideoList: NextPage = () => {
               {!isLoading ? (
                 <>
                   <div className="h-10 w-10 overflow-hidden rounded-full">
-                    <img
-                      className="h-[40px] w-[40px]"
-                      src={
-                        video.user.image ??
-                        "https://i.stack.imgur.com/dr5qp.jpg"
-                      }
-                      alt="profile photo"
+                    <Image
+                      src={video.user.image ?? defaultProfileIcon}
+                      alt="profile icon"
+                      width={40}
+                      height={40}
+                      unoptimized
                     />
                   </div>
                   <span className="ml-3 font-medium">{video.user.name}</span>