feat: implement automatic image optimization with Astro Assets

- Configure content collections to use image() helper for type-safe image references
- Replace all <img> tags with <Image> component from astro:assets
- Migrate images from /public to /src/assets for automatic optimization
- Update blog posts to use relative paths in frontmatter (../../assets/photos/)
- Remove unused images and duplicates from /public folder
- Update Footer component to use optimized SVG icons
- Clean up manifest.json to use favicon.ico instead of deleted photos

Performance improvements:
- remote.jpg: 1.8MB → 128KB (93% reduction)
- me.png: 71KB → 12KB (83% reduction)
- Automatic WebP conversion
- Tree-shaking: only used images are optimized

/public folder reduced from 2.3MB to 32KB (only essential files)
Build output: 2.2MB with fully optimized images ready for S3 deployment

src/components/Footer.astro

@@ -1,5 +1,8 @@
 ---
-
+import { Image } from "astro:assets";
+import astroIcon from "../assets/astro.svg";
+import tailwindIcon from "../assets/tailwind.svg";
+import githubIcon from "../assets/github.svg";
 ---
 
 <div class="w-full bg-secondary py-2 px-4">
@@ -79,11 +82,11 @@
 						class="inline-flex items-center hover:text-white transition-all duration-200"
 						title="Astro"
 					>
-						<img
+						<Image
 							class="h-5 w-5"
-							src="/astro.svg"
-							height="20"
-							width="20"
+							src={astroIcon}
+							width={20}
+							height={20}
 							loading="lazy"
 							alt="Astro Logo"
 						/>
@@ -94,11 +97,11 @@
 						class="inline-flex items-center center hover:text-white transition-all duration-200"
 						title="TailwindCSS"
 					>
-						<img
+						<Image
 							class="h-5 w-5"
-							src="/tailwind.svg"
-							height="20"
-							width="20"
+							src={tailwindIcon}
+							width={20}
+							height={20}
 							loading="lazy"
 							alt="Tailwind Logo"
 						/>
@@ -109,11 +112,11 @@
 					class="hover:text-white transition-colors duration-200 inline-flex items-center justify-center sm:justify-end gap-2 font-medium"
 				>
 					<span>Check the source code</span>
-					<img
-						src="/github.svg"
+					<Image
+						src={githubIcon}
 						class="h-5 w-5"
-						height="20"
-						width="20"
+						width={20}
+						height={20}
 						loading="lazy"
 						alt="Github Logo"
 					/>

src/components/Hero.astro

@@ -1,5 +1,8 @@
 ---
-
+import { Image } from "astro:assets";
+import mePhoto from "../assets/photos/me.png";
+import linkedinIcon from "../assets/linkedin.svg";
+import githubIcon from "../assets/github.svg";
 ---
 
 <div class="w-full">
@@ -12,12 +15,14 @@
 					<!-- Photo Section -->
 					<div class="w-full md:w-auto flex-shrink-0 order-2 md:order-none">
 						<div class="relative overflow-hidden md:rounded-l-3xl flex justify-center md:block">
-							<img
-								src="/photos/me.png"
+							<Image
+								src={mePhoto}
 								alt="Photo of Lorenzo Iovino"
 								class="w-48 h-auto md:w-full object-cover object-center"
-								width="300"
-								height="300"
+								width={300}
+								height={300}
+								quality={90}
+								format="webp"
 							/>
 							<div class="absolute inset-0 to-transparent md:bg-gradient-to-r"></div>
 							<div class="absolute inset-0 to-transparent md:bg-gradient-to-r"></div>
@@ -57,12 +62,12 @@
 									class="group relative p-3 bg-gray-50 hover:bg-secondary/10 rounded-xl transition-all duration-200 transform hover:-translate-y-1"
 									aria-label="LinkedIn"
 								>
-									<img
-										src="/linkedin.svg"
+									<Image
+										src={linkedinIcon}
 										alt="LinkedIn"
 										class="h-6 w-6 opacity-70 group-hover:opacity-100 transition-opacity"
-										width="24"
-										height="24"
+										width={24}
+										height={24}
 										loading="lazy"
 									/>
 								</a>
@@ -71,12 +76,12 @@
 									class="group relative p-3 bg-gray-50 hover:bg-secondary/10 rounded-xl transition-all duration-200 transform hover:-translate-y-1"
 									aria-label="GitHub"
 								>
-									<img
-										src="/github.svg"
+									<Image
+										src={githubIcon}
 										alt="GitHub"
 										class="h-6 w-6 opacity-70 group-hover:opacity-100 transition-opacity"
-										width="24"
-										height="24"
+										width={24}
+										height={24}
 										loading="lazy"
 									/>
 								</a>