Optmize images

Author: CodeDoctorDE

astro.config.mjs

@@ -7,6 +7,11 @@ import manifest from "./webmanifest.json";
 // https://astro.build/config
 export default defineConfig({
   site: "https://linwood.dev",
+  image: {
+    responsiveStyles: true,
+    layout: "constrained",
+    domains: ["avatars1.githubusercontent.com"],
+  },
   integrations: [
     mdx(),
     sitemap(),
@@ -19,7 +24,7 @@ export default defineConfig({
         globPatterns: [
           "**/*.{html,js,css,png,svg,json,ttf,pf_fragment,pf_index,pf_meta,pagefind,wasm}",
         ],
-        maximumFileSizeToCacheInBytes: 3000000
+        maximumFileSizeToCacheInBytes: 3000000,
       },
       experimental: {
         directoryAndTrailingSlashHandler: true,

package.json

@@ -15,7 +15,7 @@
     "@astrojs/sitemap": "^3.4.1",
     "@linwooddev/style": "^0.4.2",
     "@phosphor-icons/web": "^2.1.2",
-    "astro": "^5.9.4",
+    "astro": "^5.10.0",
     "sharp": "^0.34.2",
     "typescript": "^5.8.3"
   },

pnpm-lock.yaml

@@ -1,7 +1,7 @@
 ---
-import { getProject } from "src/blog";
-import Link from "./Link.astro";
-import { getCollection, getEntry } from "astro:content";
+import { getEntry } from "astro:content";
+import { Image } from 'astro:assets';
+
 export interface Props {
     author?: string;
 }
@@ -13,7 +13,7 @@ const current = author && await getEntry("authors", author);
 {
     current && (
         <a href={current.data.url} class="author">
-            <img class="author-avatar" src={current.data.avatar} />
+            <Image class="author-avatar" alt={`Avatar of ${current.data.name}`} src={current.data.avatar} width={64} height={64} />
             <p class="author-name">{current.data.name}</p>
         </a>
     )

src/components/Author.astro

@@ -1,11 +1,13 @@
 ---
+import { Image } from "astro:assets";
 import Link from "./Link.astro";
 import { SITE_TITLE } from "../consts";
+import logo from "../../public/logos/logo.png";
 ---
 
 <header class="navbar">
   <a href="/" class="navbar-title">
-    <img src="/logos/logo.png" height="32" width="32" alt="Astro Logo" />
+    <Image src={logo} height="32" width="32" alt="Linwood Logo" />
     {SITE_TITLE}
   </a>
   <nav class="navbar-items">

src/components/Header.astro

@@ -1,4 +1,5 @@
 ---
+import { Image } from "astro:assets";
 import { getProject } from "src/blog";
 import Link from "./Link.astro";
 export interface Props {
@@ -13,9 +14,11 @@ const current = project && await getProject(project);
     current && (
         <section>
             <div class="row gap-md pv-sm align-center justify-stretch">
-                <img
+                <Image
                     class="thumbnail-image"
                     src={`/logos/${current.data.logo ?? current.id}.svg`}
+                    height={100}
+                    width={100}
                     alt={current.data.title}
                 />
                 <div class="col gap-md">

src/components/ProjectHero.astro

@@ -1,4 +1,5 @@
 ---
+import { Image } from "astro:assets";
 import type { CollectionEntry } from "astro:content";
 import FormattedDate from "@components/FormattedDate.astro";
 import Link from "@components/Link.astro";
@@ -62,7 +63,7 @@ const platforms = [
     </div>
   </dialog>
   <article class="col">
-    {heroImage && <img width={720} height={360} src={heroImage} alt="" />}
+    {heroImage && <Image fit="" width={720} height={360} src={heroImage} alt="" />}
     <h1>{title}</h1>
     <FormattedDate date={date} />
     <ProjectHero project={project} />

src/layouts/BlogPost.astro

@@ -1,7 +1,5 @@
 ---
-import BaseHead from "@components/BaseHead.astro";
-import Header from "@components/Header.astro";
-import Footer from "@components/Footer.astro";
+import { Image } from "astro:assets";
 import { SITE_TITLE, SITE_DESCRIPTION } from "../consts";
 import { getProjects } from "../blog";
 import DefaultLayout from "../layouts/DefaultLayout.astro";
@@ -31,7 +29,7 @@ const libraries = await getCollection("libraries");
               class="col align-center justify-between h-full"
               style={{ width: "150px" }}
             >
-              <img
+              <Image
                 src={`/logos/${e.data.logo ?? e.id}.svg`}
                 alt={e.data.title}
                 width="100"
@@ -50,7 +48,7 @@ const libraries = await getCollection("libraries");
     <Table>
       {
         libraries.map((e) => (
-          <TableItem>
+          <TableItem href={e.data.url}>
             <p class="text-center mb-none">{e.data.id}</p>
             <p class="normal text-center mt-none">{e.data.description}</p>
           </TableItem>