WordPressサイトに最適な画像形式はどれですか

公開: 2022-04-21

WordPress サイトに魅力的で鮮明で高速に読み込まれる画像を掲載することは、ユーザー/顧客を引き付ける最も効果的な方法の 1 つです。自動車販売店が新しいモデルがピカピカでピカピカであることを確認するために多くの時間を費やすのには理由があります。製品の視覚的な影響は、多くの場合、成功と失敗の間の成否の決定となります。オンラインショールームも例外ではありません。さらに、画像が読み込み速度にどのように影響するかという複雑な問題があります。読み込みに 3 秒以上かかると、ユーザーが Web サイトを離れてしまうという、よく使用される有名な指標です。 Web サイトの読み込みに 3 秒以上かかる場合は、サイトにある画像がその原因の一部である可能性が高くなります。

したがって、WordPress サイトの所有者として、サイトに掲載する画像がユーザーにとって魅力的であり、サイトがすばやく読み込まれるようにするために何ができるでしょうか。あなたの最初の本能は、画像を 1800×1400 サイズの画像から 300×200 サイズの画像に縮小することかもしれません。画像ファイルのサイズが大幅に小さくなったとしても、結果として画像の品質とユーザーエクスペリエンスが低下するため、これは間違った方法です。たとえば、自動車ショールームの販売 Web サイトを運営している場合、顧客は自動車をよく見て、すべての機能と詳細を確認したいと考えるでしょう。画像を非常に小さくすることで、車の詳細な検査が不可能になり、潜在的な顧客が不満を感じ、他の場所を探すことになります.

それで、あなたの選択肢は何ですか？ありがたいことに、高品質で大きなファイルサイズの BMP、実証済みの JPEG、広く知られていなかった新しい WebP 形式など、さまざまな画像ファイルオプションから選択できます。適切な形式を選択することに加えて、選択した形式に関係なく、「圧縮」として知られるWP-Optimizeによるプロセスを採用することで、画像ファイルのサイズをさらに縮小できることを覚えておくことが重要です。

サイトの速度は、検索結果でサイトをランク付けするときに、Web サイトをクロールする Google ボットが観察する最も重要な要素のトップ 10 の 1 つです。読み込み速度が遅いと、サイトのランキングに悪影響を与える可能性があり、サイトを最初のページから簡単に削除したり、Google のインデックスに登録されなかったりする可能性があります。 Google は、検索アルゴリズムでサイトをランク付けする方法に非常に厳格であり、読み込み時間が遅いためにサイトのユーザーエクスペリエンスが悪いとわかった場合、そのサイトをクロールして Google 検索で見つけられるようにするという問題さえ経験しない可能性があります。 .

どの画像形式を選択する必要がありますか?

最新の WordPress Web サイトでは高品質の画像が非常に重要であるため、使用する形式、サイトのパフォーマンスへの影響、ファイルの選択を最大限に活用する方法を知る必要があります。

Web サイトで最も一般的な 2 つの画像ファイル形式は、PNG と JPEG/JPG です。 w3techsによると、すべての Web サイトの 70% 以上がこれらのファイルタイプを使用しています。サイトの約 30% が SVG を使用し、22% が GIF を使用しています。

画像のアップロードに使用するファイルの種類が重要な役割を果たすため、ここで画像ファイルの種類が重要になります。非常に多くの異なるファイルタイプがあるため、最も一般的なものとその長所と短所を以下に示します。

ファイルの種類に飛び込む前に、ラスターイメージとビットマップイメージとは何かなど、いくつかの概念を理解する必要があります。圧縮とは？非可逆圧縮と可逆圧縮の違いは何ですか?

圧縮 – 非可逆対可逆

どちらの圧縮タイプもファイルサイズを小さくすることを目的としていますが、本当に重要なのは何を削除するかです。非可逆圧縮では。画像の品質に関連する重要なデータが削除されます。これは、コンピューターが画像を再構築する際に問題が発生する可能性があるため、場合によってはピクセル化された画像に反映される可能性があります。

可逆圧縮では、画像に存在する無関係なデータ (メタデータなど) が削減されるため、ファイルサイズの縮小に役立ちます。このプロセスでは、画質はまったく影響を受けません。

ラスター対ベクター

最も一般的に使用されるイメージファイルの種類は、通常、ラスターベースです。これは、すべてのピクセルに関連付けられた固定の RGB カラー値があり、それらのすべてのピクセルが結合され、イメージ全体を作成するために使用されることを意味します。

このようなファイル形式の例には、jpg、png、および gif が含まれます。

または、ピクセル化することなく無限にスケーリングできる形状と線を使用してベクター画像を作成します。ベクトルは、画像の品質に影響を与えずに、ユーザーが値を変更できるようにする数式を使用して作成されます。

画像の基本について説明したので、さまざまなファイルタイプの詳細を確認できます。

JPEG:

これは、圧縮された画像データを含むデジタル画像形式です。 10:1 の圧縮率で、非常にコンパクトな JPEG 画像が使用されます。 JPEG 形式には重要な画像の詳細が含まれており、インターネット上で写真やその他の画像を共有するための最も一般的な画像形式です。 JPEG 画像はファイルサイズが小さいため、ユーザーは、サイトに余分なストレージスペースを必要とせずに、何千もの画像を (アートサイトなどに) 保存することもできます。

JPEG は写真に適した非可逆圧縮ファイルタイプですが、グラフィックを扱う場合は PNG などの別の形式を使用することをお勧めします。

JPEG 画像ファイルの例。アップロードすると、ディテールと品質が維持されていることがわかります。

PNG:

