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
This commit is contained in:
Lorenzo Iovino 2026-01-08 17:40:19 +01:00
parent e3f7a631eb
commit 049c20a4b2
47 changed files with 632 additions and 419 deletions

View file

@ -12,7 +12,7 @@ interface Props {
const {
title,
description = "Lorenzo Iovino - Software Developer based in Sicily. Passionate about technology, remote work, and life balance.",
description = "Lorenzo Iovino - Software Engineer based in Sicily. Passionate about technology, remote work, and life balance.",
canonicalUrl,
image = "/photos/me.png",
type = "website",
@ -21,7 +21,7 @@ const {
tags = [],
} = Astro.props;
const siteUrl = "https://lorenzoiovino.com";
const siteUrl = "https://www.lorenzoiovino.com";
const fullImageUrl = image.startsWith("http") ? image : `${siteUrl}${image}`;
const fullCanonicalUrl = canonicalUrl || `${siteUrl}${Astro.url.pathname}`;