WordPress で画像を最適化および圧縮する方法 (3 ステップ)
公開: 2023-04-13画像とビデオは、Web ページを訪問者にとってより魅力的で興味深いものにする優れた方法です。 しかし、Web サイトに多くの画像があると、読み込み時間が遅くなる可能性があります。 これは、ページの検索エンジンのランキングとサイトのユーザー エクスペリエンス (UX) に影響を与える可能性があります。
幸いなことに、画像を最適化および圧縮して、サイトの速度を上げることができます. WordPress のエキスパートでもまったくの初心者でも、プラグイン、シンプルなオンライン ツール、デバイスの画像エディターなど、自分に合った方法を見つけることができます。
この投稿では、画像の最適化と圧縮を検討すべき理由を詳しく見ていきます。 次に、これを行う 3 つの方法を示し、画像配信を高速化するためのその他の有用な戦略を探ります。
画像を圧縮して最適化する理由
WordPress で画像を最適化する方法を学ぶ前に、なぜこれを行う必要があるのかを理解することが重要です。 実際には、最適化されていない大きな画像は多くの帯域幅を占有し、Web ページの読み込みが遅くなる原因となる可能性があります。 参考までに、読み込み時間が遅い場合、わずか 4 秒の遅延で直帰率が 24% 上昇する可能性があります。
さらに、ページ速度は Google のランキング要素です。 したがって、読み込み時間が遅いと、ページが検索結果の下位に表示され、検索者に表示されにくくなる可能性があります.
画像を最適化することで、より少ないピクセル数とバイト数でページに表示しながら、写真の見栄えを良くすることができます。
これを行うときは、好みの画像形式について考える必要があります。 たとえば、PNG は「ロスレス」圧縮を利用できるため、ファイル サイズがあまり小さくなりません。 これにより画質を維持できるため、Web グラフィックやアイコンに最適です。
または、JPEG 画像を使用することもできます。 ファイルサイズははるかに小さいですが、JPEG は PNG に比べて画質が低下する可能性があります。 ただし、ほとんどの場合、大きな違いはありません。
WordPress で画像を最適化および圧縮する方法 (3 ステップ)
ウェブサイトにとって画像の最適化が重要である理由がわかったので、WordPress の画像を最適化して圧縮するための 3 つのステップを見てみましょう。
ステップ 1: 画像を圧縮する
方法 1: オンライン圧縮ツールを使用する
オンライン圧縮ツールは、画質に目立った違いを生じさせずに画像ファイルのサイズを縮小する簡単な方法です。
ただし、サイトに画像を追加するたびに、Web サイトに再度アクセスする必要があります。 これにはかなり時間がかかる場合がありますが、一部のサービスでは画像を一括でアップロードできます。
最も人気のあるオンライン圧縮ツールの 1 つは Tiny PNG です。 これは、完全な初心者に適したフリーミアムのユーザーフレンドリーなプラットフォームです。
一度に最大 20 枚の画像を圧縮でき、JPEG、PNG、または WebP からお好みの形式を選択できます。
画像をウェブサイトにアップロード/ドロップするだけで、プロセスがすぐに開始されます。 これには数秒しかかかりません。 次に、圧縮された画像を好みのクラウド ストレージの場所に直接保存するか、ファイルをコンピューターにダウンロードできます。
もう 1 つの便利なオンライン ツールは Compress JPEG です。 Tiny PNG と同様に、一度に最大 20 個の画像を圧縮して個別にダウンロードするか、zip フォルダーにグループ化することができます。
圧縮 JPEG の利点は、JPEG と PNG に限定されないことです。 GIF や PDF を圧縮することもできます。 PDF はドキュメント ファイルですが、多くの場合、画像、グラフ、およびハイパーリンクが含まれています。
さらに、PDF は数百ページにも及ぶ場合があり、ファイル サイズが大きくなります。 サイトで提供するダウンロード可能な PDF ファイルを圧縮することで、ユーザーに不快な体験を与えることを回避し、ファイルを開いた人なら誰でも簡単に共有してアクセスできるようにすることができます。
方法 2: 画像エディターを使用して手動で画像のサイズを変更および圧縮する
または、画像エディターで画像のサイズを変更して圧縮することもできます。 この方法では、画像のサイズ変更とトリミングをより詳細に制御できますが、非常に基本的な編集機能しか提供されません。
もちろん、外部の編集ツール (Adobe Photoshop など) を好むかもしれませんが、これらは高価になる可能性があり、このソフトウェアのほとんどは学習曲線が急です.
最もアクセスしやすい方法は、オペレーティング システムのフォト エディターを使用することです。 デバイスのネイティブ ツールを使用して画像サイズを縮小し、重要でない部分を切り取ることができます。
macOS で写真アプリケーションを使用してこれを行う方法の例を次に示します。 まず、写真を開いて画像を選択します。 次に、 Editを押します。
ここで、 [トリミング]を選択し、角をドラッグして画像を縮小します。
[カスタム]をクリックして、画像の正確な高さと幅を指定することもできます。 ボックスに寸法を入力し、横向きまたは縦向きモードを選択するだけです。 画像は即座に調整されます。
または、デフォルトのオプションのいずれかを使用することをお勧めします。 たとえば、ソーシャル メディアに画像を投稿する予定がある場合は、正方形の設定が役立ちます。
適用した変更に反対する場合は、 [リセット]をクリックして画像を元の形式に戻すことができます。 次に、イメージに満足したら、 [完了]をクリックします。
前述したように、Adobe Photoshop などのサードパーティ ツールを使用して、画像のサイズ変更や圧縮を行うこともできます。
この方法を選択する場合は、画質を維持しながらファイル サイズを小さく保つために、JPEG と PNG に固執することを検討することをお勧めします。
ステップ 2: Jetpack のイメージ CDN を介してイメージを提供する
コンテンツ配信ネットワーク (CDN) は、サーバーのネットワークを使用して、訪問者の場所に基づいてサイトを迅速かつ効率的に表示する強力なツールです。 どの CDN もウェブサイトの速度を向上させるのに役立ちますが、Jetpack のイメージ CDN は、比類のない Photon テクノロジにより際立っています。
Photon は、各画像を WebP などのよりモダンで軽量なフォーマットに再エンコードすることから始めます。これにより、ファイル サイズが縮小され、サーバーの負荷が軽減されます。 次に、訪問者が使用している特定のデバイスと画面サイズに基づいて各画像を最適化し、すべての個人に合わせたエクスペリエンスを作成します。 これは、すべての読者、顧客、およびクライアントがサイトで可能な限り最高のユーザー エクスペリエンスを得ることができることを意味し、ブランディング、販売、および検索エンジンのランキングに最適です。
そして、Jetpack の CDN の設定はこれ以上簡単ではありません。 開始方法は次のとおりです。
- WordPress ダッシュボードで、 [プラグイン] → [新規追加] に移動します。 「ジェットパック」で検索してください。
- [今すぐインストール] → [アクティブ化] をクリックします。
- Jetpack を WordPress.com アカウントに接続するように求められます。これにより、強力な機能を最大限に活用できます。
- WordPress ダッシュボードに戻り、 Jetpack → 設定 → パフォーマンスに移動します。
- [パフォーマンスと速度]セクションで、 [サイト アクセラレータを有効にする] をオンに切り替えます。
以上です！ Jetpack はすぐに機能します。
ステップ 3: 速度最適化プラグインをインストールする
最後にパワーをブーストして仕上げましょう。 これには速度最適化プラグインが必要です。選択するのに最適なプラグインは Jetpack Boost です。 このツールは自動的に機能し、新しい画像やコンテンツをサイトに追加すると常に適応します。
重要な領域でサイトのパフォーマンスを測定し、レポートを提供するため、進捗状況を測定できます。 次に、訪問者と検索エンジンの両方にとって最も重要な指標を具体的にターゲティングします。
Jetpack Boost はすばやく簡単にインストールできます。 無料の Jetpack Boost プラグインを選択するか、プレミアム バージョンにアップグレードしてより高度な機能を利用できます。
有効にすると、WordPress ダッシュボードでJetpack → Boostに移動できます。
ここでは、スコアを生成して、デスクトップおよびモバイル デバイス全体での現在のパフォーマンスを評価できます。 これは、改善が必要な領域を特定するのに役立ちます。
プラグインの好みの設定を構成することもできます。 たとえば、CSS の最適化を有効にしたり、重要でない JavaScript を延期したりすることができます。 これにより、最も重要なスタイルと画像をすばやく読み込むことができます。
これを行うには、関連する設定のトグルをスライドするだけです。
最後のオプションは遅延画像読み込みです。 これは、必要なときにのみ画像を読み込むことで速度を上げるのに役立つ便利な機能です。
基本的に、ページのさらに下に表示される画像は、訪問者が到達するまで読み込まれません。 これは、サーバーの負担を軽減する優れた方法です。
Jetpack Boost の優れた点の 1 つは、設定を構成すると、サイトのバックグラウンドでプラグインが実行されるため、負荷がかからないことです。
WordPressの速度最適化を自動操縦に設定する方法
画像やグラフィックを WordPress にアップロードする前に圧縮することは、プロセスの通常の部分になるはずです。 次に、適切なツールを配置して、作業は完了です。
Jetpack のイメージ CDN と組み合わせた Jetpack Boost は、WordPress の速度最適化を自動操縦で行う最も簡単な方法です。 これらのツールはサイトのバックグラウンドで動作するため、投稿やページに新しい画像を追加するたびに煩わされることなく、簡単に「設定して忘れる」ことができます.
Jetpack の CDN は、新しい画像を自動的に検出してサーバーのネットワークに追加し、すぐに適切なファイル形式での提供を開始し、個々の訪問者のニーズに基づいてサイズを変更します。
Jetpack Boost は、必須ではない JavaScript と遅延読み込みの画像を引き続き延期します。新しい画像を追加する場合でも同様です。 さらに、有料プランでは、サイトに変更を加えるたびに重要な CSS が自動的に生成されます。
速度の最適化を自動操縦に設定することで享受できる多くの利点があります。
- 生産性。 他のツール間を行ったり来たりするのではなく、より重要なタスクに集中する時間を確保できます。
- 信頼性。 何があってもサイトの速度が最適化されているので安心できます。
- スピード。 最適化は、新しい画像をアップロードしたり、コンテンツを更新したりするとすぐに開始され、サイトの他の部分に注意を向けている間も継続します。
- 正確さ。 手作業のプロセスでは、常に人為的ミスの余地があります。 CSS を間違えたり、間違ったファイル タイプを選択したり、間違った寸法を入力したりする可能性があります。 自動操縦での速度の最適化により、設定を構成したら、毎回思いどおりの画像を正確に取得できます。
これらすべてを念頭に置いて、Jetpack CDN と Jetpack Boost を組み合わせることは、画像と速度を最適化するための最良の方法です。 生産性を最大化し、検索エンジンのランキングを上げ、優れたユーザー エクスペリエンスを提供できます。
画像配信を最適化するための追加手順
画像を最適化して圧縮する方法がわかったので、画像配信を最適化するために実行できる追加の手順を見てみましょう。
モバイル デバイス用に画像のサイズを変更する
モバイル デバイス用に画像のサイズを変更することは、画像配信を高速化するもう 1 つの優れた方法です。 これにより、スマートフォン、タブレット、デスクトップを含むすべての画面サイズでスムーズに表示される画像を含むレスポンシブ Web サイトを作成できます。
このようにして、訪問者が Web サイトへのアクセスに使用するデバイスに関係なく、すべての訪問者のユーザー エクスペリエンスを最適化できます。 モバイル トラフィックは全世界の Web トラフィックの 60% 近くを占めているため、これは重要です。 さらに、Google は 2015 年に、モバイル フレンドリーな Web サイトに高い検索ランキングで報酬を与えることを開始しました。
読み込みが不十分なコンテンツ、不具合のあるページ、または画像の欠落を提供すると、ユーザー エクスペリエンスが著しく損なわれ、訪問者が別の場所に送られる危険性があります。 優れた解決策は、さまざまなデバイス用に画像のサイズを自動的に変更する Jetpack CDN をインストールすることです。
外部ソースからの画像の埋め込みを避ける
読み込み時間が遅くなるもう 1 つの要因は、画像のリダイレクトです。 これらは、外部ソースから画像を埋め込むときに発生します。 幸いなことに、この問題は簡単に解決できます。
Web サイトの速度を上げて UX を最適化するには、画像をコンピューターに保存するか、クラウドなどのリモートの場所に保存します。 次に、WordPress Web サイトに画像を直接アップロードできます。
画像のサムネイルを最適化する
最後に、e コマース Web サイトを運営している場合は、サムネイルを最適化することで画像配信を促進できます。
サムネイルが大きく最適化されていない場合、読み込み時間が遅くなり、訪問者をイライラさせる可能性があります。 その結果、顧客を失うことさえあります。
サムネイル ファイルのサイズをできるだけ小さくすることが重要です。 これは、一度に多数のサムネイルを表示する可能性があるカテゴリ ページに特に関連します。 これは、最適化されていない画像が大量にあると、サイトの速度が大幅に低下する可能性があるためです。
8月のアパレルからの画像
さらに、サムネイルに関しては、画像の品質よりもファイルの削減を優先する場合もあります。特に、画像が非常に小さい場合、Web サイトの訪問者は品質の低下に気付かない可能性が高いためです。
WordPress サイトを高速化するために他に何ができますか?
WordPress サイトを高速化する最も簡単な方法の 1 つは、Core Web Vitals スコアを改善することです。 このスコアは、Google がサイトのパフォーマンスを測定するために使用する一連の指標によって決定されます。 たとえば、LCP は、ページ上の最大の要素 (ヒーロー画像など) の読み込みにかかる時間を指します。
FCP は、コンテンツの最初の部分がページに読み込まれるまでにかかる時間を評価します。 非常に大きな画像ファイルを使用すると、LCP および FCP スコアが低くなり、検索ランキングに影響を与える可能性があります。
サイトを高速化するその他の便利な方法には、CSS の縮小、未使用の CSS の削除 (または延期)、JavaScript の解析の延期などがあります。
WordPress の画像を最適化して圧縮する
ビジュアルは Web ページに追加するのに最適ですが、最適化されていないメディア ファイルが多すぎると、サイトの重荷になる可能性があります。 これにより、パフォーマンスが低下し、ユーザー エクスペリエンスが損なわれる可能性があります。 幸いなことに、WordPress で画像を最適化して圧縮することで、これを修正できます。 そうすれば、訪問者がどこに住んでいても、どのデバイスを使用していても、コンテンツをすばやく提供できます。
要約すると、WordPress の画像を最適化および圧縮するための 3 つのステップを以下に示します。
- ツールまたは手動で画像を圧縮する
- Jetpack のイメージ CDN を介してイメージを提供します
- Jetpack Boost などの速度最適化プラグインをインストールする