WordPress 画像管理の究極ガイド

1. 1.現在読んでいる: WordPress イメージ管理の究極ガイド
2. <スパン>2.あまり知られていない WordPress の画像管理の 3 つのヒント
3. <スパン>3. WordPress 画像 SEO の間違いとその修正方法

視覚的なインパクトは、インパクトのあるコンテンツ マーケティング プランにおいて最も重要な機能の 1 つです。新しい投稿シリーズ「WordPress での画像管理の究極ガイド」へようこそ。

技術的な最適化、SEO、CDN 統合、ライブラリ管理など、WordPress で画像アセットを管理するために必要なツールを提供するように設計されています。この複数部構成のガイドでは、私たちが試した方法、または業界の専門家によって推奨された方法、チュートリアル、プラグイン、テーマのみを推奨します。

また、WordPress リポジトリで使用率の高いプラグインを盲目的に提案することも避けます。むしろ、価値提案とパフォーマンスの最適化の間で完璧な調和を奏でるものをお勧めします。

どうやってそんなことをするのか疑問に思うかもしれません。 ThemeForest のレスポンシブ多目的 WordPress テーマの合計 24,000 以上のダウンロードは、あまり良い指標ではないかもしれません。

さて、私たちは業界をリードする WordPress ホスティング会社 (WPEngine や Pagely など) の最高のブログを調査し、数千の著名なクライアントに数十億のページビューを提供する際に彼らが学んだことを学びました。オンラインで成功するために、このすべての情報を小さな段落と箇条書きに圧縮しました。さあ、始めましょう。

WordPress 画像の技術的およびパフォーマンスの最適化に関するヒント

WordPress では、Web サーバーに不必要な負荷をかけない画像最適化オプションが多数用意されています。誰もが従うべき最も一般的な画像最適化のヒントのいくつかと、特別な機会に役立つ他のいくつかのヒントを見ていきます。

JPGかPNGか？正しい画像形式の使用

画像最適化の最初のステップは良いスタートです。よく始めた仕事は半分終わったようなものだとよく言います。 WordPress での画像の最適化に関しては、まさにそれが当てはまります。すべては適切な画像形式を選択することから始まります。 JPG と PNG は、コンテンツ マーケティングでオンラインで使用される 2 つの最も一般的な画像形式です。

重要なのは、画像の種類ごとにどの形式を選択するかを理解することです。間違ったものを選択すると、画像サイズが大幅に増加します。ここにルールがあります。

どのような場合に PNG 形式を使用するのですか?

ベクター、イラスト、フォント、ロゴ、バナー、図形、バナーなどのフラット画像の場合、EPS や Adobe Illustrator (.AI) 形式などのベクター形式で作成されたものはすべて、PNG を使用します。最終的に、品質の低下がほぼゼロで最適化された画像が得られます。この場合に JPG を使用すると、サイズについては妥協できませんが、品質が低下する可能性があります。実際、解像度が高くなると、PNG は品質を損なうことなく軽くなります。 JPG では問題が発生します。

彼の例を見てみましょう。 5000px でフラット画像を作成し、JPG および PNG として保存します。

テストに使用したサンプル画像

簡単に言うと、同じ解像度の場合、JPG 画像は PNG よりも 455% 高かったということです。

JPG形式をいつ使用するか?

それ以外の場合は、JPG を使用します。フラット画像またはベクター画像以外の場合は、JPG を使用してください。人、場所、物などの写真 – JPG を使用します。このカテゴリのほぼすべてのストック写真は JPG を使用しています。 JPG の代わりに PNG を使用すると、 いくつかの重大なパフォーマンスの問題が発生します。

この場合は特に注意が必要です。 PNG の代わりに JPG を使用すると、損傷はほとんど、またはまったくありません。ただし、JPG の場合にひどい PNG を使用すると、損害が発生する可能性が大きくなります。この例を見てください。

セットアップ: この画像は Shutterstock からダウンロードしました。この画像は、6149×4562 の解像度で約 10.3MB あり、実質的には 28MP のストック写真です。 。印刷可能なパンフレットのようなものを準備していない限り、ブログで写真のフル解像度を使用することはありません。ブログの最大画像サイズが 1600 ピクセルに固定されているとします。

実験: ソース画像のサイズを 1600 ピクセルに変更し、 4 つのバージョン を作成します (PNG 形式用に 2 つ、JPG 形式用に 2 つ)。各形式 (JPG/PNG) について、(a) 推奨圧縮設定と (b) 最大圧縮設定を使用します。

JEPG実験用サンプル画像

結果: 以下に結果を分かりやすいグラフで示します。

一見すると、JPG で達成される 98% に対して、PNG の 84% の圧縮は十分であると思われるかもしれません。それは完全に真実ではありません。画像サイズを詳しく見てみると、PNG の重さが 1.7 MB を少し超えるのに対し、JPG は 0.22 MB であることがわかります。つまり、 同じ解像度の同じ画像のPNG は JPG バージョンよりも 8 倍重いということです。言い換えれば、同じ画像と解像度の場合、JPG バージョンは PNG より 700% 軽いということです。

同じ画像と解像度の場合、JPG バージョンは PNG より 700% 軽いです。

経験則として、平面画像には PNG を使用し、それ以外の画像には JPG を使用します。

ブログにストック写真をアップロードするためのチェックリスト

編集者がブログ投稿内の画像のフル解像度バージョンを直接アップロードしているブログがたくさんあります。ストック写真をブログにアップロードする際のヒントをいくつか紹介します。私は IrfanView という素晴らしい機能を備えた無料ソフトウェアを使用しています。それぞれについて説明します。

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

まず、WordPress サイト内のすべての画像の最大解像度を決定する必要があります。もちろんそれより小さい場合を除き、その寸法を超える画像はサイズ変更されます。

