PNGまたはJPGまたはGIF：サイトに適した画像ファイルタイプの選択

公開: 2019-03-13

現在、最も一般的な2つの画像ファイル形式はJPGとPNGです。 一見すると、JPGはPNGファイルとして保存された同じ画像とまったく同じように見える場合があります。 ファイルを保存するときにPNG用にどちらかのJPGを選択できることも、拡張子で使用されている文字を除いて、2つは交換可能であるように見えます。

pngまたはjpg

W3Techsによると、JPGとPNGはどちらも他のファイル形式よりも多く使用されており、PNGの使用頻度はわずかです。

pngまたはjpg

ただし、JPGファイルとPNGファイルには明確な違いがあり、オンラインで画像を使用する場合はどちらを選択するかを知っておく必要があります。 ファイルの種類は、Webページのどこに配置されるか、表示される品質、および読み込み時間が遅くなるかどうかに影響を与える可能性があります。 ウェブサイトやソーシャルメディアフィードにアニメーションを含めたい場合は、GIFファイルとそれらがJPGやPNGとどのように異なるかについても少し知っておく必要があります。

私たちのYoutubeチャンネルを購読する

可逆圧縮と非可逆圧縮

画像を圧縮する目的は、スペースを節約することです。画像が小さいほど、転送と保存が簡単になります。 大きな画像は多くのデジタルスペースを占有し、Webページの読み込みを遅くする可能性があります。 一般に、一部のデータは、画像が圧縮されると画像から削除されます。

圧縮には、可逆圧縮と非可逆圧縮の2種類があります。 JPGとPNGの明確な違いの1つを理解するには、これら2種類の圧縮について紹介する必要があります。

可逆圧縮

画像には冗長な情報が含まれています。 可逆圧縮はその冗長データを削除しますが、データのどれだけが冗長であったか、およびイメージを再構築する方法もコンピューターに通知します。 スペースを節約するためにファイルサイズが縮小されますが、圧縮されたファイルからファイル全体を再構築することもできます。 Make UseOfのこの例が大好きです。 これは、ロスレス圧縮が実際に構造を変更せずに情報を削除する方法を意図的に単純化したものです。

pngまたはjpg

非可逆圧縮

MP3ファイルは、不可逆圧縮の優れた例です。 元の録音に含まれているすべてのオーディオが含まれているわけではありません。 人間が聞くことができない、またはほとんど聞くことができない音は削除されます。 これは、画像の不可逆圧縮がどのように機能するかに似ています。 画像が圧縮されると、情報は一時的にだけでなく、永久に削除されます。 削除したデータを復元することはできません。 画像を編集または再保存するたびに、データが少し失われ、品質が低下します。

JPG

JPG（またはJPEG）は、Joint Photographic ExpertsGroupの略です。 ファイル拡張子は.jpgまたは.jpegのいずれかです。 これらの拡張子は同じものであり、ファイルは同じように機能します。 初期のWindowsバージョンでは、3文字のファイルしか処理できなかったため、JPEGはJPGに短縮されました。 Webサイトまたはソーシャルメディアプラットフォームで写真を表示するときは、ほとんどの場合JPGを表示しています。

JPGの機能と利点は次のとおりです。

  • 通常、グラフィックではなく写真に使用されます。
  • ゲーム、映画、および同様のコンテンツのスクリーンショットに最適です。
  • 白または空白（透明ではない）の背景に保存された画像。
  • PNGよりも小さいファイルサイズ。
  • ページの読み込み時間が短縮され、ユーザーエクスペリエンスが向上します。
  • 非可逆圧縮ですが、圧縮率は調整できます。画像を圧縮する量を選択できます。
  • 保存回数や画像の表示場所によっては気付かない場合がありますが、編集・再保存すると品質が低下します。

JPGアルゴリズムは、同じ色または値のピクセルを見つけて、それらをタイルにブロックします。 JPGは数百万色をサポートしていますが、最終的な画像の色は元の画像よりも少なくなります（オーディオトラックのようなものです）。 これにより、小さいイメージが作成されますが、データが失われ、回復できなくなります。 ただし、JPGは明るさの見方を考慮しているため、色情報を落としても明るさを維持できるため、高品質な画像が得られます。

