非可逆圧縮と可逆圧縮の本質的な違い
非可逆圧縮は、圧縮の過程で人の目には気づきにくい細部の情報を一部間引くことで、ファイルサイズを小さくします。圧縮率を高くするほど、画質の劣化も目立ちやすくなります。一方、可逆圧縮はより効率のよい符号化でサイズを小さくする方式で、復元した画像は元のファイルと完全に一致し、細部が失われることはありません。
ラスター画像とベクター画像は表現方法がまったく違う
JPG、PNG、GIF、WebPはいずれも基本的にはラスター(ビットマップ)形式で、格子状に並んだピクセルで構成されているため、一定以上に拡大するとギザギザやぼやけが生じます。一方、SVGはベクター形式で、数式によって形状・色・パスを記述するため、どの拡大率でもエッジがくっきりしたままです。アイコンやロゴにベクター形式が向いているのはこのためです。
ピクセル数とファイルサイズ、画質の関係
画像の大きさは「横何ピクセル×縦何ピクセル」で表されます。ピクセル数が増えるほど、ファイルサイズも一般に大きくなります。ウェブ上で表示する画像は、実際の表示サイズより極端に大きいものを使うと、読み込みが遅くなる原因になります。また、dpiは主に印刷のための目安で、画面表示ではピクセル数のほうが重要です。JPGの画質設定を少し下げるだけで、見た目はほとんど変わらないのにファイルサイズが大きく減ることもあるため、書き出し時に目視で確認しながら調整するとよいでしょう。
形式を変換するときの注意点
JPGからPNGに変換しても、すでに失われた細部は戻りません。逆に、PNGからJPGに変換すると、透過部分が単色で塗りつぶされ、さらに画質もわずかに劣化します。変換を繰り返すと画質が下がり続けるので、元のデータは必ず別に保管し、必要な形式はそのつど元データから書き出すようにしましょう。SNSなどにアップロードすると、サービス側で再圧縮されることもあるため、あらかじめ適切なサイズで用意しておくと安心です。
よくある質問
ウェブサイトの画像はJPGとWebP、どちらを使うべきですか?
対象のプラットフォームや訪問者のブラウザが広くWebPに対応しているなら、同程度の画質でWebPのファイルサイズはJPGより小さくなることが多く、ページの表示速度の向上に役立ちます。古いブラウザやソフトとの互換性も重視する場合は、JPGのほうが無難です。実際の訪問者の環境に応じて判断してください。
JPGをPNGに変換すれば、失われた画質を取り戻せますか?
取り戻せません。JPGの保存時に生じた画質の劣化は元に戻せず、PNGへの変換は現在の画像を可逆圧縮の形式で保存し直すだけです。すでに失われた細部の情報が復元されるわけではありません。
スクリーンショットはPNGとJPGのどちらがよいですか?
文字や線がくっきり見えることが多いので、一般にPNGのほうが向いています。JPGは文字の周りににじみが出やすいため、画面の文字を読みやすく保ちたいときには不向きなことがあります。
ロゴを複数のサイズで使うには、どの形式がよいですか?
SVGが向いています。拡大縮小しても劣化しないため、名刺からポスターまで同じファイルで使い回せます。ただし、使う場所によってはPNGなどのラスター形式を求められることもあるので、提出先の指定を確認してください。