Open-reSource / openresource.dev

Repository used for openresource.dev
https://openresource.dev
Other
64 stars 3 forks source link

Improve images loading performance #897

Closed julien-deramond closed 1 week ago

julien-deramond commented 2 weeks ago

Description

Check if using Image from astro:assets can improve the images loading performance.

For instance, something like this in github-ghost-user.mdx:

title: 'Who is the ghost user on GitHub?'
---

+import { Image } from 'astro:assets';
import UserThumbnail from '../../components/UserThumbnail.astro'

<p class="lead">This morning, I woke up to a storm of 200+ GitHub notifications. My inbox, usually pristine, was drowning in a deluge of spams.</p>

As I scrolled through, my screen filled with an overwhelming array of spam discussions.

-<img src="/images/github-ghost-user-1.png" alt="Screenshot of the GitHub interface showing a spam GitHub discussion with 'WATCH Kingdom of the Planet of the Apes FuLLMovie (.Free.)...' title, and a content matching this title, with big 'Watch now' and 'Download' buttons" />
+<Image src="/images/github-ghost-user-1.png" alt="Screenshot of the GitHub interface showing a spam GitHub discussion with 'WATCH Kingdom of the Planet of the Apes FuLLMovie (.Free.)...' title, and a content matching this title, with big 'Watch now' and 'Download' buttons" width="1147" height="908" loading="eager" />

-<img src="/images/github-ghost-user-2.png" alt="Screenshot of the GitHub interface showing a spam GitHub discussion with 'FREE-ROBUX-GENERATOR-2024-FREE-ROBUX-NEW-CODES-DAILY BONUS-[Jo)ztyr]' title, and a content matching this title, with links to get it" />
+<Image src="/images/github-ghost-user-2.png" alt="Screenshot of the GitHub interface showing a spam GitHub discussion with 'FREE-ROBUX-GENERATOR-2024-FREE-ROBUX-NEW-CODES-DAILY BONUS-[Jo)ztyr]' title, and a content matching this title, with links to get it" width="1694" height="908" loading="eager" />

**OK, cool, we are being productive today! 200+ GitHub discussions to delete!**
julien-deramond commented 1 week ago

Using Image was done with https://github.com/Open-reSource/openresource.dev/commit/455b9e2b690754a168a8fc597e8e5f73a3756bd5