WordPress用の画像を最適化する方法、完全ガイド

後者のデータは非常に多いため、ウェブ上の人々はデータを消費する時間があまりありません。データが多すぎて、すべてを読む時間がないのです。最新のWebのコンテンツ管理者としてのあなたの仕事は、スループットを最大化することです。少ない言葉で表現すればするほど、仕事が上手になります.


画像が(非常に)重要である理由?

投稿や記事で画像を使用する(する必要がある)理由はたくさんあります。

  • 画像は、行動を促すフレーズ(CTA)の視覚的刺激となります。 CTAは、訪問者に実行してもらいたいあらゆるタスクです。一般的なCTAには、ニュースレターの購読、ソーシャルメディアでの記事の共有、製品の購入などがあります。.
  • 画像は、ライターがリーダーと確立しようとしている接続を強化します.
  • 画像は少ないことで多くのことを伝える.

したがって、読者の心にマークを残すために、プレゼンテーション(ブログ投稿、非公式レポート、実際のP​​owerPointプレゼンテーションなど)で正しい画像を使用することが本質的に重要です。!

ちょっと待って!問題があります!

画像は最新のウェブサイトで使用される帯域幅の約63%を占めるため、速度を適切に最適化することがますます重要になっています.

ページの読み込み時間が1秒遅れると、コンバージョン率が7%低下する可能性があります

人々の注目の幅は短い(現代のコンテンツ制作率のマイナス面の1つ)ことがわかっています。適切な画像を使用しても、許容時間内に読み込まれない場合、関心は失われます.

10最も一般的な画像最適化エラー

ほとんどのサイトに問題があります。優れた画像を使用していますが、画像が訪問者に提供される方法が不十分です。サイズが大きい、最適化が不十分、形式が正しくない、サイズ(サイズ)が不必要に大きい、画像が反応しない、不注意なSEOエラーなどが、最新のWebで直面する最も一般的な問題の一部です。今日の記事では、これらの問題に対処します!

1.大きなサイズ

「追加のフライ」は必ずしも良いとは限りません

これは定番です。サイトの「チーム」ページに150×150ピクセルの写真が必要だとします。通常、5MPヘッドショットを使用し、少し編集して、最後にアップロードします.

問題を見つけましたか?実際の5MP画像を直接アップロードする人もいます。 WordPressテーマは5MP画像全体(5 x 10 ^ 6ピクセル)をロードし、必要なサイズの150x150pxに縮小するようブラウザーに要求します。つまり、ブラウザには元の画像の0.0045%しか表示されません。!

スタックパスCDNなどのコンテンツ配信ネットワークを介して画像を提供している場合でも、訪問者と訪問者の両方の帯域幅を浪費し、ハードディスク領域をより多く消費し、ロード時間を増やします。サイトに必要な機能はありません.

常に必要なサイズに画像のサイズを変更し(サイズ変更とはダウンサイズを意味します)、アップロードします!

ImageResize.org

これを行うのに特別なソフトウェアは必要ありません。次のような無料のオンラインツールがあります。 ImageResize.org を使用して、画像のサイズをすばやく変更して最適化できます。写真の設定をアップロードして調整するだけです。完了したら、サイトで使用するために最適化された画像をダウンロードします。彼らはまた、 画像コンプレッサー ファイルサイズを減らしたいだけなら.

役立つツール:

  • IrfanView 最適化、透かし、境界線などの高度なオプションを使用して画像のバッチサイズを変更する優れたフリーウェアです.
  • ImageMagick は、さまざまなプログラミング言語やオペレーティングシステムで使用できる高度なオープンソースツールです。独自のアプリを作成するか、コマンドラインから簡単に使用できます.
  • ImageOptim (Mac)フォルダ全体をドラッグして、複数の画像をすばやく最適化できます.
  • TinyPNG APIを備えたオンライン画像圧縮ツールです.

2.不適切な画像フォーマット

シャッターストック_108312266

画像に使用されるフォーマットは重要な役割を果たします。一般的な経験則として、 PNG ベクターグラフィックスやクリップアートなどのコンピューター生成画像に使用します。 JPEG さまざまな色の写真や画像用。詳細な説明はこちらをご覧ください 素晴らしいStackOverflow回答.

3.プログレッシブJPEGを使用しない

ベースライン(通常)JPGとプログレッシブJPG

ベースライン(通常)JPGとプログレッシブJPG

一般的な人にとって、JPEGにはベースラインとプログレッシブの2つのタイプがあります。視覚的には、どちらも同じです。違いは、ロード方法にあります。

  • ベースラインJPEGには、画像全体を含む1つのレイヤーしかありません。リクエストされると、画像全体が一度に読み込まれます.
  • プログレッシブJPEGは、複数のレイヤーで画像を構成します。プログレッシブJPEG画像はレイヤーごとに読み込まれ、徐々に品質が向上し、最終的にはロスレスビューが得られます.
