スクショ最適化：文字にじみ・バンディング・圧縮ノイズを消す（PNG/WebP/AVIF）

// CMD / ImageMagick# ImageMagick：ロスレスWebP/PNG24（UI/文字向け）
# WebPロスレス（テキスト/UIに最適・高圧縮）
magick input.png -define webp:lossless=true -quality 100 -strip output.webp

# PNG24（写真のないUIスクショで“完全無劣化”）
magick input.png -strip PNG24:output.png

// CMD / ImageMagick# ImageMagick：PNG8（減色）＋ディザで容量削減（UI/図版向け）
# 128色 + Floyd-Steinbergディザ → 透明/半透明も扱う場合は要検証
magick input.png -colors 128 -dither FloydSteinberg -define png:color-type=3 PNG8:output-128.png

# バンディングが出るなら色数を増やす or ディザ強度を調整
magick input.png -colors 192 -dither FloydSteinberg PNG8:output-192.png

// CMD / ImageMagick# ImageMagick：縮小のにじみを防ぐ（整数倍ダウンサンプル）
# 2xで撮って 1/2 に下げる（nearest/pointでエッジを維持）
magick input@2x.png -filter point -resize 50% -strip output-1x.png

# 3x→1x は一度 33.333% ではなく 300%→100%の整数比の段階縮小が安定（例）
magick input@3x.png -filter point -resize 66.666% -filter point -resize 50% -strip output-1x.png

// TypeScript / Node (Sharp)// Node(Sharp)：PNG8（減色）/ロスレスWebPを自動化
import fs from "node:fs/promises";
import path from "node:path";
import sharp from "sharp";

const IN = "shots";
const OUT = "out";
await fs.mkdir(OUT, { recursive: true });

for (const name of await fs.readdir(IN)) {
  const src = path.join(IN, name);
  const base = path.parse(name).name;

  // PNG8（128色 + ディザ）
  await sharp(src)
    .png({ palette: true, colors: 128, dither: 0.8 })
    .toFile(path.join(OUT, base + "-png8.png"));

  // WebPロスレス
  await sharp(src)
    .webp({ lossless: true })
    .toFile(path.join(OUT, base + "-lossless.webp"));
}

// CSS/* CSS：ピクセルアート以外は基本auto。UIスクショを拡大表示するなら crisp-edges を検討 */
img.screenshot {
  image-rendering: auto;           /* 既定：テキスト/UIはこれが安全 */
  /* image-rendering: crisp-edges; */  /* 一部ブラウザのみ。拡大時のにじみ抑制に効く場合あり */
  /* image-rendering: pixelated;   */  /* ピクセルアート用。UI/テキストには不向き */
}