Jetpack Boost：画像パフォーマンスガイド
最終更新日：
サイトのページや投稿で使用している画像を適切なサイズにするには、Jetpack Boostの画像パフォーマンスガイドを利用します。
画像パフォーマンスガイドを使用する
画像パフォーマンスガイドは、サイト上の画像に推奨されるサイズを計算します。サイズが大きすぎる画像のサイズを変更すると、ファイルサイズを削減し、ページの読み込みを速くできます。
画像パフォーマンスガイドを使用するには：
- WordPress管理画面でJetpack → ブーストを開きます。
- 「速度を最適化」の画像セクションを展開します。
- 「画像ガイドを有効化」トグルをオンにします。
- ログインした状態でサイトにアクセスしてください。画像パフォーマンスガイドが各画像にインジケーターを表示します。
- インジケーターにカーソルを合わせると、画像に関する次の詳細が表示されます：
- 画像名：画像名を選択すると、新しいタブで画像が開きます。
- 画像ファイルのサイズ：画像ファイルの実際のサイズです。
- 予想されるサイズ：現在のデバイスでの画像の推奨サイズです。
- 画面上のサイズ：画像が表示されるサイズです。
- 画像サイズ：画像ファイルのサイズです。
- 削減可能なサイズ：画像のサイズを予想されるサイズに変更することで削減できるファイルサイズです。
さまざまなデバイスと設定で画像パフォーマンスガイドをテストする
画像パフォーマンスガイドには、現在のデバイスで画像がどのように表示されるかについての情報が表示されます。ユーザーがどのような方法でサイトを閲覧しても効率的に配信できるよう、いくつかの異なる種類のデバイスからサイトをテストすることをおすすめします。
デバイスによってピクセル密度は異なります。ピクセル密度とは、画面上の一定の領域に表示されるピクセル数を表す指標です。特定のサイズで画像を表示する際に画面上で使用されるピクセル数に影響することがあります。
画像パフォーマンスガイドでは、現在のデバイスに画像がどの程度適しているかを確認できます。そのため、パソコンやスマートフォンなど複数のデバイスでテストし、異なる画面で画像がどの程度最適化されているかをより正確に把握することをおすすめします。
ウェブページを拡大または縮小すると、ブラウザーのピクセル密度にも影響し、それによって画像パフォーマンスガイドの結果も変わります。ブラウザーの標準ズームレベルでこの機能を使用することをおすすめします。
画像パフォーマンスガイドは、目立たないように小さなインジケーターで関連情報を表示します。小さい画像の場合は、代わりにオーバーレイの吹き出しが小さな点として表示されます。
画像パフォーマンスガイドを一時停止
画像パフォーマンスガイドが有効になっている場合、WordPress管理バーから一時停止または再開できます。
管理バーで画像ガイド：有効を選択すると、ガイドを一時停止できます。同じコントロールで再度有効にできます。
Boost画像ガイドはページビルダーでは動作しません
一部のページビルダーでは、iframeを使用してコンテンツを表示するため、画像ガイドの詳細が管理画面に表示されます。快適に利用できるよう、ページビルダーの使用時は画像ガイドを無効にしています。
サイト上の画像を最適化する方法
画像のサイズを最適化すると、サイト全体のパフォーマンスを向上させ、サイトのページをより効率的に読み込めるようになります。
Jetpack Boostは独自のサーバーにホストされている画像を最適化できませんが、Jetpack Image CDNをJetpack > Boostで有効にすると、代わりにJetpackのサーバーから最適化された画像を配信できます。Image CDNについて詳しくは、Site Acceleratorガイドをご覧ください。画像の品質をより細かく制御し、画像の最適化を強化するには、Jetpack BoostにアップグレードするかJetpack Completeに登録することをご検討ください。
サイト上の画像を最適化するための方法をいくつかご紹介します。
メディアライブラリにアップロードする前に
メディアライブラリにアップロードする前に、画像を最適化する方法はいくつかあります。
- サイズ変更：アップロードする画像のサイズが、使用方法に対して十分であることを確認します。たとえば、最大800px×800pxで画像を使用する場合は、そのサイズで画像をアップロードします。
- ファイル形式：これは画像の用途によって異なります。
- JPG：すばやく読み込め、透明な背景を必要とせず、画像に多くの細部が必要ない場合は、JPGの使用がおすすめです。ギャラリーで使用する写真や、非常に高品質な画像が必要ないその他の用途に適しています。
- PNG：透明な背景があり、非常に高品質である必要がある画像には、PNGの使用がおすすめです。ロゴや、商品画像など、ユーザーが細部まで確認する可能性がある画像に適しています。
Jetpack Site Acceleratorを有効にする
Jetpackのコアプラグインには、当社のサイトアクセラレーターが含まれています。画像を最適化し、グローバルなサーバーネットワークから配信する無料サービスです（一般にCDN、または「コンテンツ配信ネットワーク」と呼ばれます）。サイトを閲覧するユーザーに近いサーバーから画像を読み込めるため、画像の読み込みが速くなります。サイトアクセラレーターは、さまざまな状況に合わせて画像のサイズも自動的に変更します。
特に画像ガイドで画像が大きすぎると示された場合は、Site Acceleratorを使用して画像のパフォーマンスを向上させることをおすすめします。
メディアライブラリ内で画像のサイズを変更する
画像はメディアライブラリで直接サイズ変更できます。メディアライブラリで画像を編集し、適切なサイズに拡大・縮小しても、元の画像に影響はありません。つまり、指定したサイズの新しいバージョンの画像が作成され、元の画像は変更されません。
プライバシー情報
画像パフォーマンスガイドはデフォルトでは無効です。Jetpack → ブーストのWordPress管理画面で、画像の下にある「画像ガイドを有効化」トグルを使用して有効にできます。
| 使用データ | |
|---|---|
| サイト所有者／ユーザー この機能は、サイト全体で使用されている画像と、それらがどのように、またどこで表示されているかを調べます。 | サイト訪問者 なし。 |
| 追跡されるアクティビティ | |
| サイト所有者／ユーザー 画像ガイドによって特定されたサイズの大きすぎる画像に関する統計を追跡し、サービスの改善と効果的な改善対象の特定に役立てます。 具体的には、サイズの大きすぎる画像のサイズと、ページ内のおおよその位置（例：投稿コンテンツ内やテーマファイル内など）を追跡します | サイト訪問者 なし。 |
| 同期されるデータ（詳細を読む） | |
| サイト所有者／ユーザー なし。 | サイト訪問者 なし。 |
