HEIC/HEIF をWebへ：AVIF/WebP/JPEG 変換パイプライン（色/回転/10bit対応）
iPhoneや最新スマホから届く素材はHEIC/HEIFが一般的になりました。色・回転・ビット深度の扱いを誤ると、 Webで見えが崩れることがあります。まずはsRGB・回転適用・8bit化で互換性を確保し、AVIF/WebP/JPEGへ出し分けるのが実務的です。
先に結論
- 環境のHEIF対応をチェック（下記スクリプト）。
- sRGB化＋回転適用＋8bit化を最初に行う。
- 出力は AVIF/WebP/JPEGの意思決定 に従う。
要点（TL;DR）
1. HEIFサポートの検出
// scripts/check-heif-support.ts
import sharp from "sharp";
console.log("formats:", sharp.format); // heif: { id:'heif', input:true, output:false } など
if (!sharp.format.heif?.input) {
console.error("HEIF(HEIC) input is NOT supported in this environment.");
process.exit(1);
}
console.log("HEIF input supported.");2. 変換パイプライン（sRGB/回転/8bit）
// scripts/heic-to-web.ts — HEICをWeb形式へ安全変換
// 依存: npm i -D sharp tsx
import fs from "node:fs/promises";
import path from "node:path";
import sharp from "sharp";
const IN = process.env.IN ?? "heic";
const OUT = process.env.OUT ?? "output";
async function main() {
await fs.mkdir(OUT, { recursive: true });
const files = (await fs.readdir(IN)).filter(f => /\.(heic|heif)$/i.test(f));
for (const f of files) {
const src = path.join(IN, f);
const name = path.parse(f).name;
const base = sharp(src)
.rotate() // EXIF回転の適用
.toColourspace("srgb") // sRGBへ
.ensureAlpha() // 透明を安全に扱う
.removeAlpha() // 不要なら外す（容量削減）
// AVIF（写真の第一候補）
await base
.avif({ quality: 55, effort: 4, chromaSubsampling: "4:2:0" })
.toFile(path.join(OUT, name + ".avif"));
// WebP（互換と透明）
await base
.webp({ quality: 82 })
.toFile(path.join(OUT, name + ".webp"));
// JPEG（互換最強・メール/OGP向け）
await base
.jpeg({ quality: 80, mozjpeg: true, progressive: true })
.toFile(path.join(OUT, name + ".jpg"));
console.log("→", name);
}
}
main().catch(e => { console.error(e); process.exit(1); });3. Next.jsの配信設定
// next/image のフォーマット優先
// next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
images: { formats: ["image/avif", "image/webp"] }, // JPEGは自動フォールバック
};
export default nextConfig;4. 応用と使いどころ
- Live Photosの動画成分は別管理。静止画のみWeb配信。
- 背景透明が必要なら WebP lossless や AVIF alpha。
- HDR感の強い素材は HDR→LDR を先に。
5. 公開前チェック
6. まとめ
HEICをWebへは正規化→多形式出力→安全な配信の3ステップ。最初の整地さえ固めれば、以降の運用は安定します。