WordPress画像管理の究極のガイド

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

ビジュアルインパクトは、インパクトのあるコンテンツマーケティングプランに関して最も重要な機能の1つです。まったく新しい投稿シリーズへようこそ– WordPressでの画像管理の究極のガイド.


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

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

どうやってそれをやろうかと思うかもしれません。 ThemeForestのTotal – Responsive Multipurpose WordPressテーマの24,000以上のダウンロードは、優れた指標ではないかもしれません.

ええと、私たちは業界をリードするWordPressホスティング会社(WPEngineや ページごと)そして何を学んだ 彼ら 何千もの有名なクライアントに数十億のページビューを提供するときに学んだ。オンラインでの成功のために、このすべての情報を小さな段落と箇条書きにまとめました。では、始めましょう。?

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

WordPressで利用できるかなりの数の画像最適化オプションがあり、 ない Webサーバーに不要な負荷をかけます。誰もが知っている最も一般的な画像最適化のヒントをいくつか見ていきます すべき 特別な機会に役立ついくつかの他のいくつかと一緒に続きます.

JPGまたはPNG?正しい画像形式の使用

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

トリックは、画像のタイプごとにどのフォーマットを選択するかを理解することです。間違ったものを選択すると、画像サイズが大幅に増加します。ここにルールがあります.

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

ベクター、イラスト、フォント、ロゴ、バナー、シェイプ、バナーなどのフラットイメージの場合、EPSまたはAdobe Illustrator(.AI)形式などのベクター形式で作成されたものはすべてPNGを使用します。品質の低下がほとんどない最適化された画像が得られます。この場合にJPGを使用すると、サイズに妥協することはありませんが、品質が不足する可能性があります。実際、解像度が高くなると、PNGは品質を落とさずに軽くなります。 JPGは苦しみます.

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

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

フラット画像
JPG233KB
PNG42KB

簡単に言えば、JPG画像は同じ解像度でPNGより455%高くなりました。.

JPG形式を使用する場合?

それ以外の場合は、JPGを使用します。フラットまたはベクター画像以外のものは、JPGを使用します。人、場所、物などの写真– JPGを使用します。このカテゴリのほとんどすべてのストック写真はJPGを使用しています。 JPGの代わりにPNGを使用すると、 深刻なパフォーマンスの問題.

この場合、特に注意する必要があります。 PNGの代わりにJPGを使用しても、損傷はほとんどありません。ただし、JPGの場合に流血のPNGを使用すると、損傷の余地が多くなります。この例を見てください.

セットアップ: この画像をシャッターストックからダウンロードしました。 10.3MB の解像度で 6149×4562 –基本的に28MPのストックフォト。印刷可能なパンフレットのようなものを準備している場合を除き、ブログでは写真のフル解像度を使用しません。私たちのブログの固定最大画像サイズがあるとしましょう 1600px.

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

JEPG実験のサンプル画像

結果: あなたがフォローできる素晴らしいチャートの結果は次のとおりです。

元の画像(KB)

10870
ターゲット解像度1600px
フォーマット設定サイズ(KB)%削減
JPGプログレッシブ、品質= 8523198%
ノンプログレッシブ、品質= 8523998%
PNG圧縮= 0557549%
圧縮= 6185283%
圧縮= 9175084%

一見すると、PNGの84%の圧縮は 十分良い JPGで達成された98%に対して。それは完全に真実ではありません。画像のサイズをよく見ると、PNGは1.7MBを少し超えるのに対して、JPGは0.22MBです。つまり、 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または1インチあたりのドット数は、画像の品質の尺度です。印刷物には高いDPI値が使用されます。 Webの場合、72の値が最適です。.

さて、以上をまとめると、以下は私の設定です。 WordPressに画像をアップロードする前に、ブログ投稿のすべての画像をコンパイルしたら、この機能を実行します.

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

5.画像を最適化する

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

私は次のようなサービスについて話している TinyPNG またはいくつかの高度なアルゴリズムでPNG / JPG画像を単に最適化するTinyJPG.

TinyPNGで最適化された画像

正直なところ、アルゴリズムがどのように機能するかはわかりませんが、アルゴリズムは機能します。どのように保存しても、50%から70%削減できます。.

あなたも購入することができます プロ版 Photoshopプラグインとしてのサービスの$ 50 USD。 Windows版とMac版の両方が利用可能です。私の目的のために、オンライン版( Dropboxに保存 機能)最適に機能する.

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

これまでのところ、 始めた 正しい。この投稿を偶然見つけて、すでに何百もの画像がアップロードされているとしたらどうでしょう。さて、これはあなたを助けるいくつかのプラグインです:

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

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

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

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

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

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

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

TinyPNG WordPressプラグイン

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

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

結論

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

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map