高速画像配信：WebおよびCDNの画像を最適化します

サイトのパフォーマンスを後押ししますか？ Web用の画像を最適化してください！

それはどういう意味ですか？これは、サイトを遅くすることなく訪問者を楽しませる高品質の画像を提供することを意味します。

Etsyのバイヤーの90％が、画質が購入決定に影響を与えると言っていることをご存知ですか？同様に、Airbnbは、プロの写真を備えたリスティングは、ないものよりも20％多くの予約を取得することを発見しました。美しい画像はコンバージョンを高めますが、キャッチがあります。大規模で最適化されていない画像は、サイトを大幅に遅くすることができます。

私たちはあなたの背中を持っています！そこで、画像の最適化が登場します。

このガイドでは、WebとCDNSの画像を最適化して、読み込み時間とパフォーマンスの向上を確保するための最良のテクニックを学びます。

3 Webの重要な画像最適化手法

Webの画像を最適化する効果的な方法は、適切な形式とサイズでそれを提供し、品質を失うことなく圧縮することです。最適化の旅を始めるために、3つの基本的なテクニックを調べましょう。

1. Webに適切な画像形式を選択します

JPEG、PNG、GIFなどの古い形式はWebをよく提供していますが、WebPやAvifなどの次世代形式の効率が不足しています。これらの最新の形式は、優れた圧縮で同じ品質を提供します。つまり、画像は詳細を犠牲にすることなく速く読み込まれます。

例とベストプラクティス

• より小さなファイルサイズとより良いパフォーマンスのために、常に画像をWebpまたはAVIFに変換してください。

GoogleのWeb.Devの調査では、WebP画像が同等のJPEGよりも25〜34％小さいことがわかりました。以下では、JPEGファイルの重量は43.84kb、Webpはわずか29.61kbであることがわかりますが、品質は同じです。

IMG

2。適切な寸法の画像のサイズ変更

ブラウザがその場でそれらをロードしてサイズ変更する必要があるため、必要な画像を使用するとウェブサイトが遅くなります。表示される正確なサイズに画像をスケーリングすることにより、ファイルサイズを削減し、読み込み速度を向上させます。

例とベストプラクティス

サイトの実際のディスプレイサイズに一致するように、常に画像をサイズ変更してください。

• WordPressのブログ投稿では、800pxの幅が理想的です。

• WooCommerce製品画像の場合、最低800px×800pxを使用すると明確さが保証されます。

3。品質の損失なしに画像を圧縮します

画像圧縮により、ファイルサイズが削減されます。これは、HTTP要求が少なくなり、画像が速くなることを意味します。ただし、圧縮しすぎると写真がぼやけている可能性があり、ウェブサイトの信頼性と変換率に影響を与えます。重要なのは、適切なバランスを見つけることです。顕著な品質損失なしのファイルサイズが小さくなります。

例とベストプラクティス

画質を変更せず、可能な限りファイルサイズを削減する圧縮ツールを使用します。

たとえば、これら2つの画像の違いを見つけることができますか？

できません！右側のものは80％圧縮されていますが、品質は同一のままです。

3つの基本的な戦略がわかったので、より高度なテクニックを使用して画像の最適化の取り組みをさらに進めて、Webにさらに準備を整えることができます。

高度なWeb画像最適化戦略

画像の最適化は、圧縮および次世代形式を超えています。パフォーマンスとSEOを改善するために、怠zyなロード、レスポンシブ画像、Alt-textの最適化などの高度な手法を検討してください。

1.初期ページの読み込みを速くするために怠zyなロードを実装します

Web用の画像を準備する最初の高度な手法は、怠zyなロードを適用することです。オフスクリーン写真が必要になるまで、オフスクリーン写真の読み込みを延期することにより、初期ページの読み込み時間を短縮するのに役立ちます。

Lazy Loadingを実装することにより、ユーザーのViewPortで表示された場合にのみ画像が読み込まれ、ページがより速く感じられるようにします。

例とベストプラクティス

「タイの10ベストビーチ」というタイトルのWordPressブログ投稿を読んでいると想像してください。 10個の大きな画像すべてを一度にロードする代わりに、怠zyなロードは次のことを保証します。

• 最初のビーチ画像は、ページにすぐにロードされます。

• 残りの画像は、下にスクロールしたときにのみロードされ、初期負荷時間が短縮されます。

あなたがする必要があるのは：

• フォールドの下の画像には、ネイティブロード=「lazy」を使用します。