IrfanViewはプログレッシブJPEGによるバッチ変換をサポートしています

IrfanViewはプログレッシブJPEGによるバッチ変換をサポートしています

すべての主要な画像サイズ変更機能により、プログレッシブJPEGとして画像を保存できます.

4.遅延ロードを使用しない

遅延読み込み 素晴らしいです 省資源 訪問者が画像のビューフレームまでスクロールダウンしたときにのみ画像が読み込まれる手法。 「2014年に最も燃費の良い15台の車」という記事を考えてみましょう。当然、この記事には少なくとも15枚の画像が含まれます。また、ディスプレイデバイス(モニター、タブレット、スマートフォン)の高さに関係なく、15個の画像すべてをビューフレームに収めることはできません。すべての画像を表示するには、下にスクロールする必要があります.

遅延読み込みを有効にすると、訪問者が画像の近くにいる場合にのみ画像が読み込まれます。つまり、下にスクロールして表示すると、画像が読み込まれ始めます。ただし、最初の数枚の画像は、ビューフレーム内にいるため、瞬時に読み込まれます。遅延読み込みは両端の帯域幅を節約し、読み込み時間を改善します! WordPressの遅延読み込みは、 BJ Lazy Loadプラグイン.

5. CDNを使用しない

cdn-network

コンテンツ配信ネットワーク(CDN)を使用すると、訪問者の場所に物理的に最も近いサーバーから画像が提供されます。インドからの訪問者が画像を要求し、CDNが東京とニューヨークにPOP(Point of Presence、または単にサーバー)を持っている場合、画像は東京にあるサーバーから提供されます.

大量のトラフィックがある場合は、ロード時間を短縮して全体的なパフォーマンスを向上させるために、WordPressでCDNをセットアップする必要があります。ここWPExplorerでは、 クラウドフレア. 新しく生まれたサイトの場合は、無料のCDNサービスのリストをお勧めします.

6.「alt」属性を宣言しない

「alt」属性は、検索エンジンの画像を示します。このフィールドに入力したテキストは、画像を読み込めない場合に備えてユーザーに表示されます。多くの人は、これらのフィールドを空白のままにする傾向があります。これはSEOにとって非常に有害であり、トラフィックを失うことになります。常に画像のaltタグにサイトのキーワードを含めるようにしてください.

7.画像を最適化しない

鉛筆クレヨン-ポイント

最適化された画像は、通常の画像より40%軽量です。これにより、ロード時間が改善され、帯域幅が節約されます。フレディのベストワードプレス画像最適化プラグインのリストから、私たちはお勧めします WPSmush.it 画像を最適化する. Kraken.io は、画像を簡単に圧縮するための優れたオンラインオプションでもあります。ここWPExplorerでは常にこの機能を使用して、注目の画像を投稿やテーマのデモにアップロードする前に最適化しています.

8.レスポンシブ画像

レスポンシブウェブデザインはこちら

レスポンシブウェブデザインはこちら

サイトがレスポンシブであっても、画像がレスポンシブであるとは限りません。つまり、22インチのデスクトップ画面に使用するヘッダー画像は、5インチのiPhoneにも配信されます。画像をアップロードすると、WordPressはそれを複数のバージョン(サムネイル、中、フルサイズなど)にサイズ変更します。これは開発者が変更できます。適切にコーディングされたテーマは、「中」サイズの画像を提供し、帯域幅を節約します.

Picturefill.WP プラグインはイメージタグを新しいものに置き換えます メディアクエリに基づいて異なる画像を提供する要素。これはかなり実験的であり(バグがあることを意味します)、ライブサイトでは使用しないでください.

9.画像のキャプション

キャプションは必ずしも必要なわけではありませんが、チュートリアルのスクリーンショットなど、必要な場合もあります。画像にキャプションを付けると、読者がSEOを向上させながらトピックをよりよく理解できます.

10.画像ファイル名

検索エンジンの観点からファイル名を考えてください。画像の「タイトル」タグと同じテキストを使用します。また、サイトに最も関連性の高いキーワードを含めるようにしてください.

結論

ヒーロー-11

イメージSEOは、新旧を問わず、どのWebサイトにとっても非常に重要です。画像SEOを実装する人々 正しく (それは時々かなり平凡かもしれません)、かなりの量の有機的なトラフィック(最良の種類のトラフィック)を獲得するために立ちます ロングラン.

素晴らしい最適化手法をお持ちですか?離れて!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me