WordPressでの画像最適化のマスター

WordPressのWebサイトを構築および維持するときは、サイトのパフォーマンスを改善し、ページの読み込み時間を短縮する方法を見つけることが重要です。これにより、回復率の低下と検索エンジンのランキングの増加に役立ちます。

WordPressサイトのテーマとプラグインコードなど、パフォーマンスを達成する方法はいくつかあります。たとえば、JavaScript、CSS、画像の模擬です。また、サーバーベースの構成オプションもあります。たとえば、キャッシュを有効にしたり、WordPressプラグインを使用して静的コンテンツのキャッシュを支援します。 ただし、クライアントがWordPress Webサイトに追加するコンテンツ、特に画像を制御することはできません。画像は元のフォームにアップロードされ、サイトのパフォーマンスの問題とページの読み込み時間の増加につながる場合があります。 この記事では、クライアントとサイトの所有者によってWordPressにアップロードされるJPEGおよびPNG画像を最適化するさまざまな方法を検討します。

キーテイクアウト

事前定義された画像サイズの優先順位付け：ワードプレスの組み込み設定を利用して、画像を最適化し、画像がテーマ内のさまざまなコンテキストに適切にサイズになるようにサムネイル、ミディアム、および大きなサイズを定義します。

追加の画像サイズを実装します： `add_image_size（）`を使用して、テーマのカスタム画像ディメンションに、さまざまなポストタイプとページレイアウトにわたってより柔軟性と最適化を可能にします。 画像圧縮の最適化：損失と損失のない圧縮技術の両方を使用して、画像ファイルサイズを大幅に削減し、品質とパフォーマンスのバランスをとり、自動圧縮のためにTinypngのようなツールとバランスをとっています。

JPEG品質設定の調整：テーマの「functions.php」を介してデフォルトのjpeg画質を変更して、ワードプレス内でファイルサイズの削減を直接管理し、ストレージと負荷時間を最適化します。

CDNサービスの活用：PhotonやMaxCDNなどのコンテンツ配信ネットワーク（CDN）を統合して、画像を地理的に配布およびキャッシュし、ユーザーの場所に基づいて画像配信を高速化し、サイトのパフォーマンスをさらに向上させます。