IrfanView にはバッチ変換機能があり (アプリ起動後に B を押します)、関数のリストを一度に多数の画像に適用できます。私たちの目的では、機能にはサイズ変更、トリミング、透かしの追加などが含まれます。

2.EXIFデータを削除する

通常のカメラでクリックされた写真には、 大量のメタデータが埋め込まれています。これは、画像に関する小さな（しかし有用な）情報にすぎません。このような情報の例には、写真がクリックされた場所の GPS 座標、ISO 設定、カメラのモデルなどが含まれます。

iPhone でクリックされたランダムな写真の EXIF 情報

写真ブログを書いている場合を除き、通常、ブログ投稿の画像にそのような情報が含まれることは望ましくありません。 IrfanView で画像を保存またはバッチ変換すると、通常、EXIF データが削除されます。これは、プライバシー、特に物理的な位置を保護するのに役立ちます。ほとんどの写真のサイズの違いは、画像あたり約 200 ～ 300 KB です。

3. プログレッシブJPGとして保存

IrfanView はデフォルトで JEPG をプログレッシブとして保存しました

プログレッシブ JPG 画像は画像をレイヤーごとにロードするため、ロード時間が短縮されます。 KeyCDN などのコンテンツ配信ネットワークは、画像配信を高速化し、ストレージを最適化するために、JPG をプログレッシブ JPG に自動的に変換し始めています。

4. DPIを72に設定します

DPI またはインチあたりのドット数は、画像の品質の尺度です。印刷素材には高い DPI 値が使用されます。 Web の場合、値 72 が最適です。

さて、上記を要約すると、次は私の設定です。私は、ブログ投稿用のすべての画像を編集した後、画像を WordPress にアップロードする前に、この機能を実行します。

一般的な WordPress ブログの IrfanView でのバッチ変換設定

5. 画像を最適化する

JPG または PNG のどちらを使用したかに関係なく、画像を最適化する必要があります。画像を最適化し多くのスペースを節約するのに役立つ、非常に優れたオンライン ツールがたくさんあります。

ここで話しているのは、高度なアルゴリズムを使用して PNG/JPG 画像を最適化する TinyPNG や TinyJPG などのサービスです。

TinyPNG の最適化された画像

正直に言うと、アルゴリズムがどのように機能するのかはわかりませんが、アルゴリズムは機能しており、どんなに最善の方法で保存したとしても、常に 50 ～ 70% の削減を実現できました。

このサービスのプロ版を Photoshop プラグインとして 50 米ドルで購入することもできます。 Windows 版と Mac 版の両方が利用可能です。私の目的では、オンライン バージョン (Dropbox に保存 機能と組み合わせたもの) が最適に機能します。

WordPress の画像最適化プラグイン

ここまでは、 正しく始めるための手順を学びました。今、この投稿を偶然見つけて、すでに数百枚の画像をアップロードしている場合はどうすればよいでしょうか?さて、これに役立つプラグインをいくつか紹介します。

EWWW クラウド イメージ オプティマイザー

このプラグインは、オリジナルで非常に人気のある EWWW Image Optimizer プラグインのフォークです。 500,000 以上のダウンロードを誇るこの画像最適化プラグインを使用すると、WordPress にアップロードされる画像を最適化できます。

競合他社との違いは、データベース内の既存の画像を最適化する機能であり、これによりパフォーマンスが大幅に向上します。また、トラフィックのほとんどは古い記事から来ているため、帯域幅コストも大幅に節約できます。オプションで、非可逆画像圧縮 (肉眼ではほとんど見えません) を有効にすることもできますが、スペースと帯域幅を大幅に節約できます。最適化テクノロジーに関しては、TinyPNG または TinyJPG の API を使用して、新規および既存の画像を最適化できます。

しかし、ここに問題があります。 EWWW 画像最適化プラグインはサーバーに多くの追加負荷をかけるため、多くのホスト (WPEngine を含む) ではこのプラグインが許可されていません。何らかの方法でサーバー制限を回避できた場合、ポリシー違反によりアカウントが停止される危険性があります。

ここでEWWW Cloud Optimizer プラグインが活躍します。画像の最適化に必要なすべての計算をクラウドにオフロードし、最適化されていない画像を最適化された画像に置き換えるだけです。圧縮には実質的に CPU パワーが使用されないため、サーバーに追加の負荷がかかりません。これは、WordPress サイト内のすべての新規および既存の画像変換に有効です。

プランと価格: ご想像のとおり、開発者はクラウド コンピューティングの料金を支払う必要があるため、プラグインは無料ではありません。ただし、価格は非常にリーズナブルで、プリペイド サブスクリプションの場合、3,000 件の画像最適化に対して 9 米ドルかかります。

EWWW Cloud Optimizer プラグインは美しく設計されています。メディア スキャナーは、購入前に最適化する必要がある画像の数を示します。サーバーのイメージに基づいて、関連するプリペイド プランを購入できます。

TinyPNG WordPress プラグイン

これも、TinyPNG/JPG サービスと直接統合される優れた画像最適化プラグインです。新しい画像と既存の画像が自動的に WordPress メディア ライブラリにアップロードされます。このプラグインは、毎月 100 回の画像最適化の無料プランを提供します。

Freddy は少し前に画像最適化プラグインのリストを作成しました。このトピックについて詳しく知りたい場合は、ぜひ読んでください。

結論

これで、このシリーズの最初の投稿は終了です。次の記事では、ホットリンクの防止、リモート サーバーからの画像の取得など、あまり知られていない画像最適化のヒントやコツを学びましょう。 正しく始めるカテゴリにいくつかのヒントはありますか?以下のコメント欄でお知らせください。