[layout] distant image optim

Author: paulgirard

astro.config.mjs

@@ -15,5 +15,5 @@ export default defineConfig({
     defaultLocale: "en",
   },
   redirects,
-  image: { layout: "constrained" },
+  image: { layout: "constrained", domains: ["gephi.wordpress.com", "raw.githubusercontent.com"] },
 });

src/components/BlogRSS.astro

@@ -1,4 +1,5 @@
 ---
+import { Image } from "astro:assets";
 import { identity } from "lodash-es";
 import Parser from "rss-parser";
 
@@ -22,7 +23,9 @@ const dateFormatter = new Intl.DateTimeFormat("en-EN", { dateStyle: "long" });
     {
       feed.items.slice(0, 4).map((item) => (
         <article class="blog-post">
-          {item["media:thumbnail"] && <img alt="" src={item["media:thumbnail"]?.$.url} />}
+          {item["media:thumbnail"] && (
+            <Image inferSize alt="" src={item["media:thumbnail"]?.$.url} layout="constrained" />
+          )}
           <h4>
             <a href={item.link}>{item.title}</a>
           </h4>

src/styles/_contents.scss

@@ -178,6 +178,8 @@
   }
   .banner-image img {
     width: auto;
+    object-fit: contain;
+    height: auto;
   }
 
   .feature:nth-child(2n):not(.feature-left) {
@@ -312,8 +314,9 @@ a.no-decoration {
       margin: 0;
     }
     img {
-      max-width: 100%;
-      max-height: 50%;
+      width: 100%;
+      height: auto;
+      max-height: 300px;
       object-fit: contain;
     }
   }