(home) optimize image

.gitignore

@@ -24,6 +24,9 @@ pnpm-debug.log*
 public/**/*.jpg
 public/**/*.png
 public/**/*.webp
+src/**/*.jpg
+src/**/*.png
+src/**/*.webp
 
 # obsidian
 .obsidian/

astro.config.ts

@@ -30,6 +30,9 @@ export default defineConfig({
       theme: 'min-light'
     }
   },
+  experimental: {
+    assets: true,
+  },
   integrations: [
     mdx(),
     solid(),

src/components/cards/Photo.astro

@@ -1,10 +1,12 @@
 ---
-const image = "/static/iotm/20221016-170316_1.jpg";
+import image from "@assets/home/20221016-170316_1.jpg";
+import Image from "astro/components/Image.astro";
+
 const alt = "A building covered by multicolor Ivy.";
 ---
 <section class="p-card p-card-image">
   <h2 class="p-card__header">Image of the Month</h2>
-  <a href={image}>
-    <img class="p-card-image__image" src={image} alt={alt}>
+  <a href={image.src}>
+    <Image src={image} alt={alt} class="p-card-image__image" />
   </a>
 </section>

src/env.d.ts

@@ -1,2 +1,2 @@
 /// <reference path="../.astro/types.d.ts" />
-/// <reference types="astro/client" />
+/// <reference types="astro/client-image" />

src/styles/layouts/_home.scss

@@ -45,6 +45,6 @@
 
   &__text {
     text-indent: 1em;
-    line-height: 1.2em;
+    line-height: 1.4em;
   }
 }