JPEGとPNGの初心者向けガイド（および両方の使用方法）

公開: 2021-11-02

ウェブは画像でどうなるでしょうか？ 数十年以内に、インターネットはデジタルドットマトリックスプリンターから、画像、ビデオ、アニメーションなどを含むマルチメディアの動的サーバーに移行しました。 ただし、デジタル静止画に関しては、JPEGとPNGの違い、特にそれぞれをいつ使用するかについて混乱が生じる可能性があります。

同じがPNGと一緒にJPEG画像を見ると、違いは見られないでしょう。 どちらの画像形式もWebで可能な限り最高の画像を再現することを目的としているため、これは理想的です。 ただし、注意が必要なさまざまなユースケースと最適化手法があります。

この記事では、JPEGとPNGを比較し、各画像形式をいつ使用する必要があるかを説明します。 最初に、各ファイルタイプを紹介しましょう。

JPEGとPNGの違い

表面的には（文字通りの意味で）、JPEGとPNGの間に違いはありません。 つまり、2つの画像を表示して、どちらがJPEGでどちらがPNGであるかを選択するように求められた場合、ほとんどの場合はわかりません。 たとえば、次の画像を撮ります。

蝶。

このアカネアゲハがJPEG画像かPNG画像かを判断できますか？ もちろん、参照フレームがないと、比較することはできません。

同じ蝶の別の画像。

この場合、大きな違いはありませんが、明確な違いがあります。 （ブラウザの開発者ツールを覗かずに）決定しようとしている間、私たちが共有できるいくつかの技術的な詳細があります：

  • Joint Photographic Experts Group（JPEG）ファイル形式は、デジタル画像の不可逆圧縮を提供します。 これは、これとファイルサイズのバランスが大きく変動しすぎると、画質が目立つことを意味します。 JPEGは「フラット」ファイルです。 つまり、ファイル内に透明度を表示することはできません。 圧縮レベルを調整することはできますが、最適な設定でも、JPEGは8ビットファイルになり、ダイナミックレンジに影響を与えます。 さらに、JPEGには、モニターに色を表示する方法を指示するカラープロファイルが含まれていることがよくあります。
  • 対照的に、Portable Network Graphics（PNG）画像はWeb対応のファイルです。 これはJPEGよりも動的な形式であり、24ビットファイルを出力する機能を備えています。 また、「ロスレス」形式であるため、画質を低下させることなく複製できます。 ただし、PNGファイルの圧縮を調整することはできず、カラープロファイルもありません。 それにもかかわらず、PNGは、その技術仕様に基づいて、Webに最適です。

明確に思えます– PNGはWebに適していますが、JPEGは適していません。 まあ、これは完全な話ではありません。 各ファイルタイプは、特定のアプリケーションに最適です。 次に、それらについて説明します。

JPEG vs PNG：それぞれを使用する必要がある場合

Webは、JPEGとPNGの両方を最大限に活用します。 実際、それらは多くのクロスオーバーなしで素晴らしい方法でダブテールします。 便利なサウンドバイトとして、JPEGとPNGを使用する必要がある場合は次のとおりです。

写真を表示したい場合は、JPEGを使用してください。 その他のファイル（特にデジタルグラフィックス）には、PNGを使用します。

ただし、このアドバイスはすべての状況に当てはまるわけではありません（ただし、ほとんどすべての場合に当てはまります）。 たとえば、デジタル図面とストック画像を組み合わせる場合、JPEGとPNGの両方を使用することは技術的に正しくありません。 後で、正しい決定を下すための知識が増えますが、他にもいくつかの指針があります。

たとえば、画像のコピーを想定している場合は、JPEGとは異なるファイル形式を使用してください。 これは、不可逆圧縮形式ではファイルのおおよそのバージョンのみが再構築されるためです。 対照的に、PNGはロスレス圧縮を提供するため、1：1の複製です。

また、保存後に画像のサイズを変更する場合は、JPEGを使用してください。これによりスケーリングが適切に処理されます。 PNGは異なるエンコード構造を使用しますが、ディメンション（またはその他の技術属性）を変更すると劣化します。

あなたが知っておくべき他の画像形式

