WordPressのWebサイトを構築および維持するときは、サイトのパフォーマンスを改善し、ページの読み込み時間を短縮する方法を見つけることが重要です。これにより、回復率の低下と検索エンジンのランキングの増加に役立ちます。
WordPressサイトのテーマとプラグインコードなど、パフォーマンスを達成する方法はいくつかあります。たとえば、JavaScript、CSS、画像の模擬です。また、サーバーベースの構成オプションもあります。たとえば、キャッシュを有効にしたり、WordPressプラグインを使用して静的コンテンツのキャッシュを支援します。 ただし、クライアントがWordPress Webサイトに追加するコンテンツ、特に画像を制御することはできません。画像は元のフォームにアップロードされ、サイトのパフォーマンスの問題とページの読み込み時間の増加につながる場合があります。 この記事では、クライアントとサイトの所有者によってWordPressにアップロードされるJPEGおよびPNG画像を最適化するさまざまな方法を検討します。キーテイクアウト
事前定義された画像サイズの優先順位付け：ワードプレスの組み込み設定を利用して、画像を最適化し、画像がテーマ内のさまざまなコンテキストに適切にサイズになるようにサムネイル、ミディアム、および大きなサイズを定義します。
追加の画像サイズを実装します： `add_image_size（）`を使用して、テーマのカスタム画像ディメンションに、さまざまなポストタイプとページレイアウトにわたってより柔軟性と最適化を可能にします。 画像圧縮の最適化：損失と損失のない圧縮技術の両方を使用して、画像ファイルサイズを大幅に削減し、品質とパフォーマンスのバランスをとり、自動圧縮のためにTinypngのようなツールとバランスをとっています。
JPEG品質設定の調整：テーマの「functions.php」を介してデフォルトのjpeg画質を変更して、ワードプレス内でファイルサイズの削減を直接管理し、ストレージと負荷時間を最適化します。
<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（）を使用できます。
デフォルトの特徴的な画像（以前のサムネイル後のポスト）の寸法を設定します これにより、投稿、ページ、カスタム投稿タイプの注目画像の幅と高さを定義することができます。特徴の画像サイズを定義するには、テーマの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>
<span>while ( have_posts() ) {
</span> <span>the_post();
</span> <span>the_post_thumbnail();
</span><span>}</span>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>画像圧縮
紛失した圧縮は、不正確な近似を使用し、部分的な量の画像データを破棄して、ファイルサイズが低い画像を作成し、可能な限り最善を維持します。
メタデータ（exif情報、カメラの製造、モデル、場所について話すなど）は、画質に影響を与えずに破棄できます。不利な点は、画質が損なわれる可能性があるため、高速画像の読み込み時間と画質の間に適切なバランスを見つけることが重要です。
損失のある圧縮は、通常、画像ファイル内に多くのデータがあり、画像出力をレンダリングするために多くのデータがあります。テスト画像とtinypng.comを使用して、JPEGおよびPNG画像に対する損失のある圧縮の効果を見ることができます：
jpeg image
元の寸法 - 元のファイルサイズ：504kb、損失の圧縮ファイルサイズ：367kb、保存：27％500px x 500px - 元のファイルサイズ：29kb、損失の圧縮ファイルサイズ：17.1kb、保存：41％
400px x 400px - 元のファイルサイズ：21kb、損失の圧縮ファイルサイズ：12.5kb、節約：39％
元の寸法 - 元のファイルサイズ：697kb、損失の圧縮ファイルサイズ：229.6kb、保存：67％
500px x 500px - 元のファイルサイズ：354kb、損失の圧縮ファイルサイズ：94.3kb、保存：73％
400px x 400px - 元のファイルサイズ：236kb、損失の圧縮ファイルサイズ：64.6kb、保存：73％
ロスレス圧縮により、画像の品質が失われることなく、画像データの部分的な破棄と圧縮が可能になります。圧縮された「損失がない」画像は、元の画像と同じになります。
不利な点は、通常、写真などのより複雑な画像でファイルサイズの改善を提供しないことです。そのため、PNGおよびGIF画像で使用するのが最適です。
WordPressは、損失のある圧縮を使用して、画質を調整する2つの方法を提供します。次のコードをテーマのfunctions.phpファイルに追加することで、両方を使用できます。
JPEG_Qualityは、WordPressにアップロードされたJPEG画像の品質を定義するか、WordPressの画像エディター内で編集しました。
wp_editor_set_qualityは、（この場合）WordPressの画像エディター内で編集された画像の品質を定義します。 JPEG画像の場合、JPEG_Qualityフィルターを指定したため、このフィルターがオーバーライドします。これらの変更でテスト画像をWordPressにアップロードすると、次の結果が生成されます。
jpeg image
400px x 400px - 元のファイルサイズ：21kb、60％品質ファイルサイズ：10kb、節約：52％
png画像画像圧縮：プラグインソリューション
画像圧縮の仕組みを調査し、オンラインツールを使用していくつかのテストを実行していますが、WordPressで画像を自動的に圧縮することを理想的にしたいと思います。これは、WordPressに画像をアップロードする前にサードパーティのツールを使用することを忘れないようにクライアント（または自分自身）に依存していないことを意味します。
自動画像圧縮を提供するWordPressプラグインがいくつかあります：EWWW Image Optimizerは、さまざまなJPEG、PNG、およびGIF圧縮ライブラリ/サービスを使用して、ロスレス圧縮を提供します。一部の共有ホストにはない場合があるexec（）アクセスが必要です。ただし、サーバー上の画像を処理するサービスに対して支払われるEWWWイメージオプティマイザークラウドを提供します。
繰り返しますが、損失のある圧縮のために、1,000枚の画像で1ドルから始まるレートで、APIキーに支払う必要があります。
デフォルトでは、プラグインは画像にロスレス圧縮を提供し、それ以上の構成は必要ありません。新しい投稿を作成し、いくつかの結果を得るために、注目の画像をテスト画像に設定しましょう。
500px x 500px - 元のファイルサイズ：29kb、損失のある圧縮ファイルサイズ：28kb、保存：3.5％
400px x 400px - 元のファイルサイズ：21kb、損失の圧縮ファイルサイズ：20kb、節約：4.8％
500px x 500px - 元のファイルサイズ：354kb、損失の圧縮ファイルサイズ：300kb、保存：15.3％
400px x 400px - 元のファイルサイズ：236kb、損失の圧縮ファイルサイズ：200kb、保存：15.3％
JPEG画像上でPNG画像を「損失を及ぼさない」圧縮すると、より良いパフォーマンスを得ることができます。ただし、これらの画像はまだ非常に大きいので、代わりに損失のある圧縮を提供する別のプラグインを試してみましょう。
jpeg＆png画像を圧縮します1か月あたりの最初の500の画像圧縮は無料です。その後、画像圧縮あたり0.009ドルかかります。
Tinypngプラグインをセットアップし、プラグインに移動> WordPress Administration Interfaceに新しい追加を行い、「JPEGとPNG画像を圧縮」の検索：
[今すぐインストール]ボタンをクリックし、インストールされたらプラグインをアクティブにします。
次に、https：//tinypng.com/developersにアクセスして、名前とメールアドレスを入力してAPIキーを取得します。
APIキーを取得するためのリンク付きのメールが届きます。リンクをクリックして、APIキーのメモを作成します：
WordPressプラグインで、[設定]> [メディア]に移動し、Tinypng APIキーを挿入します。また、圧縮する画像サイズを選択することもできます。各画像サイズは、1か月あたり500の無料割り当てコンプレッションのうちの圧縮としてカウントされるため、テスト用の元の画像、ページ、投稿サイズを選択してみましょう。新しい投稿を作成し、テスト画像に「特集画像」を設定して、結果を得てください。
500px x 500px - 元のファイルサイズ：29kb、損失の圧縮ファイルサイズ：19kb、保存：34.5％
400px x 400px - 元のファイルサイズ：21kb、損失の圧縮ファイルサイズ：13kb、保存：38.1％
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などの静的コンテンツを提供するように設計されています。
WordPress用の2つの利用可能なCDNソリューションを見てみましょう
photon光子は次のように説明されています
…WordPress.comまたはJetPackに接続されたWordPressサイトでホストされているサイトの画像加速および編集サービス。つまり、ホストの負荷が少なく、読者のためのより速い画像
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％
JPEG画像のパフォーマンスが向上し、PNG画像がTinypngを使用してパフォーマンスが向上しているため、Tinypngに同様のファイルサイズの節約を達成することができます。
サードパーティcdns 
このアプローチの利点は、画像配信の最適化に限定されていないことです。 CSS、JavaScriptファイル、およびその他の静的ファイルタイプをCDNが提供することを指定できます。また、WordPressのインストールで、Tinypngなどの画像最適化プラグインを保持することもでき、CDNに保存される前に画像が最適化されるようにすることもできます。より多くのCSSおよびJavaScriptコンテンツと画像を持っているサイトにいる場合、これはより良い解決策かもしれません。
maxcdnをセットアップするには、Webサイトにアクセスして、プルゾーンの作成
プルゾーンの名前（通常はWebサイト名）を入力してください。これはURLとオプションのラベルです：
次に、maxcdnを使用するようにWordPressインストールを構成する必要があります。 W3 Total Cacheを使用します。これは、MaxCDNサポートに付属のWordPressプラグインです。
W3合計キャッシュをセットアップするには、プラグインに移動します> WordPress管理インターフェイスに新規を追加し、「W3合計キャッシュ」を検索します。
[今すぐインストール]ボタンをクリックし、インストールされたらプラグインをアクティブにします。
アクティブになったら、WordPress管理メニューのパフォーマンス> CDNに移動し、構成パネルまでスクロールします。
]フィールドに貼り付けます： すべてが機能した場合、キーは有効です通知は画面に表示されます。 [すべての設定]をクリックして、
この記事では、WordPress用の多くの画像最適化とCDNプラグインをレビューしました。 Jetpackプラグインの一部であるPhoton CDNは、最適化された画像を配信し、すべての解像度に合わせて拡大し、CDNから提供される単一の最も効果的なソリューションを提供します。 既にCDNを所定の位置に持っている、または1つを使用しないか、Jetpackを使用しない人の場合、TinypngのWordPressプラグインは、PNG画像のPhotonよりも画像最適化をわずかに改善し、Aと組み合わせて役立つことができます。サードパーティのCDNプロバイダー。 WordPressの画像最適化は、いくつかの理由で重要です。まず、ウェブサイトの読み込み速度が向上します。大規模で最適化されていない画像は、サイトを遅くし、ユーザーエクスペリエンスとSEOランキングに悪影響を及ぼします。第二に、最適化された画像はより少ないストレージスペースを使用します。これは、限られたホスティングプランを使用している場合に有益です。最後に、最適化された画像はプロフェッショナルで魅力的に見えます。これにより、サイトの全体的な美学とユーザーエンゲージメントを高めることができます。 品質を失うことなく画像を最適化するにはどうすればよいですか？画質を分解することなく、ファイルサイズを削減する圧縮。多くのWordPress Image Optimizationプラグインがこの機能を提供しています。さらに、ニーズに基づいて適切な画像形式（JPEG、PNG、GIFなど）を選択することも、画質を維持するのに役立ちます。 WordPressの理想的な画像サイズは、主にテーマに依存します。ただし、一般的な経験則では、全幅画像に対して画像幅を1200〜1600ピクセルに保つことです。小さい画像の場合、通常は600〜800ピクセルの幅で十分です。メディアライブラリ、画像の選択、「Altテキスト」フィールドに記入します。 ALTタグは、SEOとアクセシビリティにとって重要です。検索エンジンや視覚障害のあるユーザーへの画像コンテンツを説明しているためです。画像を最適化できるようにします。この機能は、最適化するための多数の画像がある場合に非常に便利です。 モバイルデバイスの画像を最適化するには、異なる画面サイズに合わせて調整するレスポンシブ画像を使用できます。 WordPressは、アップロードする各画像のいくつかのサイズを自動的に作成し、各デバイスに最も適切なサイズを提供します。いくつかの画像データは、画質の損失につながる可能性があります。一方、ロスレス圧縮により、データを削除せずにファイルサイズが削減され、元の画質が維持されます。 WordPressサイトにアップロードします。これにより、サイトが高速かつ効率的なままであり、可能な限り最高のユーザーエクスペリエンスを提供します。
結論 WordPressでの画像の最適化の習得に関するよくある質問
WordPressでの画像最適化の利点は何ですか？
画像の最適化はSEOにどのように影響しますか？ Googleのような検索エンジンは、Webサイトの読み込み速度をランキングファクターと見なします。最適化された画像はより速く読み込まれ、サイトの速度を向上させ、したがってSEOランキングを改善します。さらに、正しいALTタグを備えた適切に最適化された画像は、サイトの検索結果にサイトに表示され、サイトへのトラフィックを増やすのに役立ちます。画像最適化のためのいくつかの優れたWordPressプラグイン。最も人気のあるものには、EWWW Image Optimizer、Smush、ShortPixelが含まれます。これらのプラグインは、画像をアップロードするときに画像を自動的に圧縮および最適化し、時間と労力を節約します。
モバイルデバイスの画像を最適化するにはどうすればよいですか？
以上がWordPressでの画像最適化のマスターの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
