ウェブサイト検索

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

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

なぜ画像は（非常に）重要なのでしょうか?

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

  • 画像は行動喚起 (CTA) の視覚的な刺激として機能します。 CTA には、訪問者に実行してもらいたいあらゆるタスクを指定できます。一般的な CTA には、ニュースレターの購読、ソーシャル メディアでの記事の共有、製品の購入などが含まれます。
  • 画像は、作家が読者と確立しようとしているつながりを強化します。
  • 画像はより少ないものでより多くを伝えます。

したがって、読者の心に残るためには、プレゼンテーション (ブログ投稿、非公式レポート、実際の PowerPoint プレゼンテーションなど) で適切な画像を使用することが非常に重要です。

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

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

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

人々の注意持続時間は短いことがわかっています (現代のコンテンツ制作速度の欠点の 1 つ)。適切な画像を使用したとしても、許容できる時間内に読み込まれない場合は、興味が失われます。

ほとんどのサイトが同じ問題を抱えています。優れた画像が使用されていますが、訪問者に画像が提供される方法が不十分です。サイズが大きい、最適化が不十分、不正な形式、不必要に大きい寸法 (サイズ)、応答しない画像、不注意な SEO エラーなどは、現代の Web が直面する最も一般的な問題の一部です。今日の記事では、これらの問題を回避するために使用できる 10 の簡単な画像最適化のヒントを紹介します。

1. 大きなサイズの画像のサイズを変更する

「エクストラフライドポテト」はいつも美味しいとは限らない

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

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

最終的には (Stackpath CDN などのコンテンツ配信ネットワーク経由で画像を提供している場合でも) あなたと訪問者の両方の帯域幅を無駄にし、より多くのハードディスク容量を消費し、読み込み時間を長くすることになります。どの機能もサイトに望ましくないものです。

必ず画像を必要なサイズにサイズ変更してから（サイズ変更とはダウンサイズすることを意味します）、アップロードしてください。

これを行うのに高級なソフトウェアは必要ありません。ImageResize.org のような無料のオンライン ツールを使用すると、画像のサイズをすばやく変更して最適化できます。写真をアップロードして設定を調整するだけです。完了したら、サイトで使用する最適化された画像をダウンロードします。ファイルサイズを削減したいだけの場合は、簡単な画像圧縮機能も提供します。

便利なツール:

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

2. 正しい画像形式を使用する

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

3. プログレッシブ JPEG を使用する

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

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

  • ベースライン JPEG には、画像全体を含むレイヤーが 1 つだけあります。要求されると、画像全体が一度にロードされます。
  • プログレッシブ JPEG は複数のレイヤーで画像を構成します。プログレッシブ JPEG 画像はレイヤーごとに読み込まれ、徐々に品質が向上し、最終的にはロスレスのビューが得られます。

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

すべての主要な画像リサイザでは、画像をプログレッシブ JPEG として保存できます。

4.遅延ロードを有効にする

遅延読み込みは、訪問者が画像のビューフレームまで下にスクロールしたときにのみ画像が読み込まれる、 優れたリソース節約手法です。 「2014 年に最も燃料効率の高い車 15 台」という記事を考えてみましょう。当然のことながら、この記事には少なくとも 15 枚の画像が含まれます。また、モニター、タブレット、スマートフォンなどの表示デバイスの高さに関係なく、15 枚すべての画像をビューフレームに収めることはできません。すべての画像を表示するには、下にスクロールする必要があります。

遅延読み込みを有効にすると、訪問者が画像の近くにいる場合にのみ画像が読み込まれます。つまり、画像を表示するために下にスクロールしたときに、画像の読み込みが開始されます。ただし、最初のいくつかの画像は、すでにビューフレーム内にあるため、即座にロードされます。遅延読み込みにより、両端の帯域幅が節約され、読み込み時間が短縮されます。 BJ Lazy Load Plugin を使用すると、WordPress で Lazy Loading を使用できます。

5. CDN を追加する

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

大量のトラフィックがある場合は、読み込み時間を短縮して全体的なパフォーマンスを向上させるために、WordPress で CDN をセットアップする必要があります。

ここ WPExplorer では Cloudflare を使用しており、チェックアウトしたいと思われる推奨無料 CDN サービスの追加リストがあります。ただし、CDN を自分で設定するのは複雑な場合があるため、プラグインが役立ちます。

Publitio オフロード メディア

優れたオプションは、メディア ファイルを Publitio クラウドベースのメディア マネージャーに保存できる Publitio Offload Media プラグインです。プラグインをインストールすると、メディア ライブラリ全体をサーバーから簡単に移動でき、その際に画像とビデオの品質を最適化することもできます。移動すると、画像は Publitio CDN からすぐに提供されます。これにより、大量のサーバー スペースが解放され、サイトの速度が大幅に向上します (特にスペースが限られている低予算のホスティング プランを利用している場合)。新しい投稿を編集するときに新しいメディアを自動的にクラウドに追加するためのシンプルな「今すぐ同期」ボタンもあります。また、プレミアム Publitio プランには、カスタム CNAME、複数のウォーターマーク、ビデオ暗号化などの追加機能が含まれています。

6.「alt」属性を宣言する

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

7. 圧縮画像の最適化

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

8. レスポンシブ画像

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

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

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

9. 画像キャプション

キャプションは常に必要というわけではありませんが、チュートリアルのスクリーンショットなど、場合によっては必要になります。画像にキャプションを付けると、読者がトピックをよりよく理解できるようになり、SEO 効果も高まります。

10. 画像ファイル名

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

結論

画像 SEO は、新旧を問わず、あらゆる Web サイトにとって非常に重要です。画像 SEO を適切に実装している人は（時には非常にありふれたものになる可能性があります）、長期的には大量のオーガニックトラフィック（最良の種類のトラフィック）を獲得することができます。 >

素晴らしい最適化テクニックをお持ちですか?撃て！