サイト訪問者に最高のエクスペリエンスを提供するには、サイトの画像をすばやく読み込むことが重要です。このガイドでは、画像の品質を維持しながらファイルサイズを小さくして画像を最適化する方法を説明します。
WordPress サイトには、推奨画像サイズを決定するテーマ、レイアウト、その他の要因がいくつもあります。そのため、ここで推奨できる汎用的なアプローチはありません。一般的に、画像サイズは必要なだけ大きく設定でき、それ以上大きくすることはできません。
最近のデジタルカメラやスマートフォンは、高品質の画像を大きなファイルサイズで撮影します。これらの画像をサイトに表示する場合、画質を維持しながらファイルサイズを50%以上削減できます。
メディアライブラリの「画像を編集」パネルからファイルサイズと寸法を確認するには、次の手順に従います。
- サイトのダッシュボードで「メディアライブラリ」にアクセスします。
- ファイルサイズと寸法を確認する画像のサムネイルをクリックします。
- サムネイルの周囲に枠線が表示され、右下に数字が表示されます。
- 「編集」ボタンをクリックします。
- 編集パネルにファイルサイズと寸法が表示されます。
サイトの画像を見てみましょう。高品質で表示されるものの、読み込みが遅いということはありませんか ? たとえば、幅が5,000ピクセルある場合は、2,500ピクセルに縮小することを検討してください。それでも問題ないようであれば、さらに画像サイズを縮小し、幅を2,000ピクセルまたは1,800ピクセルにして、画質とサイズの適切なバランスを見つけます。
このガイドの次のセクションでは、さまざまなツールを使用して画像サイズを縮小する方法を説明します。
画像のサイズを変更する方法はたくさんあります。次のセクションでは、コンピューターで使用できるツール、オンラインプログラム、より高度なソフトウェアについて説明します。
Windows コンピューターでは、Microsoft ペイントを使用できます。このプログラムで画像を開き、ペイントウィンドウの上部にある「サイズ変更」をクリックします。画像のサイズをパーセンテージで縮小し、新しい小さいバージョンを保存できます。
Mac コンピューターでは、プレビューというアプリを使用できます。このアプリで画像を開き、「ツール」、「サイズを調整」の順にクリックします。
画像サイズをすばやく縮小する方法を探している場合は、次のような多数の無料オンラインツールを使用できます。
これらのサービスでは、画像をアップロードし、新しいサイズを選択して、新しいバージョンをエクスポートできます。これらのサービスは WordPress.com とは連携していませんのでご注意ください。
WordPress アプリを使用してサイトに投稿する場合、アプリで画像を最適化できます。デフォルトでは、 「画像を最適化」オプションがオンになっています。「アップロードできる最大の画像サイズ」を設定すると、アップロード時に元のファイルが自動的にサイズ変更されます。
iPhone 版 Jetpack アプリと Android 版 Jetpack アプリで設定を調整する場合は、次の手順に従います。
- スマートフォンで Jetpack アプリにログインします。
- 右下のプロフィールアイコンをクリックします。
- 「アプリ設定」をクリックします。
「画像を最適化」をオフに切り替える (非推奨) か、「アップロードできる最大の画像サイズ」を調整できます。 デフォルトは2,000 x 2,000ピクセルです。
画像の最適化方法をさらに細かく制御したい場合は、Windows、Mac、Linux などのオペレーティングシステムにインストールできる Photoshop の無料の代替品である GNU Image Manipulation Program (GIMP) を使用して画像サイズを縮小できます。
GIMP を使用して画像サイズを縮小するには、次の手順を実行します。
- GIMP で画像を開きます。
- ツールバーの「画像」をクリックして「画像の拡大・縮小」を選択します。
- 画像サイズで、幅の値を希望のサイズに変更します。
- 「拡大・縮小」をクリックします。
- ツールバーの「ファイル」を選択します。次に、「名前を付けてエクスポート」を選択します。
- ファイル名の末尾に「.jpg」を付けます。
- 「エクスポート」を選択します。
- 開いたダイアログボックスで、「品質」を「60」(または希望するレベル) に変更します。
- 「高度なオプション」をクリックします。
- 「サブサンプリング」の比率を4:2:0 (クロマは4分の1) に変更します。
- 「エクスポート」をクリックします。
では結果を比較してみましょう。スライダーを使用して各画像を全画面表示します。
その他の画像編集ソフトウェアツールには、写真のサイズ調整や圧縮を一括ですばやく実行するオプションを備えているものもあります。
ウェブ上で利用できるものでは以下のようなサービスもあります。
WordPress.com プランがプラグインに対応している場合は、組み込み型の Jetpack サイトアクセラレーター (CDN) を利用して、画像の読み込み時間を自動的に短縮できます。
- サイトのダッシュボードにアクセスします。
- 「Jetpack」→「設定」に移動します。
- 「パフォーマンス」タブをクリックします。
- 「パフォーマンスと速度」セクションまで下にスクロールします。
Retina ディスプレイは通常のディスプレイと比較して画素密度が非常に高く、標準的な画像だとぼやけて見えることがあります。その防止策として、Retina ディスプレイを検出した場合に画像を倍のサイズで表示し、最大限の鮮明さを保てるようにしています。この方法は、メディアライブラリ内の画像がサイト上のサイズより大きい場合にのみ有効です。
画像ファイルの大きさがサイトの最大表示サイズの倍であっても、カメラで使用されるフル解像度よりも大幅に小さくなるため、画像を最適化すれば Retina ディスプレイで美しく表示させることができます。
日本語サポート 
コメントを投稿するにはログインしてください。