Webデザイナーにおすすめの画像形式
最終更新日:
WebデザイナーがWebページで使う画像を選ぶときには、画像形式とページの最適化という2つの要素を考える必要があります。どのブラウザーでも画像を鮮明に表示し、ページをすばやく読み込むには、この2つを適切に選ぶことが大切です。
どちらかを間違えると、サイトの読み込みは驚くほど速くても、画像の見た目がひどくなってしまうかもしれません。あるいは、画像はとても美しいのに、ページの読み込みに延々と時間がかかることもあります。どちらも避けたい状況です。絶対に困りますよね！この記事は、そんな問題を解決するために書きました。今のWebデザインでは、画像形式がとても重要なのです。
画像形式が重要な理由
パフォーマンス： 画像形式によってファイルサイズは異なります。ほかの形式よりも容量を多く使うものもあります。画像が重いとページの読み込みが遅くなり、サイトのパフォーマンスに悪影響を与えます。
拡大・縮小への対応： 画像を縮小しすぎたり引き伸ばしすぎたりすると、画質が低下します。どの画面サイズでも高画質を保つには、拡大・縮小に対応した画像形式を使う必要があります。
見た目： 画像形式によっては細部まで表現できるため、ほかの形式よりも高画質になります。
ブランドの一貫性を保つため、多くのデザイナーはサイト全体で使う形式を1つか2つに絞っています。基本的には、画質とパフォーマンスのバランスが取れる形式を選ぶのがおすすめです。
Webにおすすめの画像形式
画像ファイルは大きくラスターとベクターの2種類に分かれ、これらをもとにさまざまな画像形式が開発されています。
ラスター画像では、グラデーションの中で多くの色を微妙に混ぜ合わせることができます。視覚効果を簡単に取り込めるため、主にカメラで使われています。一方、ベクター画像ファイルは、多くの色を扱ったりグラデーションを作ったりすることができません。数式によって生成されるため、簡単に拡大・縮小できます。
Webにおすすめのラスター形式には、JPG、PNG、GIF、WebP、HEICがあります。ベクター形式では、SVG、AI、EPSがおすすめです。
それぞれの形式を見ていく前に、これらのファイルは別の形式に変換できることを知っておきましょう。選んだ形式がうまく合わなくても心配はいりません。Filestarを使えば、いつでも変換できます。たとえば、GIFアニメーションを使いたいけれど、サイトの読み込みが遅くなるのが心配なら、GIFをWebPに変換できます。とても簡単で、すぐに完了します。WebPをGIFに変換する方法の動画もご覧ください。
1. JPG
JPEG/JPG形式は、数百万色を表示したい場合に最適です。リアルな画像や写真を扱うサイトを制作するなら、この形式を使いましょう。目を引く色を表現できるので、SNSでも活用できます。
高い圧縮率でファイルサイズを小さくできるため、JPG画像は簡単にアップロードやダウンロードができます。通常、画像を最適化する際には非可逆圧縮によって画質が低下します。ただし、圧縮を何度も繰り返さなければ、失われた細部は見る人にはほとんど分かりません。
最大の弱点は、透過に対応していないことです。JPG画像をほかの要素と重ねて使うことはできません。それでも、オンラインで写真を表示する形式としては、依然として最もよく使われています。
2. GIF
今では、アニメーションに対応したGIFが、あらゆるSNSでコミュニケーションの手段として使われています。Webサイトでは、主に短いアニメーションを表示するために使われます。ただし、多くのフレームを使うため、ファイルサイズは大きくなります。そのため、サイトでは使いすぎず、アニメーションを見せる場合にだけ使いましょう。
透過には対応していますが、扱える色は256色までです。静止画に使うと見た目が悪くなるため、おすすめしません。複雑な画像の表示にもGIFは使わないようにしましょう。
3. PNG
PNGは数百万色に対応しており、オンラインではJPGと同じくらい人気があります。GIFに代わる形式として登場したため、GIFよりもファイルサイズが小さくなります。PNGは可逆圧縮を使うので、画像を編集しても画質が損なわれません。そのため、色情報が少ない画像には、JPGの代わりにPNGを安心して使えます。
スクリーンショットの表示にもPNGが最適です。JPGで保存すると、輪郭がぼやけてしまいます。バナーのように文字が多い画像も、JPG形式で保存すると輪郭がギザギザに見えます。また、透過に対応しているため、ロゴやアイコンにもよく使われます。
全体的に画質を保つことに優れているため、JPGよりも人気があります。スクリーンショットや色情報が少ない画像の保存には、最もおすすめの形式です。
4. HEIC/HEIF
HEVC圧縮をベースにした、比較的新しい画像コンテナー形式です。ほかの形式と比べて幅広い画像機能に対応しており、汎用性の高い画像ファイルです。複数フレームの圧縮、複数フレームの画像、画像以外のデータ、アニメーションなどを扱えます。
JPGよりもファイルサイズが小さく、画質も優れています。HDR、4K、8Kの画像を表示するサイトでは、HEICを使うことで容量を抑えながら見た目の品質を高められます。
ただし、最大の課題はブラウザーとOSの対応状況です。MacではHEIC/HEIFを簡単に扱えますが、サイトの閲覧者が使うブラウザーやOSを考慮する必要があります。
5. WebP
Googleは2010年に、PNG、JPG、GIFに代わる形式としてWebPを開発しました。非可逆圧縮と可逆圧縮の両方を取り入れることで、ファイルサイズを小さくしながら高画質を実現しています。透過とアニメーションにも対応しています。ページを最適化するためのWeb向け画像形式として作られたので、WebPを使うとページの読み込みが速くなり、パフォーマンスも向上します。
唯一の弱点は、対応しているのがFirefox、Microsoft Edge、Chrome、Androidのネイティブアプリに限られることです。AppleとIOSは、まだWebPに対応していません。
6. SVG
Scalable Vector Graphics（SVG）は、Webで使えるベクター形式の中でも特におすすめです。PNGやGIFと同じく可逆形式で、どの解像度やサイズでも高品質な画像を表示できます。画像を縮小したり拡大したりしても、形が崩れません。アニメーションや透過に対応し、インデックス化された画像やスクリプトで制御する画像も表示できます。
Webサイトでロゴを表示するのに最適です。SVGの代わりにAIやEPSを使うこともできます。