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

公開: 2022-04-21

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

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

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

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

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

高品質の画像は最新のWordPressWebサイトにとって非常に重要であるため、使用する形式、それらがサイトのパフォーマンスにどのように影響するか、ファイル選択を最大限に活用する方法を知る必要があります。

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

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

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

圧縮–非可逆vs可逆

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

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

ラスター対ベクトル

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

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

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

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

JPEG：

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

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

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

PNG：

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

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

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

GIF：

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

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

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

SVG：

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

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

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

BMP：

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

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

WebP：

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

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

JPEGやPNGほどよく知られていませんが、WebPは将来的に選択される画像形式になる可能性があります。

結論：

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

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

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