[Layout] plugins image optimisation

Author: paulgirard

public/plugins/default-screenshot.jpg renamed to src/images/plugins/default-screenshot.jpg

@@ -3,6 +3,7 @@ import { Icon } from "astro-icon/components";
 import { isEmpty } from "lodash-es";
 import { marked } from "marked";
 
+import { Image } from "astro:assets";
 import Banner from "../../../components/Banner.astro";
 import Layout from "../../../layouts/Layout.astro";
 import type { Plugin } from "./type";
@@ -50,7 +51,9 @@ try {
       {
         !!plugin.images?.length && (
           <div class="banner-image">
-            <img
+            <Image
+              inferSize
+              layout="constrained"
               class="flex-shrink-0 bg-white"
               src={`https://raw.githubusercontent.com/gephi/gephi-plugins/refs/heads/gh-pages/plugins/${plugin.images[0].image}`}
               alt=""
@@ -170,7 +173,10 @@ try {
                     href={`https://raw.githubusercontent.com/gephi/gephi-plugins/refs/heads/gh-pages/plugins/${image}`}
                     class=""
                   >
-                    <img
+                    <Image
+                      inferSize
+                      alt={""}
+                      layout="constrained"
                       class="border img-fluid"
                       src={`https://raw.githubusercontent.com/gephi/gephi-plugins/refs/heads/gh-pages/plugins/${image}`}
                     />

src/pages/desktop/plugins/[id].astro

@@ -1,6 +1,8 @@
 ---
-import { reverse, sortBy } from "lodash-es";
+import { Image } from "astro:assets";
+import { isNil, reverse, sortBy } from "lodash-es";
 import Banner from "../../../components/Banner.astro";
+import Default from "../../../images/plugins/default-screenshot.jpg";
 import Layout from "../../../layouts/Layout.astro";
 import { PluginsFilters } from "./PluginsFilters";
 import type { Plugin } from "./type";
@@ -39,15 +41,17 @@ const pluginsData: Plugin[] | null = pluginsDataRequest.ok
                   class={`category-${p.category} ${p.versions ? Object.keys(p.versions).map((v) => `version-${v}`) : ""}`}
                 >
                   <a class="card" href={`/desktop/plugins/${p.id}`}>
-                    <img
-                      alt=""
-                      class="card-img-top plugin-image"
-                      src={
-                        p.images && p.images[0]
-                          ? `https://raw.githubusercontent.com/gephi/gephi-plugins/refs/heads/gh-pages/plugins/${p.images[0].image}`
-                          : "/plugins/default-screenshot.jpg"
-                      }
-                    />
+                    {!isNil(p.images) && p.images[0] !== undefined ? (
+                      <Image
+                        inferSize
+                        alt=""
+                        class="card-img-top plugin-image"
+                        layout="constrained"
+                        src={`https://raw.githubusercontent.com/gephi/gephi-plugins/refs/heads/gh-pages/plugins/${p.images[0].image}`}
+                      />
+                    ) : (
+                      <Image alt="" class="card-img-top plugin-image" layout="constrained" src={Default} />
+                    )}
                     <div>
                       <small class="plugin-category">{p.category}</small>
                     </div>