コンテンツへ移動

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

リサイズを先に行うワークフロー、フォーマット比較、レスポンシブなバリエーション、視覚チェック、そして計測された納品まで。MacでWeb用画像を最適化します。

マーケティングサイトのスコアは画像重量を除くすべての項目で良好です。ヒーロー画像は幅2800pxのPNG、インライン写真はフル解像度のカメラJPEG、CDNはすべてのバイトを忠実にキャッシュしています。レイアウト幅にリサイズし、適切なフォーマットを選択し、デプロイ前に品質を調整することでWeb用画像を最適化します。

Web画像が遅く感じられる理由

ブラウザはCSSで表示サイズを縮小しても、フルファイルのバイト数をダウンロードします。大きなソースファイルはLCP、モバイルデータ通信量、CMSのアップロード制限に悪影響を与えます。

問題一般的な原因
重いヒーローCSS幅の2倍を超えるPNGまたはJPEG
Retinaでぼやけるソースが小さすぎる（大きすぎるのではない）
誤ったフォーマット写真がロスレスPNGとして保存されている
フォールバックなしJPEGのバックアップなしでWebPのみ

Macで画像を圧縮する方法 の表示サイズルールから始めます。フォーマット変換のたびに必ずリサイズしてください。

Web向けのフォーマット選択

スタックのコンテンツとブラウザサポートに合わせてフォーマットを選択します。

コンテンツ主要フォーマットフォールバック
写真ヒーローWebP 非可逆JPEG
透明なUIPNG またはロスレスWebPPNG
アイコン風のフラットアートベクターソースがある場合はSVGPNG
メール埋め込みJPEGN/A

すべての写真をロスレスエンコードする前に、 非可逆とロスレス圧縮 をお読みください。適切なリサイズ後、ヒーロー画像には品質80〜85のWebPまたはJPEGで通常十分です。

PNGからWebPへの変換については、 MacでPNGをWebPに変換 をご覧ください。<picture>タグまたは静的サイトジェネレータの設定にJPEGのフォールバックを保持します。

サイズ、品質、レスポンシブな納品

高DPI画面には、CSSカラム幅の約2倍の幅でエクスポートします。

CSS表示幅エクスポート幅の目安
960px ヒーロー1600〜1920px
720px コンテンツカラム1440px
400px カード800px
フルブリード1280レイアウトアートが必要な場合最大2560px

リサイズ後の品質ガイドライン：

  • 写真ヒーロー：WebPまたはJPEG 品質80〜85
  • インラインブログ写真：75〜82
  • テキスト付きスクリーンショット：100%ズームで確認し、PNGまたは高品質のWebPを優先

HTMLのレスポンシブ画像は複数の幅を持つsrcsetを使用します。ビルドパイプラインが対応している場合、1つのマスターエクスポートから1xと2xのバリエーションを生成します。

Googleの 画像SEOガイド は、標準的な画像要素、フォールバックsrc付きのレスポンシブ候補、説明的なファイル名、有用なaltテキストを推奨しています。圧縮は配信を助けますが、クロール可能なマークアップや画像の正確な説明に代わるものではありません。

遅延読み込みは知覚速度を向上させますが、すべての訪問者が記事全体をスクロールする場合、ダウンロードされる総バイト数は減少しません。画像が画面外に読み込まれていても、モバイルのデータ容量制限やCDN請求書には小さなソースファイルが依然として重要です。

ヒーローを置き換えた後、ブラウザのデベロッパーツールでスロットルされた4Gプロファイルで1ページをテストします。幅がレイアウトに合っている場合、典型的なブログのインライン写真でネットワークウォーターフォールは200KB未満の値を示すはずです。

Macでのエクスポートワークフロー

一貫したローカルワークフローは、その場限りのアップロードよりも優れています：

  1. モニターキャプチャサイズではなく、レイアウト幅でデザインからエクスポートします。
  2. 書き出した画像が大きすぎる場合は、プレビューでサイズを変更します（ツール → サイズを調整…）。
  3. Terminalでcwebpを使用してヒーローをWebPに変換します：
brew install webp
cwebp -q 82 -m 6 hero.png -o hero.webp
  1. 同じリサイズ済みPNGソースから、対応するJPEGフォールバックをエクスポートします。
  2. マージ前にブラウザのデベロッパーツールネットワークパネルでスポットチェックします。

リサイズ後のoxipngは、PNGのままにする必要がある透明なPNGアセットに役立ちます：

oxipng -o 4 --strip safe icon.png

リポジトリに幅、品質、フォーマットルールを文書化し、次のキャンペーンで3倍のアートボードエクスポートに戻らないようにします。

ステージング用アセットのローカル処理

未公開のヒーロー、価格スクリーンショット、ベータUIは、リリースまでディスク上に保存されます。オンライン最適化ツールは、アップロード時にフル解像度のソースを受け取ります。

第三者のアップロードが機密性の高いクリエイティブに与える影響については、 オンラインファイル圧縮ツールは安全か をご覧ください。ローカルアプリとTerminalツールは、ファイルを圧縮ウェブサイトへ送信せずに処理できます。

GPSタグが公開ページ向けでない場合、写真ヒーローから位置情報EXIFを削除します。メタデータの削除はバイト最適化とは別のステップですが、プライバシーにとって重要です。

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

プレビュー、cwebp、またはビルドプラグインは、 単発のアセットには十分です。デザインチームがエンジニアリングに一貫した幅、プレビュー、Webフォーマットバリエーションが必要なPNG、JPEG、HEIC、その他のソースを繰り返し渡す場合、GetCompressがより適しています。プリセットとバッチキューは、それらのファイルをビルドに入る前にローカルで準備します。

レスポンシブ画像のマークアップ、CDN、キャッシュはサイト側で設定し、公開後のページで性能を測定してください。元のマスターと生成したWeb用画像は別々に保管します。

関連投稿