• 怠zyなロードからヒーローの画像と重要な視覚要素を除外します。

2。最初にロードする重要な画像をプリロードして優先順位付けします

同じラインに沿って、Web画像の最適化のための別の高度な手法は、ブラウザが最大のコンテンツフルペイント（LCP）要素などの重要な画像に優先順位を付けることを保証することです。

LCPは、最大のコンテンツがページにロードされるまでにかかる時間を測定するコアWebバイタルの1つです（通常は画像です）。 LCPを改善するには、このキーイメージのレンダリングをできるだけ早くレンダリングするようにブラウザに指示する必要があります。

例とベストプラクティス

WooCommerce製品ページのLCP要素を想像してください。おそらく、主な製品画像です。怠zyなロードを超えて、より速くロードするために、次のこともできます。

• LCP画像でfetchpriority =” high”を使用して、ブラウザにすぐにロードするように指示します。

• 画像が最初のHTMLにない場合は、rel =” Preload”を使用して、ブラウザが事前にロードするようにします。

3.さまざまな画面サイズに応答性のある画像を使用します

レスポンシブ画像を使用すると、ユーザーのデバイスに基づいてブラウザが最も適切な画像サイズをロードできるようにすることにより、ページの速度が向上します。これにより、特大の画像がより大きな画面で高品質を維持しながら、モバイルエクスペリエンスを遅くすることができなくなります。

例とベストプラクティス

• <picture>要素またはsrcset属性を使用して、ユーザーのデバイスに基づいてさまざまな画像サイズを提供します。

• モバイル、タブレット、デスクトップディスプレイ用に画像を個別に最適化します。

• ページまたはWebサイト全体を構築するときにモバイルファーストを設計します。

参照のための世界中の一般的な画面解像度は次のとおりです。

• デスクトップ：1920×1080、1366×768、1536×864、1280×720

• モバイル：360×800、390×844、393×873、412×915

• タブレット：768×1024、1280×800、800×1280、820×1180

4。SEOのAlt-textの最適化

Alt-Textは、関連するコンテキストを検索エンジンに提供することにより、アクセシビリティを向上させ、画像SEOに貢献します。彼らは画像のテキストの説明を提供し、Google画像のトップ結果で紹介される可能性を高める可能性があります。

例とベストプラクティス

• シンプルで説明的であるが簡潔で、関連するキーワードのみを自然に組み込む。

• キーワードの詰め物を避け、ユーザーフレンドリーで意味のある説明にもっと集中してください。

たとえば、WooCommerce製品の良いAlt-Tagの例は次のとおりです。

「ボタンアップフロントと2つのチェストポケットを備えた女性の特大のブルージャンジャケット。」

このALTタグは説明的で、重要な詳細を含み、SEOのキーワードを自然に統合します。

一方、それは悪い例です（キーワードの詰め物）：「ブルージャンジャケットデニム特大の女性ジャケットトレンディなファッションジャケットの女性」

5。画像配信を速くするためにCDNをレバレンスします

CDNS（コンテンツ配信ネットワーク）は、Web用の画像を準備し、ページ速度を向上させるためのもう1つの効率的な手法です。

CDNSは、キャッシングとオンザフライのサイズ変更を使用して画像の読み込み速度を高め、ユーザーのデバイスの正しいサイズで画像が配信されるようにします。

キャッシュのおかげで、画像が最適化されると、CDNは新しいデバイスが要求するたびに再最適化する必要はありません。それに加えて、画像はユーザーに最も近いサーバー（存在ポイント）から提供され、画像配信を高速化します。

例

Origin Serverはロンドンにありますが、シドニーのクライアントは、製品画像で満たされたWooCommerceサイトにアクセスしたいと考えています。 CDNがなければ、リクエストはロンドンまでずっと移動し、その後シドニーに戻ります。ただし、CDNを使用すると、リクエストはオーストラリアのローカルサーバーによって処理され、画像ははるかに速く読み込まれます。

CDNを使用して画像を最適化するためのベストプラクティス

• 画像CDNはURLに依存して、サイズ、形式、品質などのパラメーターをロードおよび使用する画像を決定するため、URLを確認してください。

• 前述のように、これらの次世代形式が画像の圧縮と品質を改善するため、CDNはAVIFとWebPをサポートしていることを確認します。

• 画像CDNを使用する前に画像（たとえば、圧縮付き）を最適化して、最適化の別のレイヤーを追加できます。
  