PNG は一般的なビットマップ画像形式で、「Portable Graphics Format」の略です。この形式は、Graphics Interchange Format (GIF) の代替として作成されました。 PNG には、24 ビットの RGB カラーパレット、グレースケールイメージ、透明な背景の表示などの優れた機能がいくつかあります。高品質の画像やグラフィックスを扱う場合、PNG 画像でも可逆データ圧縮方式が使用されます。 PNG 画像は、従来の JPEG 形式よりも画像をより詳細に制御およびオプションできるため、画像編集でも頻繁に使用されます。

PNG は可逆圧縮アルゴリズムも使用します。つまり、この形式は JPG よりも多くのデータを保持できます。 PNG 画像ファイルを使用する場合、ユーザーはこれらの画像を透明な背景で保存することもできます。この形式を使用することで、ユーザーは、明確な背景を表示できるレイヤー化された画像を操作するオプションを利用できます (たとえば、下の画像の花だけで背景の壁は表示されません)。 JPEG 画像の場合と同様に、既存の背景を切り取って削除します。これが、ダイアグラムやイラストなどのグラフィックに好まれる主な理由の 1 つです。 PNG は、標準の写真をアップロードするよりも、グラフィックスを扱うユーザーに人気があることが知られています。

PNG 画像は高品質を維持しながら、画像をより詳細に制御することもできます。

GIF:

「GIF」という用語は、メッセージアプリで送信される無数の短いクリップから最もよく知っているでしょう。 GIF は「Graphics Interchange Format」の略で、主に音声なしのアニメーションをサポートするために使用されます。

JPEG や PNG とは異なり、GIF はよりニッチなケースで使用され、通常は静止画像には使用されません (可能ではありますが)。 WordPress サイトで GIF を使用する場合、ほとんどの場合、訪問者に簡単なアニメーションまたはプロセスを表示するためです。 GIF は色の範囲が限られているため、単純なグラフィックに最適です。可逆圧縮を使用し、JPG よりも小さい傾向があります。一般に、サイトでは慎重に GIF のみを使用することをお勧めします。これは、(ファイルサイズを考えると) 読み込み時間が長くなる可能性があり、256 色に制限されているためです。

GIF 画像の例。アニメーションを作成するために、元の画像の品質が大幅に低下しています。

SVG:

Scalable Vector Graphics (SVG) は、Web に適したベクターファイル形式です。 JPEG のようなピクセルベースのラスター画像ファイルとは対照的に、ベクターファイルは、グリッド上の点と線に基づく数式を介して画像を保存します。つまり、SVG のようなベクターファイルは、品質を損なうことなく大幅にサイズ変更できるため、ロゴや複雑なオンライングラフィックに最適です。

ベクトルは、単純なグラフィック、図形、およびイラストにのみ最適です。 SVG はロゴに適しています。特に、ロゴをレスポンシブにする必要があり、Chrome、Firefox、Edge、Opera などのほとんどのブラウザーでサポートされている場合に適しています。

ロゴに使用する SVG 形式のひまわりの例。

BMP:

BITMAP は現在、時代遅れの画像形式と見なされています。 BMP は画像を無損失画像形式で読み込みますが、圧縮が不足しているため、ファイルサイズが大きくなる可能性があります。読み込み速度の重要性と、サイト作成者が画像サイズを最小限に抑えたいと考える方法 (SVG および JPEG 形式の人気は言うまでもありません) を考慮すると、この形式はオンライン画像ではほとんど使用されなくなりました。

BMP 形式でアップロードする場合、画像の元の品質は維持されますが、ファイルサイズによってサイトの速度が大幅に低下するため、お勧めしません。

WebP:

この画像形式は、Google が 2010 年に作成したもので、JPEG や PNG よりも優れた非可逆圧縮パフォーマンスや可逆圧縮パフォーマンスなど、いくつかの利点があるため、サイトに大量の画像をアップロードする人々に人気があり始めています。

また、WebP は通常、圧縮パフォーマンスが向上しているため、JPEG や PNG 形式よりも小さいファイルサイズでアップロードし、サイトで占有するスペースが少ないため、読み込みが高速になります。すべてのブラウザーでサポートされているわけではありませんが、Chrome、Firefox、Edge、Opera など、最も一般的なすべてのブラウザーでサポートされています。

JPEG や PNG ほど有名ではありませんが、WebP は将来、最適な画像形式になる可能性があります。

結論：

WordPress サイトで使用できる画像形式にはさまざまな種類がありますが、画像の目的を評価することが重要です。たとえば、あなたのサイトが結婚式の写真家向けである場合、読み込みが速く、使いやすい ( JPEG ) 高品質の画像を維持する必要があります。 ただし、オンラインポスターストアで画像を販売する場合は、可能な限り多くの詳細情報と画像情報 ( PNG ) を維持する必要があります。

一般的な経験則として、オンラインストア、ブログ、ポートフォリオ、ソーシャルメディア、またはソーシャルメディアサイト用に標準の画像をアップロードする場合は、標準の JPEG 形式で画像をアップロードしてから WP-Optimize を使用することをお勧めします。画像をさらに圧縮するには

ただし、画像の将来性を保証し、読み込み速度を可能な限り向上させたい場合は、WebP を使用すると、高レベルの詳細を維持しながら、優れた非可逆および可逆圧縮を提供できます。どのような決定を下すにせよ、常に市場をリードする圧縮のために WP-Optimize を使用して画像を圧縮することを忘れないでください。

あなたのWordPressサイトに最適な画像形式であるという投稿は、UpdraftPlusで最初に登場しました. UpdraftPlus – WordPress のバックアップ、復元、移行プラグイン。