Image Optimization

Docs

---
import { Image, Picture, getImage } from "astro:assets";
import srcImage from "../assets/src.jpg";

const optimizedBackground = await getImage({ src: srcImage, format: "webp" });
---

<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <meta name="viewport" content="width=device-width" />
    <meta name="generator" content={Astro.generator} />
    <title>Astro Image Optimization</title>
  </head>
  <body style={`background-image: url(${optimizedBackground.src});`}>
    <!-- public -->
    <!-- <img src="/public.jpg" />
    <Image src="/public.jpg" alt="" width={480} height={270} /> -->

    <!-- src -->
    <!-- <img src={srcImage.src} /> -->
    <Picture
      src={srcImage}
      alt=""
      width={480}
      height={270}
      formats={["avif", "webp", "jpg"]}
      fallbackFormat="jpg"
    />

    <!-- remote -->
    <!-- <img src={"https://i.imgur.com/sh7TTZ8.jpeg"} />
    <Image src={"https://i.imgur.com/sh7TTZ8.jpeg"} alt="" inferSize={true} /> -->

    <!-- <Picture /> -->
  </body>
</html>

import { defineConfig } from "astro/config";

// https://astro.build/config
export default defineConfig({
  image: {
    domains: ["i.imgur.com"],
  },
});

Если используется Блог

---
import { Picture } from 'astro:assets'
---

{
  cover && (
    <Picture
      src={cover}
      alt={title}
      width={200}
      height={200}
      formats={['avif', 'webp', 'jpg']}
      fallbackFormat="jpg"
      loading="eager"
      class="w-[4.5rem] rounded-md object-cover shadow-lg md:w-24"
    />
  )
}

---
cover: src/content/cover/image.png
---

const Collection = defineCollection({
  type: 'content',
  schema: ({ image }) =>
    z.object({
      cover: image().optional(), // Обязательно использовать image() и schema: ({ image })
    }),
})