ウェブサイトの運営者は常に画像ファイルを目にしています。画像を編集しウェブサイトにアップロードするのに画像のエキスパートである必要はありませんが、JPEGのような一般的な画像フォーマットには慣れておいた方が良いでしょう—いや、JPGだったでしょうか…?

今回の記事では、JPGとJPEGの違いや特徴についてご紹介し、最高のユーザー体験を実現する最適な画像をウェブサイトにアップロードするお手伝いをします。

準備は宜しいですか?それでは、早速、見てみましょう!

JPEGとは?

ウェブサイトの運営者であれば、編集やアップロードの最中に一度はJPEGフォーマットを目にしたことがあるでしょう。

しかし、実は JPEG は3つの異なるものを指しているのです。ご存知でしたでしょうか?

詳しくご説明しましょう。

1. 非可逆圧縮技術 JPEG

ウェブサイトに画像をアップロードする時、サイトのフロントエンドでなかなか読み込まれない大きな画像を使用せずに、容量を圧縮し、サイトの表示スピードやパフォーマンスを改善することが重要です。ウェブサイト運営者はファイルサイズを落とし、読み込み時間とユーザー体験の質を保つために画像を最適化する必要があります。

 

そこで便利なのがJPEGです。JPEGは非可逆圧縮技術で、これを用いることで、デジタル画像はできる限りサイズが小さくなり、閲覧された際には素早く表示されます。非可逆圧縮について次のことを覚えておきましょう。

 

  • 画像のファイルサイズは不要(余剰)な情報を削除することにより圧縮され元に戻すことができません。
  • 画質はある程度損なわれますが、多くのサイト閲覧者は気がつかない程度の劣化でしかありません。
  • 圧縮のプロセスで、それぞれのピクセルが—2:1から100:1までの比率で—周囲のピクセルと比較されます。(元のピクセルと同じピクセルは余剰とみなされ全て削除される)
  • JPEGの非可逆圧縮は通常写真や複雑な静止画像に用いられます。
  • 非可逆圧縮フォーマットを利用する場合、ファイルサイズと画質のバランスを見極める必要があります。(例えば、サイズの低下=画質の低下となる)
  • 画像の編集と保存を重ねる度に画質は損なわれます。

非可逆圧縮を用いた画像編集の経験が豊富な人は、RAW JPEG画像を利用し、編集、保存を一度で行うことで画質を損なわずにサイズを小さくすることができる可能性があります。

サイトの画像に非可逆圧縮を用いたくない場合には、それに代わる方法も—可逆圧縮です。可逆圧縮では、画像は全く異なるフォーマットで保存されます(通常、PNG)。画質は損なわれませんが、可逆圧縮の場合、最終的な画像サイズは非可逆圧縮よりも必ず大きくなってしまいます。そのため、ページの読み込みが遅くなる場合があります。

2. Joint Photographic Experts Group (JPEG)

JPEGはJPEGやISO静止画像のコーディング基準作成に貢献した組織の名前「Joint Photographic Experts Group」の略称です。

最初のJPEGの基準はISO(国際標準化機構)により1992年に作成されました。ISO「特定の素材、製品、工程、サービスがその目的に適合することを保証するために継続的に利用できる要求、仕様、ガイドライン、特徴を定めた」文書の作成を担う組織です。

ISOはユーザーや消費者に高品質な製品やサービスを提供することを目指し、デジタル画像を含め様々なものの基準を定めています。

ISO Logo
画像引用元:Wikimedia Commons

この国際的機関は164以上の国からの有志のメンバーで構成され、世界最大の基準認証機関となっています。

3. ファイル拡張子としてのJPEG

JPEGの用法の最後の一つは、デジタル画像を保存する際の方法やファイル拡張子の名前です。画像を編集した後に保存する際の拡張子の選択肢となるため、最もよく目にする用法でしょう。

JPEGファイル拡張子

.jpegファイル拡張子に関する興味深い事実をご紹介します。

  • デジタルカメラやその他の画像撮影機器で最もよく使われるファイル拡張子です。
  • RGBカラーを各8Bitで表現することで16,777,216色に対応しています。
  • 1600万色以上を一度に表示することができるため、カラースキームとコントラスト分解能は、ほぼ完璧です。
  • 最大65,535 × 65,535ピクセルに対応しています。
  • 保存時に画像サイズを約50〜70%縮小(非可逆圧縮のため)できます。

 

なお、個別のピクセルを組み合わせて表示する.pngとは異なり、色が混ざり合ってしまうため、このファイル拡張子は明確な色の境界線がある画像には適していません。

それでは今度はJPG について見ていきましょう。

JPGとは?

JPGはJPEGと何が違うのでしょうか?

Windowsの拡張子
Windowsの拡張子

実は.jpegと.jpgの間には文字数の違い以外の違いはありません

 

詳しくご説明しましょう。

 

JPGという名称はWindowsの旧OSにより生まれました。MS-DOS 8.3と FAT-16ファイルシステムでは、拡張子の文字制限のないMacやLinuxなどのUNIX系OSと異なり、文字制限が3文字まで。

