サムネ自動トリミング：顔検出・焦点領域・SmartCropで“映える”自動生成（Windows/Next.js）

// Shell# 1) 依存の導入（Windows PowerShell）
npm i -D sharp smartcrop-sharp
# （任意）顔検出を入れる場合：軽量に試すなら @vladmandic/face-api + canvas
# npm i -D @vladmandic/face-api canvas

// TypeScript// 2) SmartCrop + Sharp：1200x630（OGP用）の自動トリム例
// scripts/crop-ogp.ts
import fs from "node:fs/promises";
import sharp from "sharp";
import smartcrop from "smartcrop-sharp";

const INPUT = "assets/input.jpg";
const OUT = "public/ogp/auto-1200x630.jpg";

async function main() {
  const image = sharp(INPUT);
  const { width, height } = await image.metadata();

  if (!width || !height) throw new Error("サイズ取得に失敗");

  // SmartCropで最適領域を探索（1.91:1 = 1200x630）
  const result = await smartcrop.crop(await fs.readFile(INPUT), { width: 1200, height: 630 });
  const topCrop = result.topCrop; // { x, y, width, height }

  await image
    .extract({ left: topCrop.x, top: topCrop.y, width: topCrop.width, height: topCrop.height })
    .resize(1200, 630)               // 目的サイズ
    .jpeg({ quality: 84, mozjpeg: true }) // まずはJPEGで確認（後述でWebP/AVIFも）
    .toFile(OUT);

  console.log("✔ OGP生成:", OUT);
}
main().catch((e) => { console.error(e); process.exit(1); });

// TypeScript// 3) 顔検出がある場合はそれを優先（概念例：単一顔の境界箱をSmartCrop前に採用）
type Box = { x: number; y: number; width: number; height: number };

function preferFaceBox(face: Box | null, targetW: number, targetH: number, imgW: number, imgH: number): Box | null {
  if (!face) return null;
  const targetRatio = targetW / targetH;

  // 顔の中心を維持しつつ比率1.91:1の矩形を作成（はみ出しは画面内にクランプ）
  const cx = face.x + face.width / 2;
  const cy = face.y + face.height / 2;

  let w = Math.min(imgW, Math.max(face.width * 2.2, targetW));
  let h = Math.round(w / targetRatio);
  if (h > imgH) { h = imgH; w = Math.round(h * targetRatio); }

  let x = Math.round(cx - w / 2);
  let y = Math.round(cy - h / 2);
  x = Math.max(0, Math.min(imgW - w, x));
  y = Math.max(0, Math.min(imgH - h, y));
  return { x, y, width: w, height: h };
}
// SmartCropの前に preferFaceBox() が返す矩形があればそれで extract() する

// Shell# 4) 一括書き出し（PowerShell例：OGPとカードの2サイズ）
# OGP 1200x630 / Card 400x250
node scripts/crop-ogp.ts
# ※ 同様に 400x250 版のスクリプトを作って node scripts/crop-card.ts

// TypeScript// 5) 仕上げの軽量化（SharpでWebP/AVIFにも出力）
await image
  .extract({ left: topCrop.x, top: topCrop.y, width: topCrop.width, height: topCrop.height })
  .resize(1200, 630)
  .toFile("public/ogp/auto-1200x630.webp");  // 既定画質（q=80程度）
await image
  .extract({ left: topCrop.x, top: topCrop.y, width: topCrop.width, height: topCrop.height })
  .resize(1200, 630)
  .avif({ quality: 45, effort: 4 })
  .toFile("public/ogp/auto-1200x630.avif");

// HTML + CSS<!-- 7) Next.jsでの表示（比率予約 + picture + 代替テキスト） -->
<figure class="thumb">
  <picture>
    <source srcset="/ogp/auto-1200x630.avif" type="image/avif" />
    <source srcset="/ogp/auto-1200x630.webp" type="image/webp" />
    <img
      src="/ogp/auto-1200x630.jpg"
      width="1200" height="630"
      alt="記事の主題を示すサムネイル"
      loading="eager" decoding="async"
      style="object-fit: cover"
    />
  </picture>
  <figcaption class="sr-only">記事の主題を示すサムネイル</figcaption>
</figure>

<style>
.thumb { aspect-ratio: 1200 / 630; background:#f3f4f6; }
.thumb > picture, .thumb img { width: 100%; height: 100%; display:block; }
</style>
<!-- 予約サイズでCLSゼロ（関連：/articles/cls-zero-images-ads） -->