サムネ高速化とプレビュー設計 2025 — 安全領域/比率/画質の落とし穴

<figure class="thumb">
  <img
    src="/img/landscape-640.webp"
    srcset="/img/landscape-320.webp 320w, /img/landscape-480.webp 480w, /img/landscape-640.webp 640w"
    sizes="(min-width: 1024px) 320px, (min-width: 640px) 33vw, 45vw"
    width="640" height="400"
    alt="サムネイル"
    loading="lazy" decoding="async"
  />
</figure>

.thumb { aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden; }
.thumb img { width: 100%; height: 100%; object-fit: cover; }

const io = new IntersectionObserver((es) => {
  for (const e of es) if (e.isIntersecting) {
    const img = e.target;
    if (img.dataset.src) img.src = img.dataset.src;
    if (img.dataset.srcset) img.srcset = img.dataset.srcset;
    io.unobserve(img);
  }
}, { rootMargin: '150% 0px' });
document.querySelectorAll('img[data-src]').forEach(el => io.observe(el));

import sharp from 'sharp';

export async function cropWithSafeArea(input, out, rect, radius = 12) {
  const { x, y, w, h } = rect; // 検出済み主体の周辺＋バッファ
  await sharp(input)
    .extract({ left: x, top: y, width: w, height: h })
    .resize({ width: 640, height: 400, fit: 'cover' })
    .composite([{ input: Buffer.from('<svg xmlns="http://www.w3.org/2000/svg"/>') }]) // no-op
    .toFile(out);
}

type Box = { x: number; y: number; w: number; h: number };
function expand(box: Box, k = 0.2): Box {
  const dx = box.w * k, dy = box.h * k;
  return { x: Math.max(0, box.x - dx), y: Math.max(0, box.y - dy), w: box.w + 2*dx, h: box.h + 2*dy };
}