あなたの画像はたぶん大きすぎる（修正方法はこちら）
ほとんどのウェブサイトが読み込みが遅いのは、最適化されていない画像のせい。数分の圧縮で読み込み時間が半分になります。
先週、友人の写真ポートフォリオサイトの監査をしました。美しい画像。素晴らしい作品。
ホームページの読み込みに12秒かかりました。
原因は？たった1枚のヒーロー画像が8MBだったこと。スマホの回線では、訪問者は何も見る前に離脱していました。
これは思っているより頻繁に起こります。では修正方法を話しましょう。
誰も気づかない問題
Photoshopやスマホから画像をエクスポートすると、通常必要以上にはるかに大きいです。カメラからの4000x3000の写真は15MBかもしれません。
ウェブサイトでは、200KBを超えるものが必要になることはめったにありません——時にはもっと少なく。
違いは重要です：
| 画像サイズ | 読み込み時間（3G） | 読み込み時間（4G） | |------------|-------------------|-------------------| | 5MB | 40秒以上 | 8秒 | | 500KB | 4秒 | 1秒未満 | | 100KB | 1秒未満 | 即座 |
その5MBの画像は遅いだけでなく、訪問者のデータプランも食い尽くしています。
ステップ1：まずリサイズ
何かを圧縮する前に、寸法を確認しましょう。
ウェブサイトで画像が800ピクセル幅で表示されるなら、4000ピクセルのオリジナルをアップロードする意味はありません。必要以上に5倍のデータを送信しています。
画像が表示される最大サイズを把握し（デスクトップで確認——通常は最大）、その幅にリサイズします。Retinaディスプレイ用に20%バッファを追加してもいいでしょう。
ステップ2：圧縮する
画像が適切なサイズになったら、圧縮しましょう。
現代の圧縮アルゴリズムは驚くほど優秀です。目に見える品質劣化なしに、ファイルサイズを60-80%削減できることがよくあります。本当です——ビフォーアフターを並べて違いを見つけてみてください。
知っておくべきこと：
JPEG品質80-85 が通常スイートスポット。70以下だとアーティファクトが見え始めます。90以上は、目に見えない改善のためにバイトを無駄にしています。
PNG はロスレスなので、圧縮が少ないです。でもメタデータを削除してエンコーディングを最適化するために、圧縮ツールに通す価値はあります。
WebP は両方の良いとこ取り——JPEGより小さなファイルで、PNGのような透明度サポート。今ではほとんどのブラウザがサポートしています。
ステップ3：適切なフォーマットを選ぶ
これは人々が思っている以上に重要です。
JPEGを使う場合：
- 写真
- 多くの色とグラデーションがある画像
- 背景
PNGを使う場合：
- ロゴ
- アイコン
- スクリーンショット
- 透明度が必要なもの
WebPを使う場合：
- すべて、オーディエンスがモダンブラウザを使っているなら
- 古いブラウザ向けにはJPEG/PNGにフォールバック
SVGを使う場合：
- シンプルなグラフィック
- アイコン
- ロゴ（ベクターファイルがあれば）
- 無限に拡大縮小する必要があるもの
実際の数値
友人のポートフォリオを最適化した結果がこちら：
| Before | After | |--------|-------| | ヒーロー画像: 8MB | ヒーロー画像: 180KB | | サムネイルグリッド: 合計12MB | サムネイルグリッド: 合計400KB | | ページ読み込み: 12秒 | ページ読み込み: 1.8秒 |
同じ画像。同じ視覚品質。ただ適切に最適化しただけ。
手抜きする方法
WordPress、Squarespace、または類似のプラットフォームにアップロードする場合、多くは自動的に画像を圧縮します。でも「多くは」は「常に」ではないし、圧縮が十分に積極的とは限りません。
より良いアプローチ：アップロード前に最適化。品質をコントロールでき、プラットフォームが何をするか決めるのに依存しません。
1画像あたり2分かかります。訪問者は感謝するでしょう——あなたのサイトが速く感じる理由を知らなくても。
クイックチェックリスト
画像をアップロードする前に：
- 適切なサイズか？ 800px必要なのに4000pxをアップロードしない
- 圧縮されているか？ 圧縮ツールに通す
- 適切なフォーマットか？ 写真はJPEG、グラフィックはPNG、可能ならWebP
- テストしたか？ 最終版を見る。悪く見えるなら、圧縮を弱める
ウェブサイトの速度はほとんど画像次第です。画像を修正すれば、パフォーマンス問題の半分を修正したことになります。他はすべて周辺の最適化です。
最大の画像から始めましょう。通常はヒーローバナーや全幅写真です。それらが最小の労力で最大の成果をもたらします。