サイト所有者は、常に画像ファイルを扱うことになります。画像に精通していなくても、画像を編集してサイトにアップロードすることはできますが、JPEG、そしてJPGのような一般的なファイル形式については理解しておきたいものです。
この記事ではJPGとJPEGの違いに詳しく触れ、最高のユーザー体験実現のために最適化した画像をサイトにアップロードするコツをご紹介していきます。
最新の.webpファイル形式に関する情報をお探しの方はこちらをご覧ください。
JPEGとは
画像を扱うサイト所有者なら、編集やアップロードの際に「JPEG」というファイル形式を一度は目にしたことがあるはず。
JPEGという用語は、実は3つの異なるものを意味します。
1. 非可逆圧縮方式
サイトに画像をアップロードする際には、サイトの速度やパフォーマンスに悪影響を与えないよう、リソースを浪費し、フロントエンドでの読み込みに時間がかかるような大きな画像を使用しないことが重要です。ファイルサイズを縮小し、優れたユーザー体験と読み込み時間を維持するためには、何らかの方法で画像を最適化しなければなりません。
そんな画像最適化に貢献してくれるのがJPEGです。JPEGは非可逆圧縮方式で、デジタル画像をできるだけ小さくし、必要時にできるだけ素早く読み込むために使用されます。
非可逆圧縮に関する注意事項は以下のとおり。
- 画像から不要な(冗長な)情報を取り除くことで、圧縮される画像のファイルサイズは恒久的に小さくなる。
- 画質は落ちるが、一般ユーザーが気づかない程度。
- 圧縮の過程で、各ピクセルがそれを囲むピクセルと2:1から100:1までの比率で比較される(元画像と同じピクセルは冗長と判断され削除される)。
- JPEGの非可逆圧縮は通常、写真や複雑な静止画像に使用される。
- 非可逆圧縮で画像を圧縮する場合、ファイルサイズと画質の適切なバランスを見つけることが重要(ファイルサイズが小さい=画質が悪い)。
- 画像を編集して保存すればするほど、画質は低下する。
非可逆圧縮を使った画像編集に慣れている方向けですが、RAWファイル形式の画像を編集し、一度だけ保存することで、ファイルサイズを縮小しながら画質を保つという技もあります。
サイトの画像にJPEG非可逆圧縮を使用したくない場合には、可逆圧縮方式を使用する手も。
可逆圧縮(ロスレス圧縮とも)は、画像をまったく別の形式(通常はPNG)で保存します。情報が削除されないため、画質が低下することはありませんが、画像の最終的なファイルサイズは常に非可逆圧縮方式よりも大きくなり、その結果、ページの表示速度が低下する可能性があります。
2. Joint Photographic Experts Group(JPEG)
JPEGとは、Joint Photographic Experts Groupの略であり、これはJPEG規格の作成に貢献した小委員会の名前です。JPEGは、ISOと呼ばれる広範なグループの下、他の静止画符号化規格とともに作成されています。
最初のJPEG標準は、ISO(国際標準化機構)によって1992年に発行されました。ISOは、「…材料、製品、プロセス、およびサービスがその目的に適合していることを保証するために一貫して使用できる要件、仕様、ガイドライン、または特性を提供する(英語原文の日本語訳)」文書を作成する責任を負います。
ISOは、ユーザーと消費者に最高品質の製品とサービスを提供するため、デジタル画像を含む多くのものの規格を定めています。
164カヶ国以上のメンバーが参加する任意団体であり、世界最大の規格策定団体です。
3. JPEGファイル形式
JPEGは、ファイル形式名やデジタル画像の保存・保存方法でもあります。JPEGは、画像を編集した後に保存する際のファイル形式の選択肢の1つであることから、ファイル形式としてのJPEGが最も知られているでしょう。
.jpegファイル形式の特徴は以下のとおりです。
- デジタルカメラやその他の画像キャプチャデバイスで使用される最も一般的な画像ファイル形式。
- 1,677万7,216色に対応し、RGBカラーモデルの各8ビットを使用して生成される。
- 一度に16,00万色以上を表示できるため、配色やコントラストの解像度がほぼ完璧。
- 最大サイズは65,535×65,535ピクセル。
- 非可逆圧縮により保存時の画像サイズは約50~75%縮小される。
なお、.jpegは、個々のピクセルを組み合わせて表示する.pngとして保存した場合よりも色が混ざり合うため、シャープなエッジを持つ画像には不向きです。
JPGとJPEGの違い
JPGとJPEGの違いは、実は文字数だけ(JPGは3文字、JPEGは4文字)。「JPG」は、ファイル名の最大文字数が3文字だった、Windowsの旧バージョン(MS-DOS 8.3とFAT-16)のために作成されました。
JPEGとJPGの違いはなんとたったこれだけ。
当時、MacやLinuxのようなUNIX系のOSにはこのような制限はなく、JPEGとして保存された画像にはそのまま.jpegというファイル拡張子が使用されました。ところが、Windowsで同じ種類の画像を保存する場合、ファイル拡張子を3文字に収める必要があり、.jpgに短縮しなければなりませんでした。
現在のWindowsでは、.jpegのような4文字のファイル拡張子もサポートされています。しかし多くの人が長年Windowsを使用していることから、画像をJPGとして保存することに慣れており、現在もJPGを使用する傾向にあります。
このため、Adobe PhotoshopやGIMPなどの写真編集ソフトは、混乱を避けるため、WindowsでもMacでも、デフォルトですべてのJPEG画像を.jpgファイル拡張子で保存します。
JPGとJPEGの特徴
.jpegファイルと.jpgファイルがまったく同じものであることはわかりました。この点を今後も記憶しておくため、JPEG画像とJPG画像の特徴をもう少し掘り下げてみます。
1. (ベクター画像ではなく)ラスター画像
コンピュータの画像は、ラスター画像またはベクター画像として作成されます。JPEGはラスター画像であるため、当然JPGもラスター画像です。
ラスター画像はビットマップとも呼ばれ、個々のピクセルを格子状に並べたもの。言い換えれば、それぞれが特定の色相や色合いでコード化された無数の小さな正方形(またはピクセル)の集合体であり、その組み合わせによって画像全体が作り上げられています(以下参照)。
ラスター画像の特徴は以下のとおり。
- 写真、スキャンした画像、複雑なグラフィックなど、線のないイメージに適している。
- 微妙な色相や陰影のグラデーションがあり、線や形がかなり不定形。
- ピクセルベースであることから、拡大すると画質に問題が生じる(画質がギザギザして、個々のピクセルが浮き彫りに)。
- 解像度は「dpi」(dot per inch)で示される。
- dpiが高ければ高いほど、解像度が高くなり、画像の視覚的な魅力が高まる。
- 一般的なラスターファイル形式にはTIFF、JPEG、GIF、PCX、BMPなどがある。
- ウェブの標準であり、インターネット上のすべての画像に使用されている。
JPEGやJPGはベクター画像ではないことは、覚えておいてください。
ベクター画像には、以下のような特徴があります。
- 多角形、直線、曲線、円、長方形などの幾何学的形状を定義する数式に基づいている。
- 線画のような直線的な画像に適している。
- 色のグラデーションがないため、平坦で均一な色の画像向き。
- ロゴ、レターヘッド、フォントなど、一般的なグラフィックが含まれる。
- 画像全体でピクセルに依存することがないため、画質に影響を与えずに拡大縮小が可能。
2. 「JPEG」と「JPG」は同じ意味
JPEGが「Joint Photographic Experts Group」の略であることは先に触れましたが、JPGも同じISOの略称になります。
3. デジタル写真に適している
.jpegと.jpgはラスター画像であり、ベクター画像ではないため、どちらもデジタル写真に適したファイル形式です。デジタル写真をラスターJPEG/JPG画像として保存すると、シームレスで広範なカラーグラデーションを再現できます。.jpeg/.jpgとして保存してサイトにアップロードすると、美しい写真を掲載可能です。
画像ファイルの種類とウェブサイトへの影響についてはこちらをご覧ください。
4. 保存時に画質が低下する
各ファイル形式で使用されている圧縮方式(非可逆圧縮)により、画像のファイルサイズが小さくなるにつれて画質が多少落ちるのはデメリットと言えますが、画像のファイルサイズが縮小されるため、サイトの表示速度が高速になるのはメリットです。
JPEGとJPGの目的は、画像のファイルサイズを小さくしてウェブ上で見やすくすることと、広く認識されている一般的なファイル拡張子を使って保存時に画像を圧縮する簡単な方法を提供することにあります。
ちなみに、JPGとJPEGのどちらを選ぶかは、どちらも同じファイル形式であることから、完全に好みの問題になります。
JPEG 2000
JPEGやJPGに関して調べていると、「JPEG 2000」という言葉を目にすることがあります。結論から言うと、JPEG 2000はそれほど一般的でなく、ほとんどの画像編集ソフトでもサポートされていません。
JPEG 2000は、2000年にJoint Photographic Experts Groupによって作成されたJPEGの改良版であり、離散ウェーブレット変換(DWT)の高度な圧縮技術を用いて、可逆圧縮を実装するように設計されています。
画質を落とすことなく画像を最適化し、JPEGとして保存する画像ファイル形式です。
JPEG 2000には主に以下のような機能があります。
- 高度な圧縮技術─従来のJPEGとは異なり、非可逆圧縮と可逆圧縮の両方を行うことができる(1つの画像ファイルでも可)。
- プログレッシブデコーディング─画像全体がバックグラウンドでダウンロードされている間、低画質版がサイト訪問者に表示される。ダウンロードが進むにつれて、徐々に画質が上がっていく。
- より高い圧縮率─非可逆圧縮であれば、同じサイズのJPEG画像と比較して、画質を損なうことなく20~200%高い圧縮率を実現。
さらに以下のような特徴も。
- 画像の透明度を保持。
- 2値、グレースケール、パレットカラー、フルカラーの画像データを記述可能。
- メタデータ内に非公開または特定の目的の情報を含めることができる。
- より大きな画像サイズ(64,000×64,000K以上)を調整なしで扱うことができる。
- 超低遅延でリアルタイムのTVコンテンツにも有効。
- 解像度、画質ともに拡張可能。
JPEG 2000の限界
以上のようにJPEG2000にはメリットが多数あり、デジタル画像のためのより良い符号化標準であるように思えますが、未だ一般化されていないのには以下のような理由があります。
- 主要なブラウザに対応していない(Safariのみ)。
- JPEGと互換性がない(新たに規格をエンコードし、元のJPEGをサポートしなければならない)。
- JPEG 2000ファイルのエンコードはCPUに負荷がかかるため、サーバーに負担がかかり、処理が遅くなる可能性がある。
- 多くのサイトやカメラが、この形式に対応する準備ができていない。
デジタル画像を保存する際、JPEG 2000ファイル形式を選択できる場面は少ないのが現状です。確実にJPEGよりも優れたファイル形式ではあるものの、使用し始めるとなると様々な互換性の問題を抱えることになります。
画像ファイルをJPGに変換する方法
デジタル画像を.jpgまたは.jpegファイルとして保存する方法は多数あります。いくつかピックアップしてご紹介します。
1. Windowsのペイント
Windowsをお使いであれば、ペイントを使用して簡単に.jpegや.jpgとして保存することができます。ペイントに画像をアップロードし、「ファイル 」>「名前を付けて保存」で保存先を選択し、画像名を入力して、ドロップダウンメニューから「JPEG(*.jpg,*.jpeg,*.jpe,*.jfif)」を選択します。
最後に「保存」をクリックすれば完了です。
2. Affinity Designer
Affinity Designerは、Adobe Photoshopのような画像編集ソフトウェアと似たものです。この手のソフトウェアで画像をJPGとして保存するには、アプリケーションを開いて画像をアップロードした後、必要な編集を行い、「ファイル」>「書き出し…」を選択します。JPEGアイコンを選択し、画質(最高、高、中、低)を選択し、「書き出し」をクリックします。
「名前を付けて保存」ダイアログが表示されたらファイルの保存先を選択し、画像に名前を付け、JPGとして保存します。
「保存」をクリックすれば完了です。
3. オンライン自動変換ツール
無料のオンラインツールを使って画像をJPGに変換することも可能です。例えば、FileZigZagは簡単に使えるツールで、画像ファイルをドラッグ&ドロップ、またはアップロードして、画像を変換するファイル形式を選択し、メールアドレスを入力して、「Convert」をクリックするだけ。
メールアドレスの入力に抵抗がある方は、以下のソリューションをチェックしてみてください。
- XnConvert:Windows、Mac、Linuxを使用して様々な画像ファイル形式を扱う、高度な画像編集者にお勧め。一括変換機能あり。
- Zamzar:サイズの大きな画像(50MB以内)にも対応しており、メールでの受け取りの有無を選択できる無料ツール。
- Adapter:バッチ画像対応で、瞬時に変換可能なシンプルな画像変換ツール。macOSとWindows対応。
上記はあくまで一部であり、他にもご紹介しきれないほどの選択肢があります。
まとめ
JPGとJPEGは、デジタル画像を保存・保管する際に最も一般的なファイル拡張子および圧縮方式。視覚的に魅力的な画像を表示し、優れたユーザーエクスペリエンスを確保したいウェブサイトに適しています。
.jpeg、.jpg、.webpのいずれのファイル形式を選んでも、美しい画像を高速で提供することができます。
コメントを残す