もちろん、考慮すべき画像ファイル形式の比較はJPEGとPNGだけではありません。 注意を競う他の多くのファイルタイプがあり、他のユースケースがあります。

  • グラフィカルインターフェイス形式（GIF）。 アニメートするミームやリアクションビデオをTwitterに投稿すると、それはGIFになります。 実際、PNGは元の仕様でGIFファイルを置き換えるように見え、どちらも透明レイヤーを提供します。
  • タグ付き画像ファイル形式（TIFF）。 このラスターベースのファイル形式は、CMYK色空間をサポートしているため、印刷に最適です。
  • RAW画像形式（RAW）。 これは、写真家の場合にのみ使用し、使用するカメラ専用です。 コンピューターでRAWファイルを表示することはできますが、表示するには専用のソフトウェアが必要です。 データが完全であるため、ファイルサイズは天文学的なものです。 実際、RAW形式は画像ではなく、エンコードされたときに画像を表すデータです。
  • 高効率画像ファイル（HEIF）。 これは、iOSデバイスの主要なファイル形式です。 JPEGよりも優れた圧縮とファイルサイズを提供し、さまざまなマルチメディア形式を処理できます。

これらの各画像ファイルはWeb上で使用されますが（表示に関するRAWファイルを除く）、JPEGとPNGが依然として優勢です。 どちらにも、長所と短所のバランスが取れている特定のユースケースがあります。

アップロード用に画像を準備する方法（3つの方法で）

JPEGとPNGは最終的な表示品質に関して引き分けになっていますが、それを最大限に活用するには、各形式を異なる方法で処理する必要があります。 ファイルサイズ、品質、および画像の全体的な準備に影響を与える可能性のある3つの領域があります。

  • 寸法が、遭遇する関連するユースケースを考慮していることを確認してください。
  • Webに適した画像の解像度を選択してください。
  • 「上品な」圧縮を使用して、品質にあまり影響を与えずに画像のファイルサイズをさらに縮小します。

ご想像のとおり、ここには微妙なバランスがあります。 画像のサイズから始めましょう。

1.寸法を設定します

画像のサイズは、チェーン内の他のどのポイントよりもエンドユーザーにとって重要です。 これは、ブラウザが画像をロードする必要があり、大きなファイルがユーザーエクスペリエンス（UX）を侵食するためです。 ただし、これだけが考慮事項ではありません。 もちろん、品質も重要です。 画像のサイズを小さくすると、最終的な画質に影響します（PNGよりもJPEGの方が影響を受けます）。

答えは、画像のサイズから始めて、いくつかの領域でスイートスポットを見つけることです。 原則として、必要な詳細を伝えることができるように、画像を十分に大きくする必要があります。 ターゲットプラットフォームとイメージ自体によって異なるところに、やり過ぎのポイントがあります。

Appleプレビューで画像のサイズを設定します。

最新のクロップセンサーとフルフレームデジタルカメラは、デフォルトのサイズが約6,000px x 3,000pxの画像を生成できます（ただし、カメラ間には大きな違いがあります）。 対照的に、ソーシャルメディアでは「長辺」が約2,000ピクセルの画像が一般的です。 これは、デバイスのフルビューポートで表示するためのものであることに注意してください。

ブログ画像の場合、この2,000ピクセルの経験則は、1,000ピクセルまで低くなる可能性があります。 これは、高解像度または「網膜」画像も考慮に入れます。 高解像度の画面で鮮明に表示するには、多くの場合、2倍のサイズが必要です。 実際、決議は次の段階に進むのに適した場所です。

2.適切な解像度を設定します

デジタル画面の基本的な要素の1つはピクセルです。 ピクセルは均一なサイズではありませんが、これらの小さなドットがディスプレイ全体を構成します。 このため、JPEGおよびPNG画像を準備する際にも解像度を考慮する必要があります。

1インチあたりのピクセル数（PPI）を使用して、画面に収まるピクセル数について説明します。 これをセンチメートルまたは「ドット」で表すこともできます。 後者は物理的な印刷形式用であり、グラフィックデザインサークルはDPIを頻繁に使用します。 そのため、PPIは正しい用語ですが、互換性のある方法で使用されていることがわかります。

PNG画像仕様では最適な設計解像度として72PPIが使用されていますが、これでは最新の高解像度画面は考慮されていません。 すべての画面で画像を鮮明にするために画像のサイズを2倍にすることもできますが、解像度でも同じことができます。 たとえば、macOSBigSurデスクトップの次のスクリーンショットを撮ります。

高解像度を使用したスクリーンショット。

