CIでの LQIP/BlurHash/SVG プレースホルダ自動生成パイプライン
LQIP/BlurHash/Tiny SVG を手動でコミットしていると 漏れと劣化の放置 が発生します。CI による差分検知と自動再生成で再現性とコストを最適化します。
要約
- git diff → 変更画像バッチ分割 (並列)
- 各バッチで LQIP / BlurHash / SVG 生成
- artifact or branch に集約 → deploy フェーズで pull
1. アーキテクチャ概要
変更検知層 / 生成層 / キャッシュ層 / 提供層 の4段に分割します。生成物は本番リポジトリへ直コミットしない方式が 履歴肥大防止 に有効です。
| 層 | 役割 | 主な失敗パターン |
|---|---|---|
| 変更検知 | 差分抽出・再生成判定 | 追跡漏れ / rename検出失敗 |
| 生成 | 並列バッチ処理 | CPU過負荷 / OOM |
| キャッシュ | ハッシュ+パラメータ一致 | 過剰ミスヒット |
| 提供 | artifact集約/配信 | サイズ肥大 |
2. 処理フロー (HowTo)
- 変更画像リストを抽出（rename 差分含む）
- バッチ分割（例: 4並列）
- LQIP/BlurHash/SVG 生成 + メタ記録
- キャッシュ判定 → ヒットはスキップ
- artifact に集約 / ブランチへ push
3. 実装断片
3.1 Job Matrix
# matrix (GitHub Actions) — changed images batched
jobs:
placeholders:
runs-on: ubuntu-latest
strategy:
fail-fast: false
matrix:
batch: [0,1,2,3]
steps:
- uses: actions/checkout@v4
- name: Detect changed images
run: |
node scripts/list-changed-images.js > changed.txt
node scripts/split-batch.js changed.txt $MATRIX_BATCH 4 > targets.txt
- name: Generate placeholders
run: node scripts/gen-placeholders.js --input targets.txt --out out/
- name: Upload artifact
uses: actions/upload-artifact@v4
with:
name: placeholders-$MATRIX_BATCH
path: out/
3.2 生成スクリプト
// gen-placeholders.js (simplified)
for (const file of targetFiles){
const lqip = await buildLqip(file, { width: 32 });
const blur = encodeBlurHash(await loadPixels(file), 4, 3);
const svg = await buildTinySvg(file, { polygons: 24 });
db.push({ file, lqip, blur, svg });
}
await fs.promises.writeFile('out/meta.json', JSON.stringify(db));3.3 キャッシュ設定
# actions/cache — toolchain & prior results
- uses: actions/cache@v4
with:
path: .cache/placeholders
key: placeholders-<HASH_OF_PACKAGE_LOCK>
restore-keys: |
placeholders-
3.4 PR コメント組立
// PR コメント用: changed placeholder preview
for (const item of changed){
md += '### ' + item.file + '
';
md += 'LQIP:  BlurHash: `' + item.blur + '` SVG: <img src="' + item.svg + '" width="80" />
';
}
postComment(md);3.5 差分ハッシュ無効化
# hash & param based invalidation (pseudo)
BASE64=$(sha256sum "$IMG" "$PARAMS_JSON")
if grep -q "$BASE64" meta-index.tsv; then
echo "cache-hit"; exit 0
fi
# ... generate ...
echo "$BASE64 $IMG" >> meta-index.tsv4. キャッシュ戦略の深掘り
パラメータ (幅/アルゴリズム/多角形数) と入力ファイルハッシュをキー化。ヒット率が低下したらパラメータ変更/閾値を検討します。
5. レビューUX改善
PRコメントに プレースホルダ生成ツール の URL を埋め、 preview=hash で即比較できるリンクを用意するとレビュー効率が上がります。
6. FAQ
- SVG多角形数は? → 16〜32 で視覚/サイズバランス良好
- BlurHash サイズは? → 4x3 か 5x4 で十分。倍増はサイズ効率悪化
7. まとめ
差分検知→並列生成→キャッシュ→アーティファクト集約 の4要素を押さえればプレースホルダ生成は完全自動化できます。手動メンテを減らし品質議論へシフトしましょう。