ウェブサイト検索

WordPress に使用する画像ファイルの種類

WordPress サイトをしばらく運営している場合は、どの画像ファイルの種類が自分の Web サイトに最適なのか疑問に思っていることでしょう。 JPG と PNG のどちらを使用するべきですか? WebP などの別の画像ファイル タイプを使用したいが、どうすればよいかわからない場合もあります。そうでない場合は、PSD、AI、または INDD 画像をアップロードしたいのに行き詰まっている可能性があります。

ここに来た理由に関係なく、今日の投稿は、WordPress ウェブサイトに適切な画像ファイルの種類を選択するのに役立ちます。適切な画像ファイルの種類を選択する必要があるのはなぜですか?それについてもこの記事で取り上げます。その上で、受け入れられる画像ファイルの種類、他のファイルの種類を追加する方法を強調し、いくつかの WordPress 画像のベスト プラクティスに触れます。

それが素晴らしいと思われる場合は、学ぶべきことがたくさんあるので、錨を降ろして出航しましょう。

適切な画像ファイルの種類を選択することが重要なのはなぜですか?

完璧な画像ファイルの種類を選択するのは、思ったよりも難しいことですが、それはわかります。ただし、使用するファイルの種類は Web サイトのパフォーマンスに相関するため、細心の注意を払う必要があります。では、選択する画像ファイルの種類を考慮することがなぜ重要なのでしょうか?

  • 速度とパフォーマンス – 一部の画像ファイルの種類は、他の種類よりも多くのスペースを必要とします。大きな画像形式を使用すると、Web サイトの速度が低下し、サーバー費用がかさんでしまいます。ページ速度とパフォーマンスの向上を保証し最適なユーザー エクスペリエンス (UX) を実現する軽い画像を選択してください。
  • SEO スコア – ページ速度が SEO ランキングの直接的なシグナルであることをご存知ですか? Web サイトで重い画像や低品質の画像を使用すると、UX の向上や関連する SEO のメリットを逃すことになります。高品質で SEO 対応の画像を選択すると、SEO スコアを向上させるための準備が整います。
  • 美的 – 一部の画像形式は、圧縮後でも他の形式よりも詳細を保持します。洗練された高品質でプロフェッショナルな外観にぴったりの画像形式が必要です 🙂 各画像形式は特定の用途に最適なので、賢明に選択してください。
  • レスポンシブ デザイン – 現在、ユーザーはさまざまなブラウザや画面サイズを備えたさまざまなデバイスで Web サイトにアクセスしています。ほとんどのブラウザでサポートされているレスポンシブな画像ファイル タイプを選択する必要があります。それに加えて、さまざまな画面で美しく見える画像が必要です。これについては後で詳しく説明します。
  • 一貫性 – 一貫性を保つため、画像のメイン ファイル タイプを 1 つに絞ることをお勧めします。オンデマンドで、またはニーズに応じて他のファイル形式を使用することもできますが、1 つまたは 2 つの形式で十分です。

それはさておき、利用可能な画像ファイルの種類について話しましょう。

利用可能な画像ファイルの種類

多くの初心者には、画像形式の世界が存在するという事実が隠されています。そうです、画像ファイルの種類は数百種類あり、それらすべてをカバーするには電子書籍が必要になります。ただし、心配しないでください。 WordPress ウェブサイトに最適な画像形式のみに焦点を当てています。

画像形式は、ラスター画像とベクター画像の 2 つの大きなカテゴリに分類されます。

ラスター イメージは、一連のピクセルによって構成され、イメージを形成します。このため、ラスター イメージは通常、圧縮または伸長すると解像度が失われます。 JPG、PNG、GIF の 3 つの一般的な画像形式はラスター画像であり、オンラインで表示されるすべての写真の大部分を占めています。

一方、ベクター画像はピクセルではなく数式を使用して構築されるため、頻繁なサイズ変更に関してはより柔軟です。一般的なベクター画像タイプには、Adobe の EPS (Encapsulated PostScript)、SVG (Scalable Vector Graphics)、PDF、WEBP、Adobe Illustrator の AI 形式などが含まれます。

通常の Web サイトの使用には、ラスター画像を使用してください。同時に、頻繁な編集やサイズ変更が必要なロゴやその他の画像のベクター画像を作成できます。理想的には、WordPress Web サイトで使用する前に、すべてのベクター画像をラスター画像に変換する必要があります。

