Jetpack Boost：画像パフォーマンスガイド
サイトのページや投稿で使用している画像を適切なサイズにするには、Jetpack Boostの画像パフォーマンスガイドを利用します。
画像パフォーマンスガイドを使用する
画像パフォーマンスガイドは、サイト上の画像に推奨されるサイズを計算します。画像をこのサイズに変更すると、ファイルサイズを小さくし、それによってサイトのページの読み込み時間を短縮できます。画像パフォーマンスガイドでは、画像を最大限に活用するためのベストプラクティス、役立つヒント、実行可能な手順を紹介します。
- WP管理画面のダッシュボードでJetpack → Boostに移動し、ページを下にスクロールして画像ガイド機能をオンにします。
- サイト上の画像を確認します。ログインした状態でサイトにアクセスすると、各画像に番号の付いた吹き出しが表示されます。吹き出しにカーソルを合わせると、画像の詳細を示すカードが次のように表示されます。
- 画像名：クリックすると、画像が新しいタブで開きます。
- 画像ファイルのサイズ：画像の実際のサイズが表示されます。
- 想定サイズ：ページでできるだけ速く読み込めるようにするために推奨される、画像の理想的なサイズです。
- 画面上のサイズ：ページを表示したときに画面上に表示される画像のサイズが表示されます。
- 画像サイズ：画像ファイルの実際のサイズが表示されます。
- 削減可能なサイズ：画像を想定サイズに正確に合わせてサイズ変更した場合に、ファイルサイズをどの程度削減できるかが表示されます。
さまざまなデバイスと設定で画像パフォーマンスガイドをテストする
画像パフォーマンスガイドには、現在のデバイスで画像がどのように表示されるかについての情報が表示されます。ユーザーがどのような方法でサイトを閲覧しても効率的に配信できるよう、いくつかの異なる種類のデバイスからサイトをテストすることをおすすめします。
デバイスによってピクセル密度は異なります。ピクセル密度とは、画面上の一定の領域に表示されるピクセル数を表す指標です。特定のサイズで画像を表示する際に画面上で使用されるピクセル数に影響することがあります。
画像パフォーマンスガイドでは、現在のデバイスに画像がどの程度適しているかを確認できます。そのため、パソコンやスマートフォンなど複数のデバイスでテストし、異なる画面で画像がどの程度最適化されているかをより正確に把握することをおすすめします。
ウェブページを拡大または縮小すると、ブラウザーのピクセル密度にも影響し、それによって画像パフォーマンスガイドの結果も変わります。ブラウザーの標準ズームレベルでこの機能を使用することをおすすめします。
目立ちすぎないように、関連情報を示す小さなインジケーターを使用しています。小さい画像の場合は、代わりにオーバーレイの吹き出しが小さな点として表示されます。
画像ガイドを一時停止する
画像ガイドを有効にすると、必要に応じて機能を有効または一時停止に設定し、 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を使用して画像のパフォーマンスを向上させることをおすすめします。
メディアライブラリ内で画像のサイズを変更する
画像はメディアライブラリで直接サイズ変更できます。メディアライブラリで画像を編集し、適切なサイズに拡大・縮小しても、元の画像に影響はありません。つまり、指定したサイズの新しいバージョンの画像が作成され、元の画像は変更されません。
プライバシー情報
画像パフォーマンスガイドはデフォルトでは無効化されています。有効化するには、次の場所に移動します：WP管理画面 → Jetpack → Boost。
| 使用データ | |
|---|---|
| サイト所有者／ユーザー この機能は、サイト全体で使用されている画像と、その表示方法および表示場所を調査します。 | サイト訪問者 なし。 |
| 追跡されるアクティビティ | |
| サイト所有者／ユーザー 画像ガイドで特定された大きすぎる画像に関する統計を追跡し、サービスの改善と改善対象の効果的な絞り込みに役立てます。 具体的には、大きすぎる画像のサイズと、ページ内のおおよその位置（投稿コンテンツ内やテーマファイル内など）を追跡します。 | サイト訪問者 ありません。 |
| 同期されたデータ（続きを読む） | |
| サイト所有者／ユーザー ありません。 | サイト訪問者 ありません。 |