PNG

PNGはPortableNetworkGraphicの略です。 ファイル拡張子は.pngです。 Webサイトでブランドのロゴを表示するときは、PNGを表示している可能性があります。

PNGの機能と利点は次のとおりです。

  • 通常、イラストやその他の種類のグラフィックに使用されます。
  • イラスト、詳細図、アプリのスクリーンショットに最適です。
  • 透明な背景に保存された画像–周囲に何も邪魔することなくWebサイトに配置します。
  • さまざまな色とグレースケールのサポート。
  • ロゴを更新する場合など、PNGファイルの色を変更できます。
  • 使用する色が少ないほど、ファイルを小さくすることができます。
  • 可逆圧縮。

写真をPNGとして保存する

ほとんどの場合、写真をJPGファイルとして保存しますが、PNGとして保存したい場合もあります。

  • 画像はできるだけ高品質である必要があります–PNGはJPGよりも詳細を販売しています。
  • 写真を複数回編集して保存します。 編集が終了したら、写真をJPGとして保存してサイズを制限できます。
  • 写真にはテキストも含まれています–JPGはテキストの品質を著しく低下させます。
  • 写真の背景を透明にする必要があります。たとえば、写真の1つをロゴとして使用している場合などです。

GIF

GIFはGraphicsInterchangeFormatの略です。 ファイル拡張子は.gifです。 ループする短いアニメーションビデオを表示するときは、GIFを表示している可能性があります。

GIFの機能と利点は次のとおりです。

  • これは、アニメーションをサポートする3つのファイルタイプの中で唯一のものです。
  • シンプルなグラフィックに最適です。
  • 限られた色の範囲。
  • 色の調整が限られているため、JPGよりも小さくなります。
  • 可逆圧縮。

圧縮用のWordPressプラグイン

WordPress Webサイトの画像を圧縮するには、ソフトウェア、ブラウザベースのツール、またはプラグインを使用できます。 サーバーに余分な負担をかけたくない、互換性の問題を心配したくない、またはバックアップを作成するという余分な手順を実行したくないという理由で、プラグインを使用しない人もいます。 ただし、プロセスの合理化を検討している場合は、プラグインが非常に効率的です。

圧縮にWordPressプラグインを使用する際に留意すべき点がいくつかあります。

  • サイズを変更した後、画像をアップロードする必要はありません。画像はすでにWordPressメディアライブラリにあります。
  • 多くのプラグインには、アップロード中に最適化して、プロセスから別のステップを削除できる設定があります。
  • 2つの圧縮プラグインが同じことをすると言ったとしても、独自の設定、長所と短所があります。 圧縮率と品質の適切なバランスを見つけるために、いくつか試してみる必要があるかもしれません。
  • 圧縮プラグインの無料バージョンは最初は魅力的に聞こえますが、圧縮結果が不格好に見える可能性があるため、より高品質の画像が必要な場合はアップグレードする必要があります。
  • 一部のプラグインはインストールとセットアップが難しいものもありますが、他のプラグインは箱から出してすぐに完全に機能します。
  • 追加機能により、一部のプラグインは他のプラグインよりも魅力的です。 たとえば、ShortPixelには光沢のあるオプションがあり、プロの写真家にとっては間違いなく魅力的です。 Imagifyは元の画像を別のフォルダに保存します。つまり、いつでも元の画像を復元できます。

最終的な考え

画像をどのように使用するかを知ることは、選択するファイルタイプを決定するための最初のステップです。 最終的には、目的地に必要な品質を維持しながら、可能な限り最小のファイルを使用することが目標です。ウェブサイトで表示される画像は、Instagramで表示される画像よりも大きなページに表示されるため、品質が必要になります。欠陥を目立たなくするために高くする。 失恋する写真については、元の写真を保存するためのバックアップシステムを使用してください。誤って圧縮しすぎた場合は、最初からやり直すことができます。

あなたのウェブサイトのためにもっと多くの画像を見つける必要がありますか？ Unsplashは、無料のストックフォトを撮るのに私のお気に入りの場所の1つです。 ワンクリックでWordPressのUnsplash画像を使用して記事をチェックしてください。