これはPNGで、長辺（この場合は上下）に1,000ピクセルがあります。 ただし、144 PPIを使用します。ただし、WordPressへのアップロード時に解像度を72PPIに変換するアップロード「マジック」がいくつかあります。

PNG画像とJPEG画像はどちらもはるかに高いPPIを使用できます。印刷可能な解像度は約300DPI/PPIです。 さらに、Pixabayなどのストックフォトサイトからの多くの画像は、300PPIを使用してダウンロードされます。

白鷺の鳥。

そのため、これを減らすと、Webとそのさまざまな表示用に画像をより適切に準備できます。

3.圧縮を使用して画像を最適化する

画像の最適化について多くを語る必要はありません。 これはブログの他の場所で見つけることができるトピックであり、ほとんどすべてのWordPressユーザーは、アップロードプロセスの前または最中に画像を最適化することを知っています。

一般的な概念は、多くの場合不可逆的な方法で、画像に追加の圧縮を適用することです。 これは画質に影響します。非可逆圧縮を適用する前に、寸法と解像度を大幅に変更すると、顕著になります。

過度に圧縮され、最適化されていない画像。
「カラーバンディング」の形で目立つ画像の劣化があることがわかります。これは、圧縮不良の明らかなアーティファクトです。

これらのアーティファクトは、画像を適切に表示するために最小限にする必要があります。 このため、仕事をするために利用できるツールがたくさんあります。 最もアクセスしやすいのはTinyPNGですが、JPEGも圧縮します。

TinyPNGホームページ。

ただし、一部の画像では適用される圧縮が穏やかであるため、ファイルサイズが十分に小さくならない場合があります。 ShortPixelなどのサービスでは、積極的な非可逆圧縮形式を利用できますが、その光沢のある圧縮は、TinyPNGと比較して立派な仕事をします。

ShortPixelツール。

ここでのポイントは、圧縮レベルとファイルサイズ、および画像の他のすべての要素の両方とのバランスを取る必要があるということです。 次のセクションでは、取るべき最善のアプローチについて説明します。

JPEG vs PNG：各フォーマットを最大限に活用する方法

ファイル形式の違いにもかかわらず、Webを閲覧するという性質は、画像の準備を次のように要約できることを意味します。

  • 長辺で1,000〜2,048ピクセルのサイズを使用します。
  • すべての画像に144PPIの解像度を設定して、すべての画面で鮮明でクリアな画像が表示されるようにします。
  • 画像の最適化を通じて微妙な圧縮を適用して、ファイルサイズを小さくします。 すべてを考慮に入れると、ほとんどの画像のサイズは約100〜200kbに​​なります。

特定のファイル形式に基づいて、ここにもう少しあります。

  • PNGファイルの場合、サイズを小さくすると画質が大幅に低下する可能性があります。 ここでの考え方は、これらの要因を軽減するために、解像度を可能な限り高く保つことです。
  • JPEGファイルは、各複製が最後の複製よりも劣化しているため、コピーに耐えられません。 JPEGの出所を制御できる場合（たとえば、写真を撮った場合）、画像内の品質を維持するためにTIFFまたはRAWファイルからJPEGを作成します。
  • 私たちの経験では、JPEGは他のファイル形式と同様に圧縮を取りません。 つまり、圧縮段階に入る前に、これらの画像を準備して最適化することが重要です。

これで、JPEGとPNGの違い、それらをいつ使用するか、ファイルを準備する方法をしっかりと理解できたはずです。 記事の冒頭からどの画像がJPEGであったかを知りたい場合は、それが最初の画像です。

まとめ

画像がウェブを実行しているように見えます。 このため、アプリケーションに適したファイルサイズで適切な品質を提供するために、さまざまなファイル形式が用意されています。 JPEGとPNGはどちらが得意かが明確ではなく、2つの一般的な画像形式であるため、一般的な比較です。

つまり、JPEGは写真用で、PNGはグラフィック用です。 ファイルを準備するための主な関心事は、ファイルサイズではなく、画質を高く保つことです。 それでも、解像度を調整すると最大の変化が得られますが、これは画質に大きな影響を与えます。 秘訣は、寸法、解像度、圧縮のバランスを取り、究極のWeb対応画像を実現することです。

ここで概説したように、Web用の画像を準備しますか、それとも別のことをしますか？ 以下のコメントセクションでお知らせください。

画像クレジット：minka2507、christels 。