画像はウェブサイトコンテンツの重要な一部ですが、速度を低下させる「ナンバーワンキラー」でもあります。最適化されていない高解像度の画像（例えば5MB）は、ページの読み込み時間を3～5秒増加させる可能性があり、直接的にユーザーの忍耐力を失わせます。画像の最適化は簡単で、「圧縮サイズ」と「遅延読み込み」という2つの核となる手段によって、50%以上の画像の読み込み時間を短縮できるのが良い点です。このセクションでは、プラグインを使用して、専門知識がなくても初心者でも扱える完全自動の最適化を実現します。
なぜ写真は最適化されなければならないのか 3つの確かなデータ
- 画像は通常、ウェブサイトの総ローディング量の60%-80%を占めています（テキストやコードなどの他のコンテンツよりもはるかに多い）。
- 読み込み時間が1秒増えるごとに、ユーザーの解約率は20%増加する（特にモバイルユーザーはスピードに敏感）。
- 最適化されていない画像は、Google PageSpeedのスコアを直接低下させます（SEOランキングに影響）。
中核目標50%-80%は、画質を損なうことなく画像サイズを圧縮し、ファーストスクリーン以外の画像を「オンデマンドで読み込む」ことができます。
II.方法1：画像圧縮（プラグインによる自動容量削減）
画像圧縮の原理は、冗長なデータ（撮影デバイス情報、表示されないピクセルの詳細など）を削除する一方で、肉眼で見たときの画質は基本的に変更しないことです。完全自動圧縮には、既存画像のバッチ処理と新規アップロード画像の自動圧縮をサポートする "Smush" プラグインをお勧めします。
ステップ1: Smushプラグインのインストールと有効化
- WordPressのバックエンドにログインし、「プラグイン → プラグインのインストール」に進みます。
- Smush」を検索し、「Developed by WPMU DEV」と表示されたプラグインを見つけ、「インストール」→「有効化」をクリックします。
ステップ 2: 自動圧縮の設定 (新しい画像には手動処理は不要)
有効化後、プラグインは自動的に設定ページにジャンプしますので、以下のように設定してください：
- 自動圧縮を有効にする設定 "タブで、"新しくアップロードされた画像を自動的に圧縮する "がチェックされていることを確認します（デフォルトではチェックされています）。
- 圧縮モードの選択：
- ロスレス圧縮」（デフォルトのオプション）は初心者にお勧め：冗長なデータのみが削除され、画質の損失はなく、圧縮率は約30%～50%。
- より高い圧縮率をお探しの場合（画像サイズがまだ大きすぎる場合など）、"非可逆圧縮 "を選択することができます：わずかな画質の低下（肉眼ではほとんどわかりません）、最大60%-80%の圧縮率（"詳細設定 "をクリックしてオンにする必要があります）。
- 設定の保存ページ下部の「設定を保存」をクリックします。
ステップ3：既存画像のバッチ圧縮（1回の操作で、ネットワーク全体の最適化）
ウェブサイトにすでに多数の非圧縮画像（過去にアップロードされた記事画像など）がある場合は、「バッチ圧縮」機能を使ってワンクリックで最適化できます：
- Smushプラグインのページで、左側の「Batch Smush」タブをクリックします。
- Start Now "をクリックすると、プラグインが自動的にメディアライブラリ内のすべての画像をスキャンします。
- スキャン後、"XX画像にSmushを適用 "をクリックすると、システムはバッチ圧縮を行います（プロセスには数分かかる場合があります。）
- 圧縮結果を見る：压缩完成后，会显示「总节省空间」（如「已节省 12MB」），每张图片的压缩前后体积对比也会列出。
方法2：遅延ロード（画像を「オンデマンドでロード」させる）
レイジー・ロードの原則はこうだ：画像は、ユーザーが画像位置までスクロールしたときにのみ読み込みを開始します。こうすることで、最初の画面（ページを開いたときに最初に表示される領域）が最初に読み込まれるようになります。こうすることで、最初の画面（ページを開いたときに最初に表示される領域）の画像が最初に読み込まれ、最初の画面以外の画像（以下の記事画像やフッター画像など）は当面読み込まれないため、初期読み込み時間が大幅に短縮されます。
Smushプラグインを使用してワンクリックで遅延ロードを有効にする（追加のプラグインは必要ありません）
Smushには遅延ローディングが組み込まれており、設定ステップのある別のプラグインをインストールする必要はありません：
- Smushプラグインのページで、左側の「Delayed Loading」タブをクリックします。
- Enable Delayed Loading（遅延ロードを有効にする）」にチェックを入れ、以下の推奨に従って設定する：
- 「画像読み込み遅延タイプ」：すべて選択（画像、アバター、サムネイルなど）。
- "Exclude first-screen images"（ファーストスクリーンの画像を除外する）：チェックを入れることをお勧めします（ユーザーがページを開いたときにコアコンテンツを素早く見ることができるように、ファーストスクリーンの画像は遅延されません）。
- "Load Animation"：デフォルトのままにしておきます（画像が読み込まれていることをユーザーに知らせるために、わずかなアニメーションを表示します）。
- Save Settings "をクリックすると、遅延ロードが即座に有効になります。
遅延ロードが有効であることを確認する
- ウェブサイトの任意の記事ページ（複数の画像を含む）を開き、F12キーを押してブラウザの「開発者ツール」を開く。
- Web'タブをクリックしてページを更新し、画像が読み込まれるのを見る：
- 初期読み込み時には、最初の画面イメージのみが「ネットワーク」リストに表示されます。
- ページを下にスクロールすると、ファーストスクリーン以外の画像が表示されたときにのみ、これらの画像のロード記録が「ネットワーク」リストに表示され、遅延ロードが有効であることを示します。
四、新手必知的图片优化额外技巧
1.適切な画像フォーマットを選ぶ（圧縮よりも基本的なこと）
画像をアップロードする前に適切なフォーマットを選択することで、ソースでのサイズを小さくすることができます：
- 写真 / 複雑なイメージWebPフォーマット(JPGより30%-50%小さく、画質が良い)の場合、Smushプラグインは自動的にJPG/PNGをWebPに変換することができます(「詳細設定」で「WebPに自動変換」をオンにしてください)。
- シンプルなグラフィック / アイコンJPGは避け、PNGフォーマット（背景透過、小サイズ）を使用してください。
- BMP、TIFF形式は絶対に使用しないでください。これらのフォーマットは巨大で、ウェブでの使用には適していません。
2.画像サイズのコントロール（「大きな画像の縮小表示」は使わない）
多くの初心者は、カメラで撮影した高解像度の画像（例えば3000×2000ピクセル）を直接アップロードし、ワードプレス経由で300×200ピクセルとして表示するように設定しますが、これは間違っています！なぜなら、ブラウザは元の大きな画像を読み込んだままなので、帯域幅と時間を浪費してしまうからです。
ライトアプローチ：
- 上传前用图片工具（如电脑自带的「画图」、在线工具「Canva」）将图片尺寸裁剪为实际显示尺寸（如首屏横幅图宽 1200 像素即可）。
- 画像ツールの使い方がわからない場合は、プラグイン「Imsanity」をインストールすると、アップロードされた大きな画像を指定サイズ（最大幅1200ピクセルなど）に自動圧縮することができます。
3.画像の誤用を避ける（多ければ良いというものではない）
- 言葉で説明できること（簡単なステップ・バイ・ステップの説明など）には絵を使わない。
- 複数の連続した画像を1つの回転画像（商品ディスプレイなど）に合成することができ、同時に読み込む画像の数を減らすことができる。
V. よくある問題解決
1.圧縮後、画質は著しく劣化しますか？
- ロッシー圧縮」を使用している場合は、Smushの設定で圧縮強度を下げることができます（「詳細設定」→「圧縮強度」を50%に）。
- サイズと画質のバランスを取るために、「ロスレス圧縮」＋「WebPフォーマット」を使用することをお勧めします。
2.読み込みが遅れると画像が異常に表示される（空白、位置ずれなど）？
- 最初のスクリーン画像が除外されていることを確認します（除外に失敗すると、最初のスクリーン画像の読み込みが遅れ、短いブランクが生じることがあります）。
- 一部の画像をすぐに読み込む必要がある場合、Smushの「遅延読み込み」設定の「除外」ボックスに画像のCSSクラス名を入力することができます（簡単なコードの知識が必要ですが、初心者は画像のあるページで遅延読み込みを一時的に無効にすることができます）。
3.最適化後に大幅なスピードアップがない？
- GTmetrixで再試験する。 ウェブサイトの速度をチェックするツール)、「ウォーターフォールチャート」を確認し、画像の読み込み時間が短縮されているかどうかを確認する。
- それでも遅い場合は、他の要因（サーバーのレスポンスが遅い、プラグインが多すぎるなど）が考えられますので、その後の最適化方法（キャッシュの有効化など）と組み合わせる必要があります。
短い
画像の最適化は、サイト速度の最適化において最もROIの高い作業です。Smushプラグインを使用すれば、設定に10分かかるだけで、画像の読み込み時間を50%以上短縮することができます。主な手順は、Smushのインストール→自動圧縮とバッチ圧縮の有効化→遅延読み込みの有効化（最初の画面の画像を除外）です。
究極の圧縮率を追求したり、超高解像度の画像をアップロードしたりする必要はなく、ユーザーがコンテンツを見ることができ、同時に素早く読み込むことができるように、画質と速度のバランスを見つけるのがベストです。
日本語