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

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

キーテイクアウト

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

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

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

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

テーマ畫像サイズ
WordPressユーザーが畫像をアップロードすると、WordPressは特定の寸法で元の畫像のコピーを作成するために使用できる2つの関數を提供します。これは、テーマ內の特定のサイズで畫像を出力したい場合に便利です。
• サムネイル、中型、大規(guī)模
WordPress Administration、Settings> Mediaの下で、3つの事前定義された畫像サイズの3つの畫像サイズがあります。それぞれが獨自の寸法を設定することができます。
WordPressは常にこれらのサイズに畫像を変更するため（オリジナル、サムネイル、中型、および大規(guī)模で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、節(jié)約：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、節(jié)約：51％ 400px x 400px - 元のファイルサイズ：21kb、60％品質ファイルサイズ：10kb、節(jié)約：52％ png畫像
  オリジナル 500px x 500px 400px x 400px ファイルサイズ 697kb 354kb 236kb 60％の品質ファイルサイズ 697kb 354kb 236kb 節(jié)約 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、節(jié)約：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の節(jié)約、または2 Mbps接続で約1秒速いです。 697kb PNGの場合、これを65kbに減らすことができます - 632kbの節(jié)約、または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インターフェイスに新規(guī)を追加し、「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、節(jié)約：52.4％
  png畫像

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

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

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

  JPEG畫像のパフォーマンスが向上し、PNG畫像がTinypngを使用してパフォーマンスが向上しているため、Tinypngに同様のファイルサイズの節(jié)約を達成することができます。 サードパーティ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管理インターフェイスに新規(guī)を追加し、「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の畫像最適化は、いくつかの理由で重要です。まず、ウェブサイトの読み込み速度が向上します。大規(guī)模で最適化されていない畫像は、サイトを遅くし、ユーザーエクスペリエンスとSEOランキングに悪影響を及ぼします。第二に、最適化された畫像はより少ないストレージスペースを使用します。これは、限られたホスティングプランを使用している場合に有益です。最後に、最適化された畫像はプロフェッショナルで魅力的に見えます。これにより、サイトの全體的な美學とユーザーエンゲージメントを高めることができます。

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

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

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

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

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