Astroの画像まわりを調べてみた

import { defineConfig } from "astro-imagetools/config"

export default defineConfig({
  breakpoints: [640, 750, 828, 1080, 1200, 1920, 2048],
  sizes: "(min-width: 1152px) 1152px, 100vw",
  format: ["webp", "jpeg"],
  placeholder: "blurred",
})

---
const { link, style, img } = await renderImg({
  src: "/src/image/lemons.jpg",
  alt: "lemons",
})
---
<Fragment set:html={link + style + img} />

{
  sources: [
    {
      type: 'image/webp',
      srcset: '/assets/cat_ZoRz1u.webp 640w,/assets/cat_zYpF9.webp 750w,/assets/cat_Z23obAB.webp 828w,/assets/cat_2rruqi.webp 1080w,/assets/cat_jvDtV.webp 1200w,/assets/cat_9yFwU.webp 1920w,/assets/cat_Z2mNlVJ.webp 2048w'
    },
    {
      type: 'image/jpeg',
      srcset: '/assets/cat_ZtutpC.jpeg 640w,/assets/cat_vmvh1.jpeg 750w,/assets/cat_Z2815YJ.jpeg 828w,/assets/cat_6blae.jpeg 1080w,/assets/cat_Z21JuL8.jpeg 1200w,/assets/cat_Z2bGsI9.jpeg 1920w,/assets/cat_m7CB8.jpeg 2048w'
    },
    {
      type: 'image/jpeg',
      srcset: '/assets/cat_1THka7.jpg 640w,/assets/cat_Z2aBNWb.jpg 750w,/assets/cat_gbHA0.jpg 828w,/assets/cat_Z1RhBVU.jpg 1080w,/assets/cat_14XEUE.jpg 1200w,/assets/cat_U1GXD.jpg 1920w,/assets/cat_Z1Blkv1.jpg 2048w'
    }
  ],
  image: {
    fit: undefined,
    position: undefined,
    background: undefined,
    width: 2048,
    height: 727,
    src: '/assets/cat_2gtsOH.jpg'
  }
}

import { unified } from "unified"
import rehypeParse from "rehype-parse"
import rehypeStringify from "rehype-stringify"
import { visit } from "unist-util-visit"
import { h } from "hastscript"

import { getPicture } from "@astrojs/image"
import { getPlaiceholder } from "plaiceholder"

const pictureDefault = {
  widths: [640, 750, 828, 1080, 1200, 1920, 2048],
  sizes: "(min-width: 1152px) 1152px, 100vw",
  formats: ["webp", "jpeg"],
}

export default async function imgToPicture(html) {
  let imageNodesSet = []

  const htmlAst = unified().use(rehypeParse, { fragment: true }).parse(html)

  visit(htmlAst, "element", (node, index, parent) => {
    if (node.tagName === "img") {
      imageNodesSet.push({ node, index, parent })
    }
  })

  const promises = imageNodesSet.map(async (nodeSet) => {
    const {
      node: {
        properties: { src, alt },
      },
      index,
      parent,
    } = nodeSet

    const { base64, img } = await getPlaiceholder(src)

    const pictureData = await getPicture({
      ...img,
      ...pictureDefault,
      aspectRatio: `${img.width}:${img.height}`,
    })

    //　置換用のnodeの作成
    const srcNodes = pictureData.sources.map((source) => {
      const e = h("source", { ...source })
      return e
    })
    const imgNode = h("img", { ...pictureData.image, alt })
    const pictureNode = h("figure", [h("picture", [...srcNodes, imgNode])])

    // 置換
    parent.children.splice(index, 1, pictureNode)
  })

  await Promise.all(promises)
  const newhtml = unified().use(rehypeStringify).stringify(htmlAst)

  return newhtml
}

---
import rocket from '../images/rocket.svg';
---
<!-- Remote image on another server -->
<img src="https://astro.build/assets/logo.png" width="25" alt="Astro">

<!-- Local image stored at public/assets/stars.png -->
<img src="/assets/stars.png" alt="A starry night sky.">

<!-- Local image stored at src/images/rocket.svg -->
<img src={rocket} alt="A rocketship in space."/>

# My Markdown Page

<!-- Local image stored at public/assets/stars.png -->
![A starry night sky.](/assets/stars.png)
<img src="/assets/stars.png" alt="A starry night sky.">

<!-- Remote image on another server -->
![Astro](https://astro.build/assets/logo.png)
<img src="https://astro.build/assets/logo.png" width="25" alt="Astro">

{
  src: '/@astroimage/images/lemons.jpg',
  width: 1920,
  height: 1440,
  format: 'jpg'
}

<!-- Local Image -->
<Picture
  src="/src/images/image.jpg"
  alt="A local image"
/>

<!-- Remote URL -->
<Picture
  src="https://example.com/image.jpg"
  alt="A remote image"
/>

---
src: https://picsum.photos/1024/768
alt: A random image
setup: |
  import { Picture } from "astro-imagetools/components";
---

# Hello Markdown Images

<!-- A remote image -->

![A random remote image](https://picsum.photos/1024/768)

<!-- A local image relative to the markdown file -->

![A local image](./images/landscape.jpg)

<!-- A local image relative to the project root -->

![Another local image](../src/images/landscape.jpg)

<!-- An example of using query params -->

![A remote image with query params](https://picsum.photos/1024/768?grayscale)

<!-- An example of the `<Image />` component inside MD pages -->

<Picture
  src={frontmatter.src}
  alt={frontmatter.alt}
/>

import lemons from "../image/lemons.jpg"

# console.log(lemon)
# /assets/lemons@1920w.4f35acc8.jpeg