それはなぜでしょうか？

ラスター イメージは軽量で、すべてのブラウザーでサポートされているため、JPG または PNG を選択する必要があります。アニメーションが必要な場合は、GIF 形式を使用します。現在、数百ある画像フォーマットのうち、たったの 3 つまで減りました。

そこで疑問が生じます。WordPress はどの種類の画像ファイルをサポートしているのでしょうか?

受け入れられる画像ファイルの種類

Codex によると、WordPress はデフォルトで JPG、JPEG、PNG、ICO、GIF 画像形式を受け入れます。混乱している場合は、JPEG は単なる JPG であり、ICO はアイコンに使用する画像形式です。 WordPress Web サイトでは、通常、投稿やページ内の画像ではなく、アイコンがファビコンとして使用されます。

デフォルトでは、ページと投稿にアップロードできるのは JPG と PNG のみです。何らかの理由で他の画像ファイルタイプを追加したい場合は、WP Extra File Types などのプラグインを使用できます。プラグインが気に入らない場合は、wp-config.php ファイルに次のコードを追加できます。

define( 'ALLOW_UNFILTERED_UPLOADS', true );

別の方法として、次のコードをfunctions.php ファイルに追加します。

<?php
add_filter( 'upload_mimes', 'my_myme_types', 1, 1 );
function my_myme_types( $mime_types ) {
  $mime_types['svg'] = 'image/svg+xml';     // Adding .svg extension
  $mime_types['json'] = 'application/json'; // Adding .json extension
  
  unset( $mime_types['xls'] );  // Remove .xls extension
  unset( $mime_types['xlsx'] ); // Remove .xlsx extension
  
  return $mime_types;
}

上記のコードは、SVG および JSON 拡張機能のサポートを追加します。他の画像形式の拡張子を追加したい場合は、上記のコードを適宜編集してください。詳細については、WordPress で追加のファイルタイプをアップロードする方法を確認してください。

新しいファイル タイプの追加で問題が発生した場合は、制限がある可能性があるため、まずホスティング プロバイダーに問い合わせてください。それはさておき、使用するのに最適な画像ファイル形式はどれでしょうか?

使用するのに最適な画像ファイルの種類はどれですか?

次のセクションでは、Web サイトで最も一般的な 3 つの画像形式について検討します。 JPG、PNG、GIF を取り上げ、さまざまな用途に最適な形式を紹介します。 JPGから始めましょう。

JPG

JPG (JPEG とも呼ばれる) は、Joint Photographic Experts Group の略です。 JPG 画像は高圧縮レベルに適しており、数百万色を表示できるため、鮮やかな色の写真や画像に最適です。

この画像形式は非可逆圧縮をサポートしているため、最適化すると画質が若干低下します。ただし、圧縮レベルを制御して、最高の品質とパフォーマンスを確実に得ることができます。 JPG 画像は透明な背景をサポートしていません。

PNG

PNG は、Portable Network Graphics の略で、当初はインターネット上で画像を転送するために設計された画像形式です。 PNG 画像は何百万もの色を表示しますが、JPG より重い場合があります。これらは、ブランドを識別するスクリーンショット、ロゴ、インフォグラフィック、メインヘッダーのグラフィックに最適です。

PNG は可逆圧縮をサポートしているため、最適化中にデータが失われることはありません。そのため、圧縮後の PNG 画像は JPG 画像よりも鮮明で鮮明です。さらに、PNG 画像ファイル タイプは透明な背景をサポートします。

GIF

GIF は、Graphics Interchange Format の略称です。これは、アニメーション画像と静止画像の両方をサポートする画像形式です。ソーシャル メディアで見かけるアニメーションのほとんどは GIF 画像です。 JPEG や PNG とは異なり、GIF 画像ファイル タイプは 256 色しかサポートしないため、カラー写真や色のグラデーションのあるその他のイラストには適していません。

GIF は可逆圧縮を使用して、視覚的な品質を損なうことなくファイル サイズを削減します。さらに、GIF はテキスト ラベルと透明な背景をサポートしているため、この形式は単純なアニメーションや低解像度のビデオに最適です。

では、3 つのうちのどれを使用すればよいでしょうか?すべてはあなたのニーズ次第です。 PNG は、ロゴ、スクリーンショット、グラフ、インフォグラフィック、高品質のブランド画像に最適です。 JPEG は、Web サイト上の小さな画像や鮮やかな色の写真に最適です。 GIF はアニメーションや単純なビデオに最適です。

