loke/lorenzoiovino.com
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

perf: reduce image sizes to stay under 100KB threshold

Browse source
This commit is contained in:
Lorenzo Iovino 2026-01-08 18:04:23 +01:00
parent 049c20a4b2
commit 7ba4560631
6 changed files with 26 additions and 19 deletions
Download patch file Download diff file Expand all files Collapse all files

2
astro.config.mjs
View file

@ -6,7 +6,7 @@ import { defineConfig } from "astro/config";
// https://astro.build/config // https://astro.build/config
export default defineConfig({ export default defineConfig({
integrations: [tailwind(), sitemap(), mdx()], integrations: [tailwind(), sitemap(), mdx()],
site: "https://www.lorenzoiovino.com", site: "https://lorenzoiovino.com",
compressHTML: true, compressHTML: true,
build: { build: {
inlineStylesheets: "auto", inlineStylesheets: "auto",

8
src/content/bio/my-story.mdx
View file

@ -131,7 +131,7 @@ At some point I decided to go back to Sicily.
Not as a “I give up” move. More like: I want a different balance. Not as a “I give up” move. More like: I want a different balance.
<div class="float-left img-medium"> <div class="float-left img-medium">
<Image src={remote} alt="Working remote watching the sea" class="float-left img-medium" width={400} height={300} quality={80} format="webp" /> <Image src={remote} alt="Working remote watching the sea" class="float-left img-medium" width={300} height={225} quality={75} format="webp" />
<em class="text-sm block mt-2">Working remote watching the sea</em> <em class="text-sm block mt-2">Working remote watching the sea</em>
</div> </div>
@ -142,7 +142,7 @@ I work remote, and Sicily is perfect for that. Life is slower. Sometimes it’s
Time here feels different. You can actually breathe. You can have “nothing special” days, and those days can still feel good. Time here feels different. You can actually breathe. You can have “nothing special” days, and those days can still feel good.
<div class="w-full"> <div class="w-full">
<Image src={dogs} alt="My wineyard" class="img-hero" width={1200} height={630} quality={80} format="webp" /> <Image src={dogs} alt="My wineyard" class="img-hero" width={800} height={420} quality={70} format="webp" />
<em class="text-sm block mt-2">My wineyard</em> <em class="text-sm block mt-2">My wineyard</em>
</div> </div>
@ -162,7 +162,7 @@ And yes: food. Sicily is crazy for food. It’s not even a “food culture”, i
For me, living here is a reminder: success is not only about projects and code. It’s also about how you live your days. For me, living here is a reminder: success is not only about projects and code. It’s also about how you live your days.
<div class="w-full"> <div class="w-full">
<Image src={modica} alt="Modica view from my house" class="img-hero" width={1200} height={630} quality={80} format="webp" /> <Image src={modica} alt="Modica view from my house" class="img-hero" width={1200} height={630} quality={70} format="webp" />
<em class="text-sm block mt-2">Modica view from my house</em> <em class="text-sm block mt-2">Modica view from my house</em>
</div> </div>
@ -173,6 +173,6 @@ Today I’m a husband (to my wife Amanda) and a dad (to our little Leonardo).
Life changed a lot, in a good way. I still love technology, I still build things, but family gives a different meaning to everything. Life changed a lot, in a good way. I still love technology, I still build things, but family gives a different meaning to everything.
<div class="w-full"> <div class="w-full">
<Image src={meAmanda} alt="Me and my wife Amanda" class="img-hero" width={1200} height={630} quality={85} format="webp" /> <Image src={meAmanda} alt="Me and my wife Amanda" class="img-hero" width={1200} height={630} quality={65} format="webp" />
<em class="text-sm block mt-2">Me and my wife Amanda</em> <em class="text-sm block mt-2">Me and my wife Amanda</em>
</div> </div>

16
src/layouts/BaseLayout.astro
View file

@ -1,4 +1,7 @@
--- ---
import mePhoto from "../assets/photos/me.png";
import "../styles/global.css";
interface Props { interface Props {
title: string; title: string;
description?: string; description?: string;
@ -14,18 +17,19 @@ const {
title, title,
description = "Lorenzo Iovino - Software Engineer 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, canonicalUrl,
image = "/photos/me.png", image,
type = "website", type = "website",
publishedTime, publishedTime,
modifiedTime, modifiedTime,
tags = [], tags = [],
} = Astro.props; } = Astro.props;
const siteUrl = "https://www.lorenzoiovino.com"; const siteUrl = "https://lorenzoiovino.com";
const fullImageUrl = image.startsWith("http") ? image : `${siteUrl}${image}`; const defaultImage = mePhoto.src;
const fullImageUrl = image
? (image.startsWith("http") ? image : `${siteUrl}${image}`)
: `${siteUrl}${defaultImage}`;
const fullCanonicalUrl = canonicalUrl || `${siteUrl}${Astro.url.pathname}`; const fullCanonicalUrl = canonicalUrl || `${siteUrl}${Astro.url.pathname}`;
import "../styles/global.css";
--- ---
<!doctype html> <!doctype html>
@ -145,7 +149,7 @@ import "../styles/global.css";
name: "Lorenzo Iovino", name: "Lorenzo Iovino",
logo: { logo: {
"@type": "ImageObject", "@type": "ImageObject",
url: `${siteUrl}/photos/me.png`, url: `${siteUrl}${defaultImage}`,
}, },
}, },
...(publishedTime && { datePublished: publishedTime.toISOString() }), ...(publishedTime && { datePublished: publishedTime.toISOString() }),

2
src/pages/blog.astro
View file

@ -121,7 +121,7 @@ const initialPosts: BlogPost[] = sortedPosts.slice(0, 6);
class="w-full h-full object-cover hover:scale-105 transition-transform duration-300" class="w-full h-full object-cover hover:scale-105 transition-transform duration-300"
width={1200} width={1200}
height={630} height={630}
quality={80} quality={70}
format="webp" format="webp"
/> />
<div class="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent" /> <div class="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent" />

15
src/pages/blog/[slug].astro
View file

@ -6,6 +6,7 @@ import BaseLayout from "../../layouts/BaseLayout.astro";
import Navbar from "../../components/Navbar.astro"; import Navbar from "../../components/Navbar.astro";
import Footer from "../../components/Footer.astro"; import Footer from "../../components/Footer.astro";
import "../../styles/prose.css"; import "../../styles/prose.css";
import mePhoto from "../../assets/photos/me.png";
type BlogPost = CollectionEntry<"blog">; type BlogPost = CollectionEntry<"blog">;
@ -21,7 +22,7 @@ const { entry }: { entry: BlogPost } = Astro.props;
const { Content } = await entry.render(); const { Content } = await entry.render();
// Extract image src for meta tags (Open Graph expects a URL string) // Extract image src for meta tags (Open Graph expects a URL string)
const heroImageSrc = entry.data.heroImage?.src || "/photos/me.png"; const heroImageSrc = entry.data.heroImage?.src || mePhoto.src;
--- ---
<BaseLayout <BaseLayout
@ -78,7 +79,7 @@ const heroImageSrc = entry.data.heroImage?.src || "/photos/me.png";
class="w-full h-full object-cover" class="w-full h-full object-cover"
width={1200} width={1200}
height={630} height={630}
quality={80} quality={70}
format="webp" format="webp"
/> />
</div> </div>
@ -94,12 +95,14 @@ const heroImageSrc = entry.data.heroImage?.src || "/photos/me.png";
<div class="mt-8 md:mt-12 bg-white rounded-xl md:rounded-2xl shadow-lg p-6 sm:p-8"> <div class="mt-8 md:mt-12 bg-white rounded-xl md:rounded-2xl shadow-lg p-6 sm:p-8">
<div class="flex items-start gap-6"> <div class="flex items-start gap-6">
<img <Image
src="/photos/me.png" src={mePhoto}
alt="Lorenzo Iovino" alt="Lorenzo Iovino"
class="w-20 h-20 rounded-full object-cover" class="w-20 h-20 rounded-full object-cover"
width="80" width={80}
height="80" height={80}
quality={90}
format="webp"
/> />
<div> <div>
<h3 class="text-lg md:text-xl font-bold text-gray-900 mb-2">Lorenzo Iovino</h3> <h3 class="text-lg md:text-xl font-bold text-gray-900 mb-2">Lorenzo Iovino</h3>

2
src/pages/blog/tag/[tag].astro
View file

@ -98,7 +98,7 @@ const displayTag: string = tag.charAt(0).toUpperCase() + tag.slice(1);
class="w-full h-full object-cover hover:scale-105 transition-transform duration-300" class="w-full h-full object-cover hover:scale-105 transition-transform duration-300"
width={1200} width={1200}
height={630} height={630}
quality={80} quality={70}
format="webp" format="webp"
/> />
<div class="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent" /> <div class="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent" />