そのため、MacやLinuxではJPEGとして保存された画像の拡張子は.jpegとなりますが、これらの画像をWindowsで保存する場合、3文字の文字制限を越えないよう拡張子は.jpgと省略されたのです。

現在のWindowsOSでは.jpegや.jpgなど3文字の拡張子も4文字の拡張子も使用できます。しかし、多くの人がWindowsを長年使用していて、JPGとしてファイルを保存するのに慣れてしまっているため、廃止されませんでした。そのため、 Adobe PhotoshopやGIMPなどの画像編集ソフトでは混乱を防ぐためにWindowsでもMacでもJPEG画像はデフォルトで.jpg拡張子で保存されます。

JPG とJPEGの類似点

.jpegと.jpgが全く同じだということはお分かりいただけたかと思いますが、要点を明確にし、長く覚えておけるように、JPEGとJPGに共通の特徴について見ていきましょう。

1. どちらもラスタ画像(ベクタ画像ではない)

コンピューター上の画像はラスタ画像またはベクタ画像のどちらかで作成されます。JPEGはラスタ画像であるため、当然、JPGも同じくラスタ画像です。

ラスタ画像とは、ビットマップ画像のこと。ビットマップとは全体で一つの画像を表現する個別のピクセルのグリッドです。言い換えると、それぞれ特定の色相、濃度としてコーディングされた小さな色のついた四角(ピクセル)の集合体で、全体として見ると、形のある一つの画像を表現します。

画像引用元:PrintCNX

