WindowsでWeb用画像を最適化する

リサイズファーストのワークフロー、フォーマット比較、レスポンシブバリエーション、視覚チェック、測定された納品まで、WindowsでWeb用画像を最適化します。

デザインエクスポートではなく、ネットワークリクエストから始めます。640ピクセルのカード内ではCSSによって縮小されているため、3000ピクセルの製品写真が正しく表示されていても、ブラウザは依然として大きなソースファイルを転送します。以下のWindowsワークフローでは、このミスマッチを見つけ、適切なバリエーションを作成し、デプロイ後にページをチェックします。

最もコストがかかる画像を見つける

Microsoft Edgeでページを開き、F12を押してNetworkを選択し、再読み込みしてImgでフィルターします。転送サイズでソートし、負荷の高いリクエストごとに以下の3つの事実を記録します。

ファイルのピクセル寸法
Elementsパネルでの表示幅
フォールド上にあるか、後で読み込まれるか

1200ピクセルで表示されるヒーロー画像には、高密度ディスプレイ用に1920ピクセルまたは2400ピクセルのソースが必要になる場合があります。元の6000ピクセルのカメラエクスポートが必要になることは稀です。360ピクセルで表示されるカードは、ヒーロー画像と同じファイルを要求すべきではありません。

Paintで1枚の画像をリサイズする

Paintは、1枚の過大なソースを修正するのに十分です。

画像を開き、Resize and skewを選択します。
Maintain aspect ratioを有効にしたままにします。
ファイルサイズから推測したパーセンテージではなく、必要なピクセル幅を入力します。
Save asを使用して、マスターファイルを変更せずに残します。

640ピクセルのカードの場合、800ピクセルの標準候補と1280ピクセルの高密度ディスプレイ用候補を作成します。リサイズ後に小さなテキストや製品の細いエッジを確認します。ソースに透明度が含まれている場合は、JPEGとして保存しないでください。

PowerToysでバッチリサイズする

Microsoft PowerToysには Image Resizer が含まれており、File Explorerにリサイズコマンドを追加します。サイトの実際のブレークポイントに一致する幅（480、960、1600ピクセルなど）を定義し、元のファイルを置き換えるのではなくコピーを作成します。

PowerToysは寸法に対して有用ですが、完全な配信パイプラインではありません。ファイル名付け、フォーマット変換、レスポンシブマークアップ、視覚的レビューも重要です。生成された候補を別のフォルダに配置し、ソースアートワークと混同されないようにします。

JPEG、PNG、WebP、AVIFから選択する

アセット	適切な配信フォーマット	注意深く確認する
製品または編集用写真	WebP、AVIF、またはJPEG	質感、グラデーション、肌色
小さなテキストを含むスクリーンショット	PNGまたは高品質のWebP	グリフのエッジと細い線
ロゴまたはアイコン	ソースがベクターの場合SVG	正しいview boxとアクセシブルなラベル
柔らかい影付き透明度	WebPまたはPNG	明るい背景と暗い背景でのハロー

すべてのPNGをJPEGに変換しないでください。透明度が失われ、テキストの周りにリングノイズが発生する可能性があります。JPEG写真をPNGに変換することも避けてください。通常、ファイルサイズが大きくなるだけで失われた詳細は復元されません。根本的なトレードオフについては、非可逆圧縮と可逆圧縮を参照してください。

レスポンシブ画像を正しく配信する

圧縮だけでは画像はレスポンシブになりません。幅の候補を提供し、ブラウザに選択させます。

<img
  src="product-960.webp"
  srcset="product-480.webp 480w, product-960.webp 960w, product-1600.webp 1600w"
  sizes="(max-width: 720px) 100vw, 50vw"
  width="960"
  height="640"
  alt="Black travel bag open to show the interior compartments"
>

Googleは image SEO guidance で、標準的な画像要素、有用なaltテキスト、レスポンシブ候補、およびフォールバックのsrcを推奨しています。widthとheightはレイアウトスペースを確保します。altテキストはキーワードのリストを繰り返すのではなく、画像の目的を記述すべきです。

Edgeで結果を検証する

デスクトップとモバイルの幅でキャッシュ無効化して再読み込みします。ブラウザが期待されるsrcset候補を選択しているか、ヒーローがレイアウトをずらしていないか、テキストが読みやすいかを確認します。その後、PageSpeed Insightsまたはフィールドデータを使用して、画像の変更が実際のページを改善したかどうかを判断します。GoogleはCore Web Vitalsをページ体験の一部として扱いますが、有用なコンテンツの代替ではありません。

未公開の製品画像の場合、公開まで変換をローカルで保持します。公開前のアセットをサードパーティサービスに送信する前に、 Windowsでオンライン圧縮ツールを使う際のプライバシーリスクを参照してください。

GetCompressがWebアセット準備に適する場合

PaintとPowerToysは、単発のリサイズには十分です。Windowsチームが、一貫した寸法、フォーマットバリエーション、視覚的レビューが必要な混合されたPNG、JPEG、HEIC、TIFF、その他のソースを繰り返し受け取る場合、GetCompressがより適しています。保存されたプリセットとバッチキューは、リポジトリやCMSに入る前にローカルの配信コピーを準備します。

GetCompressの役割は、レスポンシブマークアップ、CDN設定、キャッシング、パフォーマンス測定とは異なります。デプロイされたページをテストし、ソースマスターと生成されたWebアセットを別々に保持します。