テーマ画像サイズ
WordPressユーザーが画像をアップロードすると、WordPressは特定の寸法で元の画像のコピーを作成するために使用できる2つの関数を提供します。これは、テーマ内の特定のサイズで画像を出力したい場合に便利です。
• サムネイル、中型、大規模
WordPress Administration、Settings> Mediaの下で、3つの事前定義された画像サイズの3つの画像サイズがあります。それぞれが独自の寸法を設定することができます。
WordPressは常にこれらのサイズに画像を変更するため（オリジナル、サムネイル、中型、および大規模で4つの画像が保存されます）、これらを最初に設定し、可能な限りWordPressテーマ内で使用する価値があります。
• WordPressテーマで事前定義された画像サイズを使用するには、次のように使用してください。

  <span>while ( have_posts() ) {
  </span>    <span>the_post();
  </span>    <span>the_post_thumbnail( 'thumbnail' ); // Or 'medium', or 'large'
  </span><span>}</span>

  set_post_thumbnail_size（）

  追加の画像サイズが必要な場合は、set_post_thumbnail_size（）を使用できます。

  デフォルトの特徴的な画像（以前のサムネイル後のポスト）の寸法を設定します これにより、投稿、ページ、カスタム投稿タイプの注目画像の幅と高さを定義することができます。

  特徴の画像サイズを定義するには、テーマのfunctions.phpファイルに次のコードを追加します。これにより、注目の画像が幅500px x 500pxの高さになります：

  指定された寸法で投稿の特徴的な画像を出力するには、WordPressループ内のthe_post_thumbnail（）を使用します。
  add_image_size（）

  <span>add_theme_support( 'post-thumbnails' );
  </span><span>set_post_thumbnail_size( 500, 500, true );</span>

  も提供します 新しい画像サイズを登録します。これは、WordPressが新しい画像がアップロードされたときに指定された寸法を使用して画像のコピーを作成することを意味します。

  <span>while ( have_posts() ) {
  </span>    <span>the_post();
  </span>    <span>the_post_thumbnail();
  </span><span>}</span>

  テーマのfunctions.phpファイル内でこの関数を必要なだけ登録して、テーマが必要とする限り多くの画像サイズを登録することができます。投稿とページについては、それぞれ2つの画像サイズを登録しましょう。
  the_post_thumbnail（）呼び出しを変更して、出力する画像サイズを指定できるようになりました。
  results
  テストJPEGおよびPNG画像を使用して、ファイルサイズの削減とパフォーマンスの向上を確認できます。

  jpeg image

  元の寸法 - ファイルサイズ：504kb

  500px x 500px - ファイルサイズ：29kb

  400px x 400px - ファイルサイズ：21kb

  <span>add_image_size( 'post', 500, 500, true );
  </span><span>add_image_size( 'page', 400, 400, true );</span>

  png画像

  元の寸法 - ファイルサイズ：697kb

  <span>while ( have_posts() ) {
  </span>    <span>the_post();
  </span>    <span>the_post_thumbnail( 'post' ); // Or 'page'
  </span><span>}</span>

  500px x 500px - ファイルサイズ：354kb

  400px x 400px - ファイルサイズ：236kb

  画像圧縮

  画像圧縮は、画質への犠牲がほとんどまたはまったくない冗長データを削除することにより、画像ファイルのサイズをさらに削減することを目的としています。

  画像圧縮には2つの主な方法があります。LossyとLossless。

  損失のある画像圧縮

  紛失した圧縮は、不正確な近似を使用し、部分的な量の画像データを破棄して、ファイルサイズが低い画像を作成し、可能な限り最善を維持します。

  メタデータ（exif情報、カメラの製造、モデル、場所について話すなど）は、画質に影響を与えずに破棄できます。

  不利な点は、画質が損なわれる可能性があるため、高速画像の読み込み時間と画質の間に適切なバランスを見つけることが重要です。

  損失のある圧縮は、通常、画像ファイル内に多くのデータがあり、画像出力をレンダリングするために多くのデータがあります。

  テスト画像とtinypng.comを使用して、JPEGおよびPNG画像に対する損失のある圧縮の効果を見ることができます：

  jpeg image

  元の寸法 - 元のファイルサイズ：504kb、損失の圧縮ファイルサイズ：367kb、保存：27％

  500px x 500px - 元のファイルサイズ：29kb、損失の圧縮ファイルサイズ：17.1kb、保存：41％

  400px x 400px - 元のファイルサイズ：21kb、損失の圧縮ファイルサイズ：12.5kb、節約：39％
  png画像 元の寸法 - 元のファイルサイズ：697kb、損失の圧縮ファイルサイズ：229.6kb、保存：67％ 500px x 500px - 元のファイルサイズ：354kb、損失の圧縮ファイルサイズ：94.3kb、保存：73％ 400px x 400px - 元のファイルサイズ：236kb、損失の圧縮ファイルサイズ：64.6kb、保存：73％
  ロスレス画像圧縮 ロスレス圧縮により、画像の品質が失われることなく、画像データの部分的な破棄と圧縮が可能になります。圧縮された「損失がない」画像は、元の画像と同じになります。 不利な点は、通常、写真などのより複雑な画像でファイルサイズの改善を提供しないことです。そのため、PNGおよびGIF画像で使用するのが最適です。

  画像圧縮：WordPress Solutions

  WordPressは、損失のある圧縮を使用して、画質を調整する2つの方法を提供します。次のコードをテーマのfunctions.phpファイルに追加することで、両方を使用できます。

  JPEG_Qualityは、WordPressにアップロードされたJPEG画像の品質を定義するか、WordPressの画像エディター内で編集しました。

  wp_editor_set_qualityは、（この場合）WordPressの画像エディター内で編集された画像の品質を定義します。 JPEG画像の場合、JPEG_Qualityフィルターを指定したため、このフィルターがオーバーライドします。

  これらの変更でテスト画像をWordPressにアップロードすると、次の結果が生成されます。

  jpeg image

  元の寸法 - 元のファイルサイズ：504kb、60％品質ファイルサイズ：504kb、保存：0％

  500px x 500px - 元のファイルサイズ：29kb、60％の品質ファイルサイズ：14kb、節約：51％ 400px x 400px - 元のファイルサイズ：21kb、60％品質ファイルサイズ：10kb、節約：52％ png画像
  オリジナル 500px x 500px 400px x 400px ファイルサイズ 697kb 354kb 236kb 60％の品質ファイルサイズ 697kb 354kb 236kb 節約 0％ 0％ 0％ アップロードされたPNG画像が変更されていないことに気付くでしょう。これは、JPEG_QUALITYフィルターがJPEG画像のみに影響し、WP_EDITOR_SET_QUALITYはメディアライブラリを介して画像を編集した場合にのみ使用されるためです。 さらに、元の画像は変更されていません。これは、WordPressが変更された画像に品質フィルターのみを適用するためです。

  画像圧縮：プラグインソリューション

  画像圧縮の仕組みを調査し、オンラインツールを使用していくつかのテストを実行していますが、WordPressで画像を自動的に圧縮することを理想的にしたいと思います。これは、WordPressに画像をアップロードする前にサードパーティのツールを使用することを忘れないようにクライアント（または自分自身）に依存していないことを意味します。

  自動画像圧縮を提供するWordPressプラグインがいくつかあります：
  ewww画像オプティマイザー
  EWWW Image Optimizerは、さまざまなJPEG、PNG、およびGIF圧縮ライブラリ/サービスを使用して、ロスレス圧縮を提供します。一部の共有ホストにはない場合があるexec（）アクセスが必要です。ただし、サーバー上の画像を処理するサービスに対して支払われるEWWWイメージオプティマイザークラウドを提供します。

  繰り返しますが、損失のある圧縮のために、1,000枚の画像で1ドルから始まるレートで、APIキーに支払う必要があります。 wordpress管理インターフェイスに新しい追加を行い、「ewww image optimizer」を検索する：

  [今すぐインストール]ボタンをクリックし、インストールされたらプラグインをアクティブにします。

  デフォルトでは、プラグインは画像にロスレス圧縮を提供し、それ以上の構成は必要ありません。新しい投稿を作成し、いくつかの結果を得るために、注目の画像をテスト画像に設定しましょう。

  jpeg image

  元の寸法 - 元のファイルサイズ：504kb、損失の圧縮ファイルサイズ：503kb、保存：0.2％ 500px x 500px - 元のファイルサイズ：29kb、損失のある圧縮ファイルサイズ：28kb、保存：3.5％ 400px x 400px - 元のファイルサイズ：21kb、損失の圧縮ファイルサイズ：20kb、節約：4.8％

  png画像

  元の寸法 - 元のファイルサイズ：697kb、損失の圧縮ファイルサイズ：669kb、保存：4％ 500px x 500px - 元のファイルサイズ：354kb、損失の圧縮ファイルサイズ：300kb、保存：15.3％ 400px x 400px - 元のファイルサイズ：236kb、損失の圧縮ファイルサイズ：200kb、保存：15.3％

  JPEG画像上でPNG画像を「損失を及ぼさない」圧縮すると、より良いパフォーマンスを得ることができます。ただし、これらの画像はまだ非常に大きいので、代わりに損失のある圧縮を提供する別のプラグインを試してみましょう。

  jpeg＆png画像を圧縮します
  Webベースの画像圧縮サービスを提供するだけでなく、TinypngはWordPressプラグインも提供して、JPEGおよびPNG画像に損失のある圧縮を自動的に提供します。

  1か月あたりの最初の500の画像圧縮は無料です。その後、画像圧縮あたり0.009ドルかかります。

  Tinypngプラグインをセットアップし、プラグインに移動> WordPress Administration Interfaceに新しい追加を行い、「JPEGとPNG画像を圧縮」の検索：

  [今すぐインストール]ボタンをクリックし、インストールされたらプラグインをアクティブにします。

  次に、https：//tinypng.com/developersにアクセスして、名前とメールアドレスを入力してAPIキーを取得します。

  APIキーを取得するためのリンク付きのメールが届きます。リンクをクリックして、APIキーのメモを作成します：

  WordPressプラグインで、[設定]> [メディア]に移動し、Tinypng APIキーを挿入します。また、圧縮する画像サイズを選択することもできます。各画像サイズは、1か月あたり500の無料割り当てコンプレッションのうちの圧縮としてカウントされるため、テスト用の元の画像、ページ、投稿サイズを選択してみましょう。
  新しい投稿を作成し、テスト画像に「特集画像」を設定して、結果を得てください。

  jpeg image

  元の寸法 - 元のファイルサイズ：504kb、損失の圧縮ファイルサイズ：367kb、保存：27.2％ 500px x 500px - 元のファイルサイズ：29kb、損失の圧縮ファイルサイズ：19kb、保存：34.5％ 400px x 400px - 元のファイルサイズ：21kb、損失の圧縮ファイルサイズ：13kb、保存：38.1％

  png画像

  元の寸法 - 元のファイルサイズ：697kb、損失の圧縮ファイルサイズ：230kb、保存：67％ 500px x 500px - 元のファイルサイズ：354kb、損失の圧縮ファイルサイズ：94kb、保存：73％ 400px x 400px - 元のファイルサイズ：236kb、損失の圧縮ファイルサイズ：65kb、保存：73％ 1つの画像のみから、特定の画像サイズと圧縮プラグインを使用して、504kbのJPEG画像を13kbに減らすことができます。491kbの節約、または2 Mbps接続で約1秒速いです。 697kb PNGの場合、これを65kbに減らすことができます - 632kbの節約、または2 Mbps接続で約1.2秒速いです。

  WordPressのWebサイトで配信したい画像を最適化したので、訪問者の場所やその他の要因に基づいて、それらの画像の配信を最適化する方法を見てみましょう。

  コンテンツ配信ネットワーク（cdn）
  コンテンツ配信ネットワークは多数のサーバーであり、通常、世界中の複数のデータセンターに配布されます。テキスト、画像、CSS、JavaScriptなどの静的コンテンツを提供するように設計されています。

  CDNは、キャッシュとマイニフィスを利用して、配信されたコンテンツが可能な限り最適化されるようにすることもできます。

  CDNの地理的位置により、ほとんどの人は訪問者の国を検出し、最も近い利用可能なデータセンターからテキスト、画像、CSS、JavaScriptを配信しようとします。これにより、応答時間とページの読み込み時間を短縮し、サーバーのサーバーの帯域幅とロードを削減するのに役立ちます。

  WordPress用の2つの利用可能なCDNソリューションを見てみましょう

  photon
  光子は次のように説明されています
  …WordPress.comまたはJetPackに接続されたWordPressサイトでホストされているサイトの画像加速および編集サービス。つまり、ホストの負荷が少なく、読者のためのより速い画像

  JPEG、PNG、およびGIF画像を自動的につかみ、ブラウザの要件を満たすためにサイズのバージョンを提供します。これは、500px x 500pxの画像を備えたモバイルデバイスでWordPress Webサイトを表示する場合に便利ですが、250px x 250pxバージョンは必要です。

  Photonをセットアップするには、Jetpackをインストールしてアクティブ化する必要があります。プラグインに移動します> WordPress Administrationインターフェイスに新規を追加し、「JetPack」を検索します：

  

  [今すぐインストール]ボタンをクリックし、インストールされたらプラグインをアクティブにします。 次に、WordPress管理メニューで jetpackをクリックしてから、

  をクリックして、wordpress.comに接続します。 （持っていなくても心配しないでください - この時点で無料のアカウントにサインアップできます）：

  すべてが成功した場合、WordPress管理インターフェイスにリダイレクトされ、Photonを含むいくつかのモジュールが利用可能になります。先に進んで、アクティブ化ボタンをクリックしてPhotonをアクティブにしましょう。

  光子がアクティブ化され、画像がCDNから提供されます。

  既存の投稿とページを表示しましょう。 i2.wp.comから画像が提供されるようになりました。これはPhotonのCDNです。画像ソースを取得し、サイズのパラメーターを調整して、オリジナルの500pxおよび400pxバージョンを取得して、最適化されたファイルサイズをテストできます。 jpeg image 元の寸法 - 元のファイルサイズ：504kb、損失の圧縮ファイルサイズ：318kb、保存：37％

  500px x 500px - 元のファイルサイズ：29kb、損失の圧縮ファイルサイズ：14kb、保存：51.7％ 400px x 400px - 元のファイルサイズ：21kb、損失の圧縮ファイルサイズ：10kb、節約：52.4％
  png画像

  元の寸法 - 元のファイルサイズ：697kb、損失の圧縮ファイルサイズ：239kb、保存：65.7％

  500px x 500px - 元のファイルサイズ：354kb、損失の圧縮ファイルサイズ：101kb、保存：71.5％

  400px x 400px - 元のファイルサイズ：236kb、損失の圧縮ファイルサイズ：69kb、節約：70.8％

  JPEG画像のパフォーマンスが向上し、PNG画像がTinypngを使用してパフォーマンスが向上しているため、Tinypngに同様のファイルサイズの節約を達成することができます。 サードパーティcdns

  JetPackをインストールしないことを好む場合、それに付属する他の機能（36モジュールとカウント！）を使用する場合は、maxcdnなどのサードパーティCDNを使用できます。

  このアプローチの利点は、画像配信の最適化に限定されていないことです。 CSS、JavaScriptファイル、およびその他の静的ファイルタイプをCDNが提供することを指定できます。また、WordPressのインストールで、Tinypngなどの画像最適化プラグインを保持することもでき、CDNに保存される前に画像が最適化されるようにすることもできます。より多くのCSSおよびJavaScriptコンテンツと画像を持っているサイトにいる場合、これはより良い解決策かもしれません。

  maxcdnをセットアップするには、Webサイトにアクセスして、をクリックして、無料のテストアカウントを取得しますボタン。 画面上の指示に従って、個人情報を記入してください。その後、MaxCDNアカウントを作成して開始できるメールを受信します。 サインアップしたら、ゾーンを作成する必要があります。ゾーンは基本的にWebサイトです ゾーンを作成するには、メインメニューのゾーンオプションをクリックし、続いて

  プルゾーンの作成

  プルゾーンの名前（通常はWebサイト名）を入力してください。これはURLとオプションのラベルです：

  次に、maxcdnを使用するようにWordPressインストールを構成する必要があります。 W3 Total Cacheを使用します。これは、MaxCDNサポートに付属のWordPressプラグインです。 W3合計キャッシュをセットアップするには、プラグインに移動します> WordPress管理インターフェイスに新規を追加し、「W3合計キャッシュ」を検索します。
  [今すぐインストール]ボタンをクリックし、インストールされたらプラグインをアクティブにします。 アクティブになったら、WordPress管理メニューのパフォーマンス> CDNに移動し、構成パネルまでスクロールします。

  承認キー

  ]フィールドに貼り付けます：

  

  すべてが機能した場合、キーは有効です通知は画面に表示されます。 [すべての設定]をクリックして、

  ボタンを保存して構成を完了します。
  既存のページまたは投稿の1つをリロードすると、CSS、JS、および画像がCDNから提供されていることがわかります。 結論

  この記事では、WordPress用の多くの画像最適化とCDNプラグインをレビューしました。 Jetpackプラグインの一部であるPhoton CDNは、最適化された画像を配信し、すべての解像度に合わせて拡大し、CDNから提供される単一の最も効果的なソリューションを提供します。

  既にCDNを所定の位置に持っている、または1つを使用しないか、Jetpackを使用しない人の場合、TinypngのWordPressプラグインは、PNG画像のPhotonよりも画像最適化をわずかに改善し、Aと組み合わせて役立つことができます。サードパーティのCDNプロバイダー。

  WordPressでの画像の最適化の習得に関するよくある質問

  WordPressでの画像最適化の利点は何ですか？

  ​​

  WordPressの画像最適化は、いくつかの理由で重要です。まず、ウェブサイトの読み込み速度が向上します。大規模で最適化されていない画像は、サイトを遅くし、ユーザーエクスペリエンスとSEOランキングに悪影響を及ぼします。第二に、最適化された画像はより少ないストレージスペースを使用します。これは、限られたホスティングプランを使用している場合に有益です。最後に、最適化された画像はプロフェッショナルで魅力的に見えます。これにより、サイトの全体的な美学とユーザーエンゲージメントを高めることができます。

  画像の最適化はSEOにどのように影響しますか？ Googleのような検索エンジンは、Webサイトの読み込み速度をランキングファクターと見なします。最適化された画像はより速く読み込まれ、サイトの速度を向上させ、したがってSEOランキングを改善します。さらに、正しいALTタグを備えた適切に最適化された画像は、サイトの検索結果にサイトに表示され、サイトへのトラフィックを増やすのに役立ちます。画像最適化のためのいくつかの優れたWordPressプラグイン。最も人気のあるものには、EWWW Image Optimizer、Smush、ShortPixelが含まれます。これらのプラグインは、画像をアップロードするときに画像を自動的に圧縮および最適化し、時間と労力を節約します。

  品質を失うことなく画像を最適化するにはどうすればよいですか？画質を分解することなく、ファイルサイズを削減する圧縮。多くのWordPress Image Optimizationプラグインがこの機能を提供しています。さらに、ニーズに基づいて適切な画像形式（JPEG、PNG、GIFなど）を選択することも、画質を維持するのに役立ちます。 WordPressの理想的な画像サイズは、主にテーマに依存します。ただし、一般的な経験則では、全幅画像に対して画像幅を1200〜1600ピクセルに保つことです。小さい画像の場合、通常は600〜800ピクセルの幅で十分です。メディアライブラリ、画像の選択、「Altテキスト」フィールドに記入します。 ALTタグは、SEOとアクセシビリティにとって重要です。検索エンジンや視覚障害のあるユーザーへの画像コンテンツを説明しているためです。画像を最適化できるようにします。この機能は、最適化するための多数の画像がある場合に非常に便利です。

  モバイルデバイスの画像を最適化するにはどうすればよいですか？

  モバイルデバイスの画像を最適化するには、異なる画面サイズに合わせて調整するレスポンシブ画像を使用できます。 WordPressは、アップロードする各画像のいくつかのサイズを自動的に作成し、各デバイスに最も適切なサイズを提供します。いくつかの画像データは、画質の損失につながる可能性があります。一方、ロスレス圧縮により、データを削除せずにファイルサイズが削減され、元の画質が維持されます。 WordPressサイトにアップロードします。これにより、サイトが高速かつ効率的なままであり、可能な限り最高のユーザーエクスペリエンスを提供します。

以上がWordPressでの画像最適化のマスターの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。