Web画像の最適化のためのトップツールとプラグイン

Webの画像を最適化する最良の方法は、WP Rocket、Imagify、RocketCDNなどのパフォーマンス最適化プラグインを使用することです。さらに、SketchやPhotoshopなどのデザインツールは、Web使用のために画像を正確にサイズ変更するのに役立ちます。別の経験則は、完全に応答性の高いWordPressテーマとモバイルに優しいプラグインを使用して、さまざまなデバイスに画像が適切に適応するようにすることです。これらの各ツールを見てみましょう。

1.想像 - 最も簡単な画像最適化プラグイン

Imagifyは、高品質を維持しながら画像を自動的にバルクで圧縮する最も簡単な画像最適化プラグインです。 Imagifyは、前述の3つの基本的な画像最適化手法の適用を支援します。圧縮、次世代変換、およびより簡単な画像のサイズを変更します。

Web最適化に有益な重要な機能

Webの画像の準備に役立つこれらの3つの機能について説明しましょう。

• スマート圧縮モードは、ファイルサイズの削減と視覚品質の間の最高のバランスを自動的に提供します。一度にすべての画像を押して最適化できるバルク圧縮ボタンがあります。

好奇心が強い場合は、元の画像（左）と圧縮された画像（右）で品質が同じであることがわかります。

• プラグインは、より良いWebパフォーマンスを得るために、画像をWebPに自動的に変換します。 Avifに変換するオプションもあります。

• パフォーマンスの問題を回避するために、アップロードで大きな画像をサイズ変更するオプションもあります。

プラグインは本当に初心者に優しいものであり、プロデザイナーである必要はありません。 Imagifyは、あなたに代わってWebの画像を最適化します！月に約200枚の画像で利用できる無料プランがありますので、自分で結果を見ることができます。

2。Photoshop

これは、画像の編集と最適化のための強力なツールです。

• WebP変換は、ファイル> Save > Webpで利用できます。

• 画像圧縮を使用するには、ファイル> [エクスポート] > [Webを保存]に移動し、画像のサイズと品質を調整します。過度に圧縮して品質を失わないように注意してください。
  

3。スケッチ

これは、複数のデバイスの画像のサイズを変更および準備するための優れたツールです。

• iPhone、Android用の事前に作られたモックアップが付属しており、レスポンシブデザインのために画像を簡単に準備できるようにします。

• また、WebP変換をサポートします。ファイル> Export> Webpを使用します。
  

4。CloudConvertとOptimizilla

画像圧縮とフォーマット変換のために多くのオンラインツールが存在しますが、両方を見つけることはまれです。 CloudConvertやOptimizillaなどの画像をオンラインで最適化するために、2つの別々のツールが必要になる可能性があります。

以下の手順に従って、それらを一緒に使用してください

1. CloudConvertを使用して、重いJPEGをWebPに変換します。画像を選択したフィールドにドラッグアンドドロップするだけです。

2. 変換された画像をダウンロードし、Optimizillaなどのオンライン画像コンプレッサーを使用して圧縮します。

5。WPロケット

WP Rocketは、コアWebバイタルを改善しながら、Web用のコンテンツと画像を最適化するための最もシンプルで最も強力なパフォーマンスプラグインです。また、いくつかのPageSpeed Insights監査を簡単に渡すのにも役立ちます。さらに、パフォーマンスのベストプラクティスの80％が即座に適用され、時間と労力を節約します。

Web最適化に有益な重要な機能

WP Rocketは、Advanced Image Optimization Techniquesセクションのほぼすべてのヒントに対処するのに役立ち、オールインワンのパフォーマンスソリューションになります。

各機能について説明しましょう。

• ブラウザとページのキャッシュ（モバイルキャッシュを含む）とGZIP圧縮により、画像やその他の資産がより速くロードされるようにします。
• 重要な画像の最適化：ページの上記の画像を自動的に最適化して、ブラウザによってより速くレンダリングできるようにします。たとえば、LCPイメージはプリロードされ、ユーザーの優先順位にレンダリングされます。
• 怠zyな読み込み：一度にはなく、必要になるまで画像の読み込みを遅らせます。これにより、ユーザーにスクロールするときに画像を表示するだけでページをより速く読み込み、データを保存することができます。

さまざまなニーズのための画像最適化ツールの比較

ニーズに基づいたツールの要約を次に示します。これにより、Webの画像を最適化するための最適なツールを選択できます。

WordPressの簡単で効率的な最適化のため

