アニメーション画像、透明度、背景

ウェブサイトでは、さまざまな画像タイプが使用されます。その中にはラスターフォーマットのものも、ベクトルフォーマットのものもあります。したがって開発者には多くの選択肢が与えられる一方で、どのフォーマットが、どのユースケースに最適なのかという疑問も生じます。

そこで、画像の一般的なユースケースを確認するとともに、各々について推奨事項と留意点を挙げてみましょう。

アニメーション

アニメーション付きのグラフィックは、複数のフレームを含んでいて、様々な形の動きを表現できる画像です。

複数のフォーマットがアニメーション(GIF、PNG および WebP)に対応していますが、ブラウザーに幅広く対応していることから、ほとんどのサイトで GIF が使用されています(最大 256 色、1 ビット透過に限られることに注意)。

透過性

画像が表示される際の背景色が不明の場合は、透過性の画像が有効です。バイナリー透過処理では、インデックスが付けられたカラーパレットから 1 色が透過色としてマークされます。より高度なものがアルファ透過処理です。透過に関する情報はアルファチャネルという別のチャネルに保存されます。

単純な透過が必要な場合には、GIF を使用してバイナリ透過で処理できます。PNG、WebP、JPEG 2000 および JPEG XR には、アルファチャネルの使用により強化された機能があります。

背景の傾斜

Cascading Style Sheet(CSS)内で要素の背景に塗りつぶしを指定できるのとまったく同じように、背景に傾斜を指定することもできます。一般に傾斜では、ある色が薄れて他の色に変化していきますが、その方向から色(必要に応じて複数指定可能)、さらに色の変化の分岐点に至るまで、傾斜の起こり方すべてを CSS で制御できます。

傾斜を CSS で宣言して使用する方が、実際の画像ファイルを使用するよりも制御とパフォーマンスに優れています。

ロゴ

ロゴは、完全にグラフィック(シンボルやアイコン)のみからなる場合もあれば、組織の名称(ロゴタイプやワードマーク)が含まれる場合もあります。

ロゴには、SVG などのベクトルフォーマットを使用すると、最良の品質(滑らかな境界、品質を保ったサイズ変更、小さなファイルサイズ)を得られますが、高解像度のラスター画像フォーマット(一般には PNG)を使用することもできます。

クリップアート

図や画像のクリップアート集は、文書やその他のプログラムにインポートできます。画像は、ラスターグラフィックでもベクトルグラフィックでも構いません。

漫画やクリップアートのような塗りつぶし色の画像には GIF が適しています。GIF 画像は、背景を透明にしてウェブページに配置できるため、重ね合わせることができます。

メザニン画像

メザニン画像は、最低 300 dpi(ドット/インチ)の解像度を持ち、最も一般的には写真と結び付けられます。

ウェブベースのメザニン(オリジナル)に対しては、非可逆性の圧縮でもなお品質とサイズのバランスが取れていることから、高解像度の JPEG がきわめて一般的になっています。可逆性の圧縮によって最高の品質を得たい場合には、PNG の利用を検討してください。複数のメディア(Web や紙への印刷など)にわたって画像を最もうまく使用できるようにするには、TIFF(Tagged Image File Format)がオリジナルに対して最良です。TIFF から Web 向きのフォーマットへ変換する必要があることに留意してください。

レスポンシブ

レスポンシブ画像は、さまざまな環境条件に順応する画像です。順応の例としては、大きさ、トリミング枠の変更などがあり、画像のソースまでもが変更されることがあります。レスポンシブ画像を使用すると、接続速度の遅いモバイルユーザーに送るファイルのサイズが小さくなるため、ウェブパフォーマンスの向上に資することができます。

ブラウザー間の互換性を意図する場合には、JPEG が最も適しています。互換性のあるブラウザーで画像を表示する場合、Chrome と Opera では WebP、Safari では JPEG 2000、Internet Explorer と Edge では JPEG XR をそれぞれ選択すると、最良の結果が得られます。

スプライト

スプライトは、多くの小さな画像やアイコンを、スプライトシートやタイルセットと呼ばれるより大きな 1 つの画像にまとめることでパフォーマンスを向上させる方法として、ウェブデザインで使用されます。

スプライトはアイコンにも用いられ、その場合は GIF や PNG が最適ですが、JPEG が使われることもあります。

こうした画像の表示を補助するために CSS がしばしば使用されますが、スプライトそのものは、通常 PNG か JPEG です。

アイコン

アイコンは、ボタンまたは視覚的な標識として、ウェブサイトで使用できます。先に述べたスプライトと同じように、多くの場合、アイコンセットがグループとしてまとめられます。この種の画像には、用途によって多くのオプションがありますが、SVG で最も良いパフォーマンスが得られます。ページのローディング時にうまく処理すれば、アイコンフォントも使用できます。こうした通常のフォーマット以外に、GIF や PNG も使用可能です。フォントもしくはスプライトとしてアイコンセットをロードする場合は、使用しないアイコンをロードすることの対価をよく考えるようにしてください。

丸み付きの角や部品のレイアウト

画面上でスタイル、高さあるいは幅を固定するために画像を利用したり、丸みを帯びた角のような効果を利用したりすることが、残念ながら多くのウェブサイトで今でもよく行われています。手短に言えば、この用途には画像を利用しないで、代わりに CSS を利用します。

丸みを帯びた角は、すべてのブラウザーでかなりうまく対応がなされており、下に示すように、より高度な設定を行うことができます。

概要

画像の効果を最大限に高めるには、ユースケースに最適のフォーマットを選ぶことが不可欠です。各々のフォーマットにはそれぞれ利点もあれば、欠点もあります。最終判断には、おそらくその両者を勘案しなければならないでしょう。

Akamai Image Manager を使用した、複数のオンライン画像ユースケースに対する管理の詳細をご確認ください。