perf(images): serve optimized portfolio media

components/ataturk-widget-modal.tsx

@@ -28,7 +28,7 @@ export function AtaturkWidgetModal({ theme }: AtaturkWidgetModalProps) {
         >
           <div className="relative h-full w-full">
             <Image
-              src="/ataturk.png"
+              src="/ataturk.webp"
               alt={t("alt")}
               fill
               sizes="56px"

components/blog-content.tsx

@@ -156,7 +156,7 @@ export function BlogContent({ data, section = "blog" }: BlogContentProps) {
                   readTime={post.readTime}
                   href={post.href}
                   className="rounded-sm border-border [&_h3]:line-clamp-2 [&_h3]:min-h-[2.5rem] [&_p]:line-clamp-3"
-                  author={{ name: post.author, avatar: "/logo/logo.png" }}
+                  author={{ name: post.author, avatar: "/logo/logo.webp" }}
                 />
               </StaggerItem>
             ))}

components/blog-detail-content.tsx

@@ -45,15 +45,13 @@ function MarkdownImage({ src, alt }: { src?: string; alt?: string }) {
           className="h-auto w-full object-cover"
         />
       ) : (
-        <img
+        <Image
           src={src}
           alt={caption}
           width={1200}
           height={675}
+          sizes="(max-width: 768px) 100vw, (max-width: 1200px) 80vw, 900px"
           loading="lazy"
-          decoding="async"
-          fetchPriority="low"
-          referrerPolicy="strict-origin-when-cross-origin"
           className="h-auto w-full object-cover"
         />
       )}

components/json-ld.tsx

@@ -11,7 +11,7 @@ export type PersonJsonLdProps = {
 export function PersonJsonLd({
   name,
   url = SITE_URL,
-  image = `${SITE_URL}/logo/logo.png`,
+  image = `${SITE_URL}/logo/logo.webp`,
   jobTitle = "Fullstack Developer",
   sameAs = [],
 }: PersonJsonLdProps) {
@@ -68,7 +68,7 @@ export function ArticleJsonLd({
       name: authorName,
       logo: {
         "@type": "ImageObject",
-        url: `${SITE_URL}/logo/logo.png`,
+        url: `${SITE_URL}/logo/logo.webp`,
       },
     },
   };

components/links-content.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { Icon } from "@iconify/react";
+import Image from "next/image";
 import { Link } from "@/i18n/routing";
 import { useLocale, useTranslations } from "next-intl";
 import { useMemo, useState } from "react";
@@ -124,9 +125,13 @@ export function LinksContent({
       <div className="relative mx-auto flex w-full max-w-xl justify-center">
         <Card className="w-full overflow-hidden rounded-[28px] border-border/80 bg-background/95 shadow-[0_24px_80px_rgba(15,23,42,0.16)] backdrop-blur">
           <div className="relative aspect-1878/410 overflow-hidden border-b border-border/70">
-            <img
+            <Image
               src="/logo/cover.png"
               alt="Poyraz Avsever kapak görseli"
+              fill
+              priority
+              sizes="(max-width: 640px) 100vw, 576px"
+              className="object-cover"
             />
             <div className="absolute inset-0 bg-linear-to-t from-background/20 via-transparent to-transparent" />
           </div>
@@ -134,7 +139,7 @@ export function LinksContent({
           <div className="px-5 pb-5 pt-0 sm:px-6 sm:pb-6">
             <div className="-mt-14 flex flex-col gap-4">
               <Avatar className="h-24 w-24 rounded-[28px] border-4 border-background bg-background shadow-lg sm:h-28 sm:w-28">
-                <AvatarImage src="/logo/logo.png" alt="Poyraz Avsever" />
+                <AvatarImage src="/logo/logo.webp" alt="Poyraz Avsever" />
                 <AvatarFallback className="rounded-3xl bg-muted text-lg font-semibold">
                   PA
                 </AvatarFallback>

components/media-kit-content.tsx

@@ -185,7 +185,7 @@ export function MediaKitContent({ locale }: { locale: MediaKitLocale }) {
         <header className="flex items-center justify-between gap-4 border-b border-border pb-4">
           <a href={`/${locale}`} className="inline-flex items-center gap-3">
             <Image
-              src="/logo/logo.png"
+              src="/logo/logo.webp"
               alt="Poyraz Avsever"
               width={36}
               height={36}

components/site-navbar.tsx

@@ -204,7 +204,7 @@ export function SiteNavbar({
           className="inline-flex shrink-0 items-center"
         >
           <Logo
-            src="/logo/logo.png"
+            src="/logo/logo.webp"
             alt="Poyraz Avsever"
             width={40}
             height={40}