定義済みの画像サイズで画像を最適化する[WordPress Tip]

Webサイト上の画像を最適化することは困難な作業です。あなたはより少ないイメージ、圧縮イメージ、スプライトまたはsvgを使うことを選ぶことができます。リストは続きます。多くのWordPressサイトがトリップする1つの場所は、画像サイズを定義することです。 コンテンツの多いサイトを最適化するための重要な側面.

画像のアップロード時に指定されたサイズに従って画像が自動的に作成されるため、画像サイズは重要です。これはあなたが3000px幅のオリジナル画像を持っていても、600px画像が十分であるならば決して使われないことを確実にします。理想的には、600ピクセル幅のスペースでは、より大きな画像を縮小するのではなく、600ピクセル幅の画像を使用する必要があります。.

この記事では私はあなたを歩きます 画像サイズは？ そして それらを定義する方法.

WordPressによる画像処理

WordPressの記事に画像を挿入したことがある場合は、画像サイズセレクタを使用してください。これにより、画像の小、中、大の各バージョンを挿入できます。これらの実際のサイズ WordPressの設定で変更できます.

あなたがWordPressを通して画像をアップロードするときはいつでも、それはこれらの画像のバージョンを生成して、それらを別々に保存します。たとえば、1200×800の画像をアップロードすると、WordPressは100×100、600×400、900×600のバージョンを作成することがあります。画像を挿入して「中」を選択すると、オリジナルの縮小バージョンとは対照的に、実際の中バージョンが使用されます。.

それはそれが非常に有益です サーバーの帯域幅とクライアントコンピュータの処理時間を節約します。. 600×400の画像をダウンロードするほうが1200×800の画像をダウンロードするよりも速いのは当然のことだと思います。.

縮小する必要があるより大きな画像を使用する場合, ブラウザは計算の面倒を見る必要があります これを実現するために。これには数時間はかかりませんが、画像が多いWebサイトでは目立つかもしれません。.

正しい場所に正しい画像

究極の目標は 常に適切な画像サイズを使用する. 440×380の画像が必要な場合は、その正確なサイズの画像をサーバーから取得します。アップロードされた画像を使用する主な場所は2つあります。注目の画像と投稿中の画像 - まず注目の画像に注目することをお勧めします。.

最も視覚的に向けられた記事を除くすべてにおいて、投稿画像の幅が220ピクセルか245ピクセルかは関係ありません。どちらのバージョンを使用しても同じように使用できます。注目の画像は、通常、一般的なサイズで表示されます。記事のリストには178×178のサムネイルを、記事のヘッダには1200×600の幅の画像を使用できます。.

これらに加えて、あなたはまた、設定で定義されているように、別々のサムネイル/中/大サイズを保持したいかもしれません 特定の寸法に簡単にアクセスできます 投稿に画像を追加するとき.

それで、結局のところこれは次のようになります。おすすめの画像に使用できる2つの追加の画像サイズがあるとしたら、それは素晴らしいことではないでしょうか。これらの画像サイズは、画像がアップロードされるときに他の画像サイズと一緒に作成されます。幸いなことに、WordPressはあなたがかなり単純な機能でカバーしているということです。.

画像サイズの作成

を使って add_image_size（）関数 Webサイトに必要なすべての画像サイズを定義できます。上記の2つの例を作成しましょう。下記のコードをあなたのテーマのfunctions.phpファイルまたはプラグインのファイルに入れてください.

 add_image_size（ 'featured_thumbnail'、178、178、true）; add_image_size（ 'featured_wide'、1200、600）;

ご覧のとおり、この関数は4つのパラメータを取ります。最初のパラメータでサイズの名前を設定できます。 2番目のパラメータは最大幅、3番目の最大高さです。 4番目のパラメータはハードクロッピングを設定します。 trueに設定されている場合, 画像は指定した正確なサイズで作成されます.

これがあなたのテーマまたはプラグインに追加されると、あなたがアップロードする各ファイルの2つの新しいバージョンがWordPressによって作成されます。.

画像サイズの使い方

これらの画像サイズは、メディアの取得を扱う多くの機能で使用できます。まず注目の画像を見てみましょう. the_post_thumbnail（） 投稿のおすすめ画像を表示するためによく使用されます。次のコードをWordPressループに入れることができます。

 the_post_thumbnail（ 'featured_thumbnail'）;

この関数の最初のパラメータは使用する画像サイズを指定することを可能にします。 "featured_thumbnail"を指定したので、このファイルの178×178バージョンが使用されます。.

のような他の多くの機能があります。 wp_get_attachment_image（）そして wp_get_attachment_image_src（） これは画像サイズパラメータも使用します。そのような関数を使うときはいつでも、あなたはいつも適切な画像サイズを指定するべきです.

サムネイルを再生する

すでにサイトがある場合は、画像サイズを定義するだけでは、記事を遡及的に最適化することはできません。画像サイズは、新しい画像がアップロードされたときにのみ考慮されるため、システム内にすでにある画像には適用されません。.

大丈夫、Regenerate Thumbnailsプラグインは物事をより良くするでしょう！このプラグインは、定義されたすべての画像サイズを考慮して、すべての画像のサムネイルを再生成できます。それはまたできます 特定の画像をターゲットにする, ほんの少ししかない場合、またはテストをしている場合に便利です。.

あなたのサムネイルが再生されると、あなたはあなたのサイトにロードされた最適化されたバージョンを見るはずです。あなたは画像のソースを見ることによってこれをチェックすることができます。「example.jpeg」をアップロードしたときに、おすすめの画像のソースとして「example.jpeg」が表示されている場合は、適切ではありません。見れば “example-178×178.jpeg” それからすべてが順調です。最適化された画像が表示されます.

レスポンシブ画像

最適化されたサイトを維持する上での1つの問題は、応答性です。 iPadで記事を見ると、最大幅が786px程度になるので、大きいサイズの投稿画像が縮小されます。.

最も簡単な解決策はHammyのようなプラグインを使うことです。 Hammyは、（ブラウザのウィンドウ幅ではなく）テーマのコンテンツ幅に基づいて機能し、それに基づいて最適化された画像を提供できます。これは、処理能力と帯域幅が問題になる可能性があるモバイルユーザーにとって特に便利です。.

さらなる画像最適化

はじめに述べたように、画像を最適化する方法は無数にあります。スプライトから画像圧縮まで、画像と密接に関連するロード時間を減らすために多くの技術を使用することができます。 Ashutosh KSは、画像性能を向上させるための9つのWordPressプラグインを紹介する素晴らしい記事を書きました。!

私はまた、手間のかからないレスポンシブ画像を見てみることをお勧めします。これは、あなたが自分自身のコードを書きたい場合に使用したい、絵要素のサポートを追加する方法を示しています.