しかし、画像を不用意に使用してしまうと、画像ファイルの種類を選択するだけでは十分ではありません。次のセクションでは、WordPress 画像のベスト プラクティスとヒントをいくつか紹介します。

WordPress 画像のベストプラクティス

画像を最大限に活用するには、次の画像のベスト プラクティスとヒントに従ってください。画像サイズ、最大アップロード サイズ、画像 SEO、最適化、Google アナリティクスを使用して WordPress の画像戦略を伝える方法などの分野について簡単に説明します。

画像サイズ

使用する画像のサイズが Web サイトの速度に影響を与える可能性があることはすでにわかっています。したがって、明るい画像を使用することを目指す必要があります。同時に、軽い画像を作成しようとするときに視覚的な品質を無視しないでください。つまり、圧縮には注意する必要があります。

さらに、HTML や CSS を使用して画像のサイズを変更しないでください。 300 ピクセル x 300 ピクセルの画像が必要な場合は、400 ピクセル x 400 ピクセルの画像を使用しないでください。さらに、高品質の WordPress ホスティングを選択し、キャッシュと CDN を実装して、Web サイトの速度を向上させます。

最大アップロードサイズ

場合によっては、何らかの理由で大きな画像ファイルを使用する必要があるかもしれません。ただし、WordPress のデフォルトのアップロード サイズは 2MB であるため、ファイルのアップロードに問題が発生する可能性があります。ただし、最大アップロード サイズはすぐに増やすことができるので、心配する必要はありません。

多くの場合、ホスティング プロバイダーは、自分で編集してファイルのアップロード サイズを増やすことができる組み込みの設定を提供しています。たとえば、Cloudways では、アカウントにログインし、[サーバー管理] に移動して、[設定とパッケージ] セクションを選択するだけです (上記参照)。ここから、許可される MB サイズを編集して、ファイルのアップロード サイズ制限を手動で増やすことができます。

ただし、これはホストによって異なります。 GoDaddy は、C パネルのメディア テンプルのオプションを利用しています。php.ini ファイルを変更する必要があります。WP エンジンの場合は、サポート チームに連絡して増加をリクエストする必要があります。

画像SEO

メッセージを渡してサイトの見栄えを良くする以外に、画像を使用して SEO スコアを上げることができることをご存知ですか?それは正しい;画像 SEO を使用して、Web サイトへのトラフィックを増やすことができます。どうやって？まず、画像に適切な名前を付けます。たとえば、「picture001.png」の代わりに「how-to-image-seo.png」などを使用します。さらに、アップロード後にすべての画像に代替テキストを追加します。代替テキストのおかげで、検索エンジンやスクリーン リーダーがあなたの画像を「見る」ことができます。

便利なWordPress画像最適化プラグイン

WordPress はプラグインのおかげで非常に使いやすい CMS です。アップロードする前に画像操作ソフトウェア (Photoshop など) を使用して画像を最適化すると便利ですが、プラグインを利用してアップロード後に画像を最適化することもできます。

注目すべき WordPress 画像最適化プラグインには、Smush、EWWW Image Optimizer、Imagify などがあります。それぞれに独自の機能セットが備わっているため、ニーズに最適なプラグインを選択してください。

Google アナリティクスを使用する

すべてが終わったら、可能な限り最高のユーザー エクスペリエンスを提供したいと思うでしょう。そのためには、訪問者と、訪問者が Web サイトへのアクセスに使用するデバイスを把握する必要があります。そうすることで、完璧な画像形式とサイズを選択できます。たとえば、ほとんどの訪問者が Apple Safari ブラウザを使用している場合、WordPress で WEBP 画像ファイルを使用するための追加サポートを提供する必要があります。

WordPress Web サイトに最適な画像ファイルの種類を選択することは、速度、UX、Web サイトのパフォーマンス、SEO、一貫性の観点から非常に重要です。

優れたイメージ戦略を策定することで利益が得られるため、この分野を放置するわけにはいきません。スタイル ガイドでは、すべてのユーザーに画像ディレクティブを提供する必要があります。

最後に、画像を圧縮して最適化して、品質とパフォーマンスの完璧なバランスを実現します。

画像ファイルの種類について質問がありますか?以下のコメント欄でお知らせください。