【Astro】Paste Imageで実現する、ストレスフリーな画像最適化ワークフロー（PNG→AVIF/WebP自動変換）

import fg from "fast-glob";
import fs from "fs/promises";
import sharp from "sharp";
import path from "node:path";

// 設定
const SRC_DIR = "src/content/blog";
const PUBLIC_DIR = "public/blog";
const MAX_WIDTH = 1600; // 最大幅（これより大きい場合はリサイズ）
const WEBP_QUALITY = 80;
const AVIF_QUALITY = 50;

// メイン処理
async function main() {
  console.log(`Cleaning ${PUBLIC_DIR} ...`);
  await fs.rm(PUBLIC_DIR, { recursive: true, force: true });
  await fs.mkdir(PUBLIC_DIR, { recursive: true });

  const pngFiles = await fg([`${SRC_DIR}/**/*.{png,PNG}`], {
    onlyFiles: true,
  });

  let converted = 0,
    mirrored = 0,
    failed = 0;

  for (const pngPath of pngFiles) {
    try {
      // 1. PNGをpublicへミラーリング
      const rel = path.relative(SRC_DIR, pngPath);
      const publicPngPath = path.join(PUBLIC_DIR, rel);
      await fs.mkdir(path.dirname(publicPngPath), { recursive: true });
      await fs.copyFile(pngPath, publicPngPath);
      mirrored++;

      // 2. sharpで最適化（リサイズ、AVIF/WebP変換）
      const ext = path.extname(publicPngPath);
      const basePublic = publicPngPath.slice(0, -ext.length);
      const publicWebp = `${basePublic}.webp`;
      const publicAvif = `${basePublic}.avif`;

      const img = sharp(publicPngPath);
      const meta = await img.metadata();
      // 必要ならリサイズ
      const resized =
        meta.width && meta.width > MAX_WIDTH
          ? img.resize({ width: MAX_WIDTH, withoutEnlargement: true })
          : img;

      await resized
        .clone()
        .avif({ quality: AVIF_QUALITY })
        .toFile(publicAvif);
      await resized
        .clone()
        .webp({ quality: WEBP_QUALITY })
        .toFile(publicWebp);

      converted += 2;
    } catch (e) {
      failed++;
      console.error("Failed:", pngPath, e.message);
    }
  }

  console.log({ mirrored, converted, failed });
}

main();

import { visit } from "unist-util-visit";
import path from "node:path";

export default function remarkPicture(options = {}) {
  const {
    exts = [".png"], // 対象とする拡張子
    imgAttrs = { loading: "lazy", decoding: "async" }, // デフォルト属性
  } = options;

  return (tree) => {
    visit(tree, "image", (node, index, parent) => {
      if (!parent || typeof index !== "number") return;
      if (!node.url) return;

      const url = node.url;
      const ext = path.extname(url).toLowerCase();
      if (!exts.includes(ext)) return;

      // ベースのパスからavif/webpのパスを生成
      const base = url.slice(0, -ext.length);
      const avif = `${base}.avif`;
      const webp = `${base}.webp`;

      const alt = (node.alt ?? "").replace(/"/g, """);
      const title = (node.title ?? "").replace(/"/g, """);

      // タイトルからサイズ指定を解析 ("WIDTHxHEIGHT")
      let widthAttr = "";
      let heightAttr = "";
      let styleAttr = "";
      const m = title.match(/^(\d+)\s*x\s*(\d+)$/i);
      if (m) {
        const a = Number(m[1]);
        const b = Number(m[2]);
        if (a > 0 && b > 0) {
          // 両方指定があればwidth/height属性へ
          widthAttr = ` width="${a}"`;
          heightAttr = ` height="${b}"`;
        } else if (a > 0 && b === 0) {
          // 高さだけ0ならmax-heightスタイルへ（例）
          styleAttr = ` style="max-height:${a}px;"`;
        }
      }

      // その他の属性
      const extraAttrs = Object.entries(imgAttrs)
        .map(([k, v]) => ` ${k}="${v}"`)
        .join("");

      // HTMLを生成してノードを置き換え
      const html = `
<picture>
 <source srcset="${avif}" type="image/avif" />
 <source srcset="${webp}" type="image/webp" />
 <img src="${url}" alt="${alt}"${widthAttr}${heightAttr}${styleAttr}${extraAttrs} />
</picture>
`.trim();

      parent.children[index] = { type: "html", value: html };
    });
  };
}

import chokidar from "chokidar";
import { spawn } from "node:child_process";
import path from "node:path";

const WATCH_DIR = "src/content/blog";
const DEBOUNCE_MS = 800; // 連続実行を防ぐためのデバウンス時間

let timer = null;
let running = false;
let queued = false;

// 変換スクリプト(npm run img:opt)を実行する関数
function runConvert() {
  if (running) {
    queued = true;
    return;
  }
  running = true;
  console.log("[img:watch] running img:opt...");

  const p = spawn("npm", ["run", "img:opt"], {
    stdio: "inherit",
    shell: process.platform === "win32",
  });

  p.on("close", (code) => {
    running = false;
    console.log(
      code === 0 ? "[img:watch] done." : "[img:watch] failed",
      code,
    );
    // 実行中に次のリクエストが来ていたら再実行
    if (queued) {
      queued = false;
      runConvert();
    }
  });
}

// デバウンス処理
function debounceRun() {
  if (timer) clearTimeout(timer);
  timer = setTimeout(runConvert, DEBOUNCE_MS);
}

// 監視の設定
const watcher = chokidar.watch(WATCH_DIR, {
  ignoreInitial: true, // 起動時の既存ファイルスキャンは無視
  persistent: true,
  usePolling: true, // 環境によってはポーリングが必要
  interval: 500,
});

// PNGファイルの追加・変更を検知
watcher.on("all", (event, p) => {
  const ext = path.extname(p).toLowerCase();
  if (ext !== ".png" || event === "unlink") return; // 削除は無視するなど調整

  console.log("[img:watch]", event, p);
  debounceRun();
});

console.log(`[img:watch] watching ${WATCH_DIR}...`);