gazou-compressor.jp

印刷用画像解像度再サンプリング

Web向けに “とりあえず大きく” 出力された 4K / 8K 画像を、そのまま印刷入稿すると 過剰dpi (無駄画素) によって RIP / 転送 / ストレージコストが跳ね上がります。目的用途に対し 必要十分な画素 を数式で逆算し、統一ルールで縮小することで再現性と軽量性を両立できます。

要点
  • “用途 × 寸法” → 必要dpi → px逆算 の順に決定し感覚判断を排除。
  • 130% 超えは縮小候補、90% 未満は再取得検討。
  • Lanczos3 → 軽度シャープ (半径ではなく sigma 指定) が破綻少なく安定。
  • ICC を sRGB に正規化し差異レビュー、EXIF/不要メタは strip。
  • JSON ログで監査可能に(再入稿差分/逸脱追跡)。

1. 用途別 dpi 基準

2. 必要ピクセル計算

// 必要ピクセル計算 (TypeScript例)
function requiredPixels(mm: number, dpi: number) {
  return Math.round((mm / 25.4) * dpi);
}
const widthPx = requiredPixels(120, 300); // 120mm 幅の写真を 300dpi で
const heightPx = requiredPixels(80, 300);
console.log(widthPx, heightPx);

計算値に ±5% のバッファを持たせると軽微なレイアウト拡大でも再サンプリング不要になります。

3. 過剰dpi 判定と縮小

# ImageMagick で過剰dpi縮小 + 軽度シャープ
magick input.png -resize 2400x1600 -unsharp 0x0.5+0.7+0 output.png

# 余白トリム (印刷面積を無駄にしない)
magick output.png -trim +repage trimmed.png

縮小後に軽度シャープを行う順序で “先にノイズを圧縮させてからエッジ補正” できます。過剰シャープは網点化時にエッジ倍加を招くため sigma を 0.5〜0.8 程度に抑制。

4. Node パイプライン例 (Sharp)

// Sharp (Node) で再サンプリング + メタ除去
import sharp from 'sharp';
await sharp('input.jpg')
  .resize({ width: 2400, height: 1600, fit: 'cover', kernel: sharp.kernel.lanczos3 })
  .sharpen({ sigma: 0.7 })
  .withMetadata({ icc: 'sRGB.icc' })
  .toFormat('jpeg', { quality: 88, mozjpeg: true })
  .toFile('print-ready.jpg');

JPEG 品質は 85±3 が多くのケースで“視覚的損失 vs ノイズ” の均衡。大量バッチは コスト最適化 の観点も参照。

5. 品質確認観点

6. JSON ログと監査

# チェックリスト (passed:true/false)
{
  "dimension": { "needPx": 2400, "actual": 2380, "ratio": 0.99 },
  "dpiClass": "photo",
  "icc": "sRGB",
  "exifStripped": true,
  "sharpPass": true,
  "banding": false
}

生成したログを CI で収集し、閾値逸脱(dimension ratio / ICC 不一致 / バンディング検知)を Pull Request コメントで警告すると再現性が飛躍的に高まります。

7. 公開前チェック

8. まとめ

感覚的な “大きめで” を排し “式としきい値” へ置き換えることで、印刷向け画像は軽量・安定・再現性を獲得します。次は PNG→AVIF移行 と組み合わせアセット全体の最適化を進めてください。

FAQ

FAQ(よくある質問)

1画像形式の基本方針は?(写真/スクショ/透過)
写真は AVIF / WebP(画質80–85%目安)、UIやスクショはPNG / WebP Lossless、単色ロゴはSVGが基本です。 実装の詳細は srcset/sizes設計ガイド スクショ最適化 を参照してください。
2圧縮しても画質を落とさないコツは?
実表示幅に合わせたリサイズ → 過大ダウンロードを防ぎ、srcset/sizes を 実描画幅に一致させます。画質は写真で 80–85% を起点に、ノイズやエッジを目視確認。 仕上げは /compare で Before/After を見比べるのがおすすめです。
3CLSを悪化させない画像の置き方は?
すべての画像に width/height(または親に aspect-ratio)を与え、広告・埋め込みは 予約サイズを先に確保します。詳しくは CLSゼロ設計ガイド を参照。
公開日: 2025-09-07編集: gazou-compressor.jp

gazou-compressor.jp 編集部

画像圧縮・変換・背景除去などの実践テクニックと、Webで“速く・軽く・崩さない”ためのノウハウを発信しています。

関連記事

トピック/更新日の近いコンテンツ