Image optimization

Author: max-lt

apps/web/src/components/author-card-full.tsx

@@ -9,6 +9,7 @@ import { formatNameForURL } from '#src/utils/string.js';
 import DonateLightning from '../assets/icons/tips-icon.svg';
 import { useDisclosure } from '../hooks/index.ts';
 
+import { Image } from './image.tsx';
 import { SocialLinks, TopicTags } from './professor-card.tsx';
 import { TipModal } from './tip-modal.tsx';
 
@@ -46,7 +47,10 @@ export const AuthorCardFull = ({
                 {professor?.name}
               </span>
 
-              <img
+              <Image
+                breakpoints={{ default: 128 }}
+                width={128}
+                height={128}
                 src={resourceImgUrl(professor, 'profile.webp')}
                 alt={professor?.name}
                 className="size-32 rounded-full z-10  object-cover [overflow-clip-margin:_unset]"

apps/web/src/components/professor-card.tsx

@@ -35,7 +35,8 @@ export const ProfessorCard = ({ professor, ...props }: ProfessorCardProps) => {
             <span className="max-w-48 mb-8 w-full text-center text-base lg:title-large-sb-24px text-white lg:uppercase z-10 absolute">
               {professor.name}
             </span>
-            <img
+            <Image
+              breakpoints={{ default: 64, lg: 128 }}
               src={resourceImgUrl(professor, 'profile.webp')}
               alt={professor.name}
               className="size-16 lg:size-32 rounded-full z-10 mt-12 lg:mt-20 object-cover [overflow-clip-margin:_unset]"