ラスタ画像について理解を深めるための補足情報をご紹介します。

  • 写真、スキャンした絵、細かいグラフィックなどの「線画でない画像」に最適
  • 色相、濃度のグラデーションが繊細で、境界線や形状が曖昧
  • ピクセルを用いているため、サイズを拡大すると画質が損なわれる(ギザギザになり、個別のピクセルが表示される
  • ドット密度(dpi)で表される特定の解像度で表示される
  • dpiが高いほど解像度が高く、画像が美しく表示される
  • 一般的なラスタ画像のフォーマットにはTIFF、 JPEG、 GIF、 PCX 、 BMP などある
  • ラスタ画像はウェブ上のスタンダードであり、インターネット上で使用される全ての画像に適している

 

再度強調しますが、JPEGとJPGはベクタ画像ではありません。

jpg vs jpeg: vector image example
画像引用元:PrintCNX

違いを理解するために、ベクタ画像についてもご紹介します。

  • 画像は多角形、直線、曲線、円、長方形などの幾何学的図形を定義する数式に基づいている
  • ラインアートなど線で描かれる図形に最適
  • カラーグラデーションがないため、均一に着色された画像に適している
  • ロゴ、レターヘッド、フォントなどのグラフィックに用いられる
  • ピクセルに依存しないため、拡大、縮小しても全体の画質が劣化しない

2. どちらも同じ意味を持つ

JPEGがJoint Photographic Experts Groupの略称であることはご紹介しましたね?そうです、JPEGもJPGも、この同じISOの組織名の略称なのです。

3. どちらも同じ種類の画像に使われる

どちらもベクタ画像ではなくラスタ画像であるため、.jpegも .jpgもデジタル写真に適したフォーマットです。デジタル写真は大量のカラーグラデーションを持ちますが、ラスタ形式のJPEG/JPGとして保存するとシームレスに表示されます。 .jpegまたは.jpg として保存してウェブサイトにアップロードすれば、サイトの訪問者はいつでも美しい写真を見ることができるのです。

4. 保存する際に画質が損なわれる

.jpegと.jpgには差異がない(全く同一のものである)ため、 採用されている圧縮方法、すなわち非可逆圧縮により、画像サイズを小さくすると画質が損なわれます。さらに、どちらの拡張子(.jpeg / .jpg)を使用しても元の画像サイズよりも小さくなり、ウェブサイトにアップロードし、サイト閲覧者が閲覧する時の読み込みが早くなります。

加えて、どんな拡張子(.jpegでも.jpgでも)を使っていても元の画像サイズよりも小さくなり、ウェブサイトにアップロードされ、訪問者が閲覧する際に読み込みが速くなるのです。

JPEGとJPGは同じものであり、閲覧しやすいよう画像のサイズを落とすため、保存時に簡単に画像を圧縮できるため、そして多くの人が知る一般的な拡張子で画像を保存するために使用されます

JPG JPEGどちらが良いか? 正解はないので、あまり悩む必要はありません。どちらも同じで、単に好みの問題です。

JPGとJPEG 2000

JPEGやJPGについて情報収集をしていると JPEG 2000 という文字を目にするかもしれません。結論から言うと、多くの画像編集ソフトではJPEG 2000は選択肢となりません。

JPEG 2000 は2000年にJoint Photographic Experts Groupにより作成され、既存のJPEG基準よりも優れているとされた画像符号化方式です。離散ウェーブレット変換という最新の画像圧縮技術を用いて可逆圧縮を実現するというもの。

これにより画質を損なわずに、画像を最適化しJPEGとして保存できるようになりました。

JPEG 2000の主な特徴をご紹介します。

  • 最新の圧縮技術従来のJPEGとは異なり、JPEG 2000では(同一の画像ファイルであっても)非可逆圧縮、可逆圧縮の両方で保存できる
  • 段階的な復号画像全体のダウンロード中に、サイト閲覧者が画質の低いバージョンの画像を閲覧することが可能—データのダウンロードが進むと画質の良い画像が表示される
  • 高い圧縮率非可逆圧縮の場合、JPEG 2000では画像を通常のJPEGよりも20-200%多く圧縮することができ、画質はJPEGとして圧縮した時と同等に保つことが可能

さらにJPEG 2000では、以下のことが可能になります。

  • 画像の透過を保持できる
  • 2値画像、グレースケール、パレットカラー、フルカラーの画像データを表現可能
  • メタデータ中に無制限にプライベート、または特定の目的での情報を含めることが可能
  • 回転することなく大きなサイズ(64000 x 64000ピクセル以上)の画像を扱える
  • レイテンシがとても短いため、ライブTVのコンテンツに最適
  • 解像度と画質のスケーラビリティを持つ

JPEG 2000の制限

JPEG 2000は素晴らしい特徴をたくさん持ち、最も便利なデジタル画像の拡張子のように思えますが、多くの人にとって、いまだに身近でないのには理由があります。

  • 全てのブラウザに対応していない(Safariのみ対応
  • JPEGと互換性がない(新しい基準をエンコードし、元のJPEGをサポートする必要あり)
  • JPEG 2000ファイルのエンコードはCPUに負荷がかかるため、サーバーに負担がかかり、読み込みが遅くなる可能性がある
  • まだ一般的に普及していないため多くのウェブサイトやカメラはこのフォーマットに対応していない

これらの制限により、デジタル画像の保存時にJPEG 2000を選択できる機会は少ないでしょう。JPEGよりも優れていますが、普及するまでは互換性の面で必要以上に面倒な思いをすることになります。

画像をJPGに変換する方法

デジタル画像を.jpgや.jpegファイルに変換する方法はたくさんあります。いくつかご紹介しましょう。

1. Windowsペイント

Windowsを利用している場合、Windowsペイントを利用して画像を簡単に.jpegや.jpgとして保存できます。画像をWindowsペイントにアップロードし、ファイル名前をつけて保存を選択し、ファイルの保存場所を選択し、ファイル名を入力して、ドロップダウンメニューから JPEG (*.jpg, *.jpeg, *.jpe, *.jfif)を選びます。

Windows Windowsペイント
Windowsペイント

最後に「保存」をクリックします。

2. Affinity Designer

Affinity DesignerはAdobe Photoshopとよく似た画像編集ソフトです。このソフトウェアを用いてJPG形式で画像を保存するには、まずアプリケーションを開き、画像をアップロードします。お好みの編集をして、「ファイル」>「エクスポート」をクリックします。次にJPEGのアイコンを選択し、画像品質(最高品質、高品質、中品質、低品質)を選択し、「エクスポート」をクリックします。

export affinity designer
Affinity Designer

すると、「名前を付けて保存」ダイアログが開きます。ファイルの保存先を選択し、画像に名前を付けて、ファイルをJPGとして保存しましょう。

Affinity Designerで「名前を付けて保存」
Affinity Designerで「名前を付けて保存」

保存」をクリックします。

3. オンライン変換ツール

画像をJPGに変換したい場合は、無料のオンラインJPG変換ツールが多数あります。たとえば、 FileZigZag は、使いやすい無料のオンラインファイル変換ツールです。画像ファイルをドラッグアンドドロップするかアップロードして、変換するファイルタイプを選択し、メールアドレスを入力して、Convert」をクリックします。

FileZigZagでpngをjpegに変換
FileZigZagでpngをjpegに変換

もちろん、画像をJPGに変換することと引き換えにメールを差し出すのが嫌な場合も。その他の無料の選択肢もまとめておきました。

  • XnConvert:多数の画像ファイル形式に対応。一括変換可能。Windows、Mac、またはLinuxで使える高度な画像エディターです。
  • Zamzar最終結果をメールで送信するかどうかの選択が可能な、大きな画像(最大50MB)を扱える無料のオンラインツール。
  • Adapter一括画像選択に対応。即座に変換可能。macOSとWindowsの両方で使えるシンプルな画像変換ツールです。

もちろん、これらは画像をJPGに変換する際に便利なオプションの一部にすぎません。

JPG vs JPEG: What's the difference? What about JPEG 2000? 😫 Get the answer (and more) in our extensive guide! 💪 クリックでつぶやく

まとめ

JPG、JPEGは、デジタル画像を保存したい人にとって最も一般的なファイル拡張子であり圧縮方法です。視覚的に魅力的な画像を表示でき、優れたユーザーエクスペリエンスを確保したいサイト所有者に特に最適です。

嬉しいことに、.jpeg、.jpgのいずれを利用しても、あっという間に読み込まれ、美しい画像が表示されます。

Brian Jackson

Brianの最大の情熱の一つは10年以上使用してきたWordPressです。複数のプレミアムプラグインさえ開発しています。Brianの趣味はブログや映画やハイキングなどです。TwitterでBrianとつながりましょう。