Web開発者向け画像・動画圧縮

レスポンシブ配信や視覚品質を損なうことなく、ページ重量を改善するPNG、JPEG、WebP、AVIF、MP4、WebMのアセットパイプラインを構築します。

マーケティングチームが4 MBのPNGヒーロー画像をリポジトリにコミットしました。LighthouseがLCPを警告します。また、自動再生するMP4背景がモバイルの読み込みに2秒を追加しました。オンラインの最適化ツールを実行して、ファイルがどこに保存されたのか迷った経験もあるでしょう。

フロントエンドのパフォーマンスは、アセットがpublic/やCDNに到達する前に、適切な寸法、フォーマット、読み込み動作を選択することから始まります。圧縮だけでは、間違ったピクセルを送信したり、画面外のメディアを先読みしたりするオーバーヘッドを補うことはできません。

最適化されていないメディアがページ読み込みとCore Web Vitalsに与える影響

大きなヒーロー画像や最適化されていない動画のポスターは、Largest Contentful Paintと総バイト数に直接影響します。圧縮されていないアセットがいくつかあるだけで、慎重に実装したコード分割の効果が相殺されることもあります。

エンコード前に過大なソースをリサイズし、代表的なアセットセットに対してフォーマットを比較します。結果は透明度、テクスチャ、テキスト、ブラウザのサポート、レスポンシブ配信に依存し、すべてのPNG、JPEG、動画に適用できる責任ある数値目標パーセンテージは存在しません。

モダンなWeb配信向けの画像・動画フォーマット

現代のサイトは静止画と動画アセットを混合して使用します。

画像: UI、マーケティング、OG画像用のPNG、JPEG、WebP、AVIF、SVG、HEIC、GIF。
動画: 背景、製品デモ、ドキュメント用のMP4、WebM、MOV。
PDF: 埋め込みスクリーンショット付きのダウンロード可能なガイドと仕様書。

デザイン引き継ぎで1つのフォーマットしか提供されていない場合、1つのツールでPNGマスターからWebPまたはAVIFのバリエーションを生成できます。ヒーローJPEGセット、自動再生MP4ループ、OG画像PNGファイルは同じスプリントで納品されることが多く、マージ前に一括処理することで、Lighthouseスコアがプレースホルダーのエクスポートではなく実際のプロダクション重量を反映するようにします。

本番用アセットの可逆圧縮と非可逆圧縮の選択

フラットな色と小さなテキストを含むUIスクリーンショットには、ほぼ非可逆または非可逆の出力が必要です。マーケティングの写真やBロールには、大きなバイト削減が可能な非可逆圧縮を使用できます。public/内のファイルを置き換える前に、アセットタイプごとの実践的な分割については可逆圧縮と非可逆圧縮を参照してください。

画像が中心のページでは、 MacでWeb用に画像を最適化するで、リサイズファーストのワークフロー、WebP、AVIF、PNGのパスを紹介しています。これらはコンポーネントライブラリや静的サイトリポジトリに直接対応します。WordPressや他のCMSビルドでも同じローカル準備が可能です。アセットがメディアライブラリに到達する前に、 MacでWordPressの画像を最適化するを参照してください。非可逆マスターはデザインリポジトリに保管し、非可逆またはモダンフォーマットのバリエーションを生産環境に送信します。

視覚品質を損なわずにアセットを圧縮する

非可逆圧縮は写真には適していますが、UIスクリーンショットには非可逆またはほぼ非可逆の設定が必要な場合があります。本番ファイルを更新する前に、1:1のズームで出力をプレビューします。

アセットタイプごとにプリセットを保存します。写真ギャラリーには積極的な設定、フラットな色とテキストを含むUIキャプチャには保守的な設定。Retina対応のヒーロー画像には2倍ズームでプレビューし、高DPIのラップトップでも圧縮アーティファクトが目立たないようにします。

動画コーデックとWeb配信のトレードオフ

マーケティングページでは、自動再生背景のMP4ファイルと製品デモのループが動画のバイト数を支配しています。幅広いブラウザサポートのため、MP4内のH.264が最も安全なデフォルトです。アナリティクスでサポートブラウザからのトラフィックが大半を占めている場合、H.265やVP9、AV1を含むWebMでファイルをさらに縮小できます。すべてのヒーロー動画に単一の出力プリセットを選択する前に、 H.264とH.265コーデックを読んでください。

ミュートされたループ背景には、 MacでWeb用に動画を最適化するを参照し、モバイルのページ重量を増やしすぎずに滑らかな動きを保つためのビットレートと寸法のターゲットを確認してください。ループのハンドルをプレビューでトリミングし、5秒の背景クリップに10秒分の重複フレームが含まれないようにします。

リリースワークフローにメディアチェックを組み込む

コンポーネントごとにサイズ予算を定義し、アセットがそれを明らかに超えている場合はレビューで失敗します。生成されたアセットをデザインマスターとは別に保存し、作成に使用されたコマンドまたはプリセットを記録します。これにより、重いヒーロー画像の回帰がデプロイ後ではなくプルリクエストで可視化されます。

リリースチェックには、固有の寸法、レスポンシブ候補、読み込み優先度、altテキスト、ポスター画像、コーデックサポート、実際の転送サイズが含まれます。圧縮はこのチェックリストの1行に過ぎません。

チームがすでに使用しているデザインドロップディレクトリにフォルダ監視を向けます。新しいPNGとMP4のエクスポートは、誰かがコミットする前に圧縮されるため、PRレビューでは4 MBのアイコンのような予期せぬサイズではなく、レイアウトの問題が検出されます。

アセットに加えてデプロイされた体験をテストする

最適化されたファイルでも、配信方法が悪ければ意味がありません。本番パスを検証します。

正確な幅または密度記述子と有用なsizes属性を使用して、レスポンシブ画像候補を配信します。
固有の幅と高さを設定するか、アスペクト比を指定して、メディアがレイアウトシフトを引き起こさないようにします。
初期HTML内でLCP画像を見つけやすくし、画面内の候補を先読みロードしないようにします。
画面外のメディアを先読みロードし、ユーザーが見る前に開始される自動再生動画のダウンロードを避けます。
動画にはポスターを使用し、完全にミュートされた装飾的なループからは音声を削除し、モーション軽減の動作をテストします。
スロットルされたモバイルプロファイルで、転送バイト数、選択されたレスポンシブ候補、キャッシュヘッダー、CDN変換、LCP、CLSを確認します。

自動スコアは診断ツールであり、視覚的QAの代わりにはなりません。実際のデバイスでテキスト、グラデーション、透明な縁、動きを比較します。ソースアセットを生成出力ディレクトリの外に保管し、将来のフォーマットやブレークポイントの変更が、すでに圧縮された派生ファイルではなく、クリーンなマスターから始まるようにします。

GetCompressがWebアセットパイプラインに適合する場合

ビルドツール、レスポンシブマークアップ、CDNは、ブラウザに適切なアセットを配信する責任を負います。デザインチームがPNG、JPEG、WebP、AVIF、MP4、WebMのソースを混合して納品する場合、GetCompressはそのパイプラインの直前に配置するのが最適です。一括プリセットとフォルダ監視により、ステージングUIを公開せずにローカルバリエーションを準備します。GetCompressの役割は、srcset、キャッシング、読み込み戦略、パフォーマンス測定とは異なります。それらのシステムが入力するアセットを標準化するものです。