想像力はあなたの最高の味方です。 WordPressダッシュボードで、圧縮、大きな画像の自動レジング、次世代形式の変換（WebP/AVIF）を処理します。画像を個別にまたは大量に最適化し、技術的な複雑さに対処せずに時間と労力を節約できます。覚えておいてください、Imagifyは、そのスマート圧縮モードのおかげで、ぼやけた画像を提供しないようにします！

WordPressの高度な画像最適化用

キャッシュ、怠zyなロード、LCP画像のプリロード、折り畳みの上の画像の最適化が必要な場合、WPロケットは頼りになるソリューションです。 Imagifyと統合し、数回クリックして荷重速度を上げるための完全なパフォーマンス最適化スイートを提供します。

WordPress以外の基本的な最適化

WordPressプラグインを使用しない場合は、CloudConvertまたはOptimizillaは、バルク画像圧縮とフォーマット変換をサポートする使いやすいオンラインコンバーターです（一度に最大20枚の画像）。ただし、最適化された画像をWordPressに手動で再アップロードする必要があります。

画像サイズを完全に制御するため

Sketch、Photoshop（Advanced）、Gimp、またはPreview（Mac）やPhotos（Windows）などの組み込みツールなどのデザインツールを使用します。スケッチは、さまざまなデバイスの複数のサイズのバリエーションを簡単に作成するのに最適です。 Photoshopも素晴らしいですが、それは本当に急な学習曲線です。

画像サイズと圧縮レベルを完全に制御するため

Photoshopを使用すると、画像をエクスポートする前に圧縮レベルを正確に制御できます。しかし、大きな力で大きな責任があり、あなたの写真を圧縮しすぎないようにしてください。

セットアップが簡単な強力なCDN用

WordPress統合を備えた手頃な手間のかからないCDNを探しているなら、RocketCDNは最適です。専用のWordPressプラグインが付属しています。つまり、複雑な技術セットアップ（たとえば、CNAMEレコードなど）が必要ありません。グローバルなプレゼンスポイント（POPS）により、世界中の速い画像配信が保証されます。これは、さまざまな地域の訪問者がいる多言語のWebサイトに最適です。

もちろん、他のCDNは利用可能であり、パフォーマンスが高くなりますが、多くの場合、より高いコストとより技術的なセットアップが伴います。これは初心者にとって挑戦的です。

Webに対する画像最適化の影響の測定：6メトリック

画像の最適化の影響を測定するために、パフォーマンスツール、レスポンシブチェッカーツール、データツール（Googleアナリティクスなど）、および主要なメトリックを使用して、最適化が機能しているかどうかを判断できます。それらを見てみましょう。

メトリックとKPIのリストは、画像の最適化の取り組みの成功を測定するために追跡できます。

1。完全に読み込まれた時間

ページが完全にロードされるまでにかかる時間を測定します。最適化された画像は、この時間を短縮するはずです。

2。最大の満足した塗料

最大のコンテンツペイント（LCP）は、最大の可視コンテンツ（多くの場合、画像または大きなテキストブロック）がページにロードするのに時間がかかる時間を測定します。通常、画像は負荷時間に影響する最大の要素であるため、それらを最適化するとLCPが直接改善されます。

画像の圧縮とサイズ変更後にLCPスコアが向上した場合、最適化が機能していることを意味します！

3。画像ファイルサイズ

ファイルサイズが小さいことは、品質を失うことなく、読み込み時間を速くすることを意味します。圧縮と次世代形式の変換を実装したら、画像ファイルのサイズが少なくとも40％小さくなっていることがわかります。

4。ページ重量

画像を含むページの資産の合計サイズです。最適化された画像を使用すると、数kbを保存する必要があります。

5。モバイルユーザーからの帰還率

直帰率が高いと、負荷が遅いか、モバイルの応答性が低いことを示している可能性があります。適切なサイズの画像を提供してモバイルユーザーエクスペリエンスを改善する場合、訪問者はコンテンツに関与し、すぐに出発しないようにする必要があります。

6.モバイルユーザーのページの平均時間

ユーザーが長く滞在する場合、それはより良いエクスペリエンスを示唆し、その画像は十分に最適化されています。

また、変更を行う前後に、GTMetrixおよびPagesSpeed Insightsの監査と上位の問題セクションを確認することも役立つことに注意してください。最適化がうまく機能している場合は、「イメージを効率的にエンコードする」、「オフスクリーン画像の延期」、または緑色のマークの「適切なサイズの画像」などの改善が見られるはずです。

画像の最適化が機能しているかどうかを確認するために使用する5つのツール

1。GTMETRIX

灯台を搭載したGtmetrixは、ウェブサイトの速度とパフォーマンスを分析します。

• 画像の最適化のために測定されたKPI：完全にロードされた時間、最大のコンテンツフルペイント（コアWebバイタル）、ページ重量。

• 画像最適化の監査セクション： TOP Issuesセクションでは、改善のための領域を強調しています。

IMG

2。PagesSpeedInsights

Googleの灯台を搭載したツールは、ページのパフォーマンスを評価します。

• 画像最適化のために測定されたKPI：全体のパフォーマンススコア、最大のコンテンツ型塗料。

• 画像最適化の監査セクション：診断セクションは、対処すべき問題を強調しています。

IMG

3。Googleアナリティクス

ウェブサイトのトラフィックとユーザーの動作を追跡し、データ駆動型のマーケティングの決定を下すのに役立ちます。

• 画像の最適化について測定されたKPI ：ボウンス率、デスクトップおよびモバイルユーザーのページの平均時間。

たとえば、これらの手順に従って、モバイルユーザーのページ上の平均時間を測定する

• Googleアナリティクス>エンゲージメント>概要（または特定のページ）に移動します

• デスクトップとモバイルデータを比較します

• 最適化の前後を選択します

4。Cadenceseo.com

これは、ウェブサイトの応答性とモバイルフレンドリーをチェックするための強力なツールです。

• それがチェックするもの：それはあなたのウェブサイトがいくつかのデバイス（タブレット、モバイル、デスクトップ）でどのように見えるかを検証し、あなたに改善する必要があることを示します。

5。想像します

Imagifyは、WordPressライブラリから画像を直接圧縮し、ファイルサイズの節約を追跡します。

• 画像最適化のために測定されたKPI：画像ファイルサイズの削減。

Web画像の最適化における5つの一般的な悪いプラクティス

Webデザインの画像の最適化を開始する前に、これらの5つの標準的な悪いプラクティスを確認してください。これらの落とし穴を避けることは、パフォーマンスだけでなくユーザーエクスペリエンスを改善するための正しい軌道に乗っていることを確認するのに役立ちます。

質の損失につながる過剰圧縮

画像を圧縮しすぎると、品質が低くなり、ユーザーエクスペリエンスがマイナスになる可能性があります。常に圧縮と視覚品質のバランスをとることを常に目指しています。

モバイル固有の画像の最適化を無視します

さまざまなディスプレイサイズ（モバイル、タブレット、デスクトップなど）の画像を変更しないと、主に小さなコンテナで大きな画像が使用されている場合、負荷時間が遅くなり、不必要なデータ使用につながる可能性があります。コンテキストに応じて画像を変更することは、最適化されたパフォーマンスに不可欠です。

GIFやJPEGなどの「重い」形式に固執します

GIFやJPEGなどの古い形式に依存すると、ファイルサイズが大きくなる可能性があります。 webpやavifなどの新しいフォーマットを使用することを検討してください。

折りたたみの上に画像が怠loading

怠zyなロードは画面外の画像に優れていますが、折り目の上のような必須画像を優先順位付けして、知覚される荷重時間を改善する必要があります。

ロスレス圧縮のみを使用します

信頼できる圧縮ツールを使用している場合は、常に損失のある圧縮を選択する必要があります。損失のない圧縮とロスレス圧縮の視覚的な違いに気付かないはずです。 Lossy Modesは、ロスレスモードよりもはるかにファイルサイズを削減します。

まとめます

基本的なテクニックから高度なテクニックまで、Web用の画像を最適化するために設備が整っている必要があります！適切なツールを使用すると、画像が完全に最適化されていることを確認し、CDNを活用してページの速度を高めることができます。また、主要なパフォーマンスメトリックと最高のテストツールで進捗を追跡する方法も知っています。

リスクなしで最適化の旅をキックスタートするには、これら2つの強力なステップに従ってください。

• Imagifyから始めます - 無料でインストールし、無料で最大200枚の画像を最適化します。さらに、必要に応じて元の画像を復元できます。

• WP Rocketのインストール - キャッシュや重要な画像の最適化など、パフォーマンスのベストプラクティスの80％から即座に恩恵を受けます。 14日間の払い戻し保証がありますので、リスクフリーでも試すことができます！