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
export default defineConfig({
integrations: [tailwind(), sitemap(), mdx()],
site: "https://www.lorenzoiovino.com",
site: "https://lorenzoiovino.com",
compressHTML: true,
build: {
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.
<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>
</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.
<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>
</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.
<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>
</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.
<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>
</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 {
title: string;
description?: string;
@ -14,18 +17,19 @@ const {
title,
description = "Lorenzo Iovino - Software Engineer based in Sicily. Passionate about technology, remote work, and life balance.",
canonicalUrl,
image = "/photos/me.png",
image,
type = "website",
publishedTime,
modifiedTime,
tags = [],
} = Astro.props;
const siteUrl = "https://www.lorenzoiovino.com";
const fullImageUrl = image.startsWith("http") ? image : `${siteUrl}${image}`;
const siteUrl = "https://lorenzoiovino.com";
const defaultImage = mePhoto.src;
const fullImageUrl = image
? (image.startsWith("http") ? image : `${siteUrl}${image}`)
: `${siteUrl}${defaultImage}`;
const fullCanonicalUrl = canonicalUrl || `${siteUrl}${Astro.url.pathname}`;
import "../styles/global.css";
---
<!doctype html>
@ -145,7 +149,7 @@ import "../styles/global.css";
name: "Lorenzo Iovino",
logo: {
"@type": "ImageObject",
url: `${siteUrl}/photos/me.png`,
url: `${siteUrl}${defaultImage}`,
},
},
...(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"
width={1200}
height={630}
quality={80}
quality={70}
format="webp"
/>
<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 Footer from "../../components/Footer.astro";
import "../../styles/prose.css";
import mePhoto from "../../assets/photos/me.png";
type BlogPost = CollectionEntry<"blog">;
@ -21,7 +22,7 @@ const { entry }: { entry: BlogPost } = Astro.props;
const { Content } = await entry.render();
// 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
@ -78,7 +79,7 @@ const heroImageSrc = entry.data.heroImage?.src || "/photos/me.png";
class="w-full h-full object-cover"
width={1200}
height={630}
quality={80}
quality={70}
format="webp"
/>
</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="flex items-start gap-6">
<img
src="/photos/me.png"
<Image
src={mePhoto}
alt="Lorenzo Iovino"
class="w-20 h-20 rounded-full object-cover"
width="80"
height="80"
width={80}
height={80}
quality={90}
format="webp"
/>
<div>
<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"
width={1200}
height={630}
quality={80}
quality={70}
format="webp"
/>
<div class="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent" />