レスポンシブ画像 – 決定版ガイド

Webデザインは必ずしも安価ではありませんが、デザイナーにかかるWebデザインコストの中でも、まずはユーザーのコストを考慮するべきです。

モバイルユーザーは、Wi-Fiから離れた場所で多くの場合、ダウンロード（およびアップロード）するたびに、バイト（Byte）単位で料金を支払います。HTMLやCSSのファイルサイズは年々大きくなっていますが、JPGやPNG、アニメーションGIFのような大容量ではありません。細心の注意を払っているデザイナーは、できるだけ早くダウンロードできるWebサイトやアプリを作ることがベストプラクティスであるとわかっています。つまりそれは、マークアップから余分なdiv要素を削ったりするようなものです。

ユーザーにピクセルが必要ない場合は、ピクセルを送信しないようにしましょう。

「レスポンシブ」を考えるというのは、単にメディアクエリをコードに叩き込むだけではなく、デザイナーが克服しなければならない独自の課題があります。さまざまなスクリーンでうまく機能して見栄えのするサイトを作るには、最初から画像に関するスマートな戦略が必要なのです。

難しいかもしれませんが、努力する価値は必ずあります。写真は千の言葉に匹敵するかもしれませんが、その重さが百万バイトでは、ユーザーは写真がダウンロードされる前に諦めてしまうかもしれませんからね。

デザインだけでなく全チーム間で一貫性が保たれやすくなるコード優先型のプロトタイピングソリューションであるUXPinを使ってプロトタイプを速やかに構築しませんか。コードベースのデザインシステムを共有できるようにしましょう。UXPinをぜひ無料でお試しください。

UIに適したフォーマットの選択

JPG、SVG、GIF、PNG（およびPNG-24）‐ Webデザイン初心者だと、この３つを混同してしまうかもしれません。熟練したベテランでさえ、SVG で十分なのにJPGを選んだり、PNG-8 ではなく PNG-24 をデフォルトにしたりするのは珍しくないですからね。

JPG

JPEG は「Joint Photographic Experts Group」の略で、インターネットで転送される画像を標準化する手段として１９９１年に開発されて１９９２年に発表されました。当時は帯域幅が限られていたため、ユーザーはより少ないバイト数でより多くの画像を表示できるファイルを好んでいました。

JPG 形式は非可逆圧縮を採用しています。つまり、一度圧縮すると、画像を完全に元の品質に戻すことはできません。0～100 の尺度で品質が落ちる代わりに、ファイルが小さくなりますが、奇妙なことに、100% JPG 圧縮のファイルは、品質は最高でもファイルサイズは最悪であり、0% 圧縮では、ファイルは最小になりますが品質は最悪です。

アーティファクトとは、JPG 圧縮によってファイルサイズを小さくするために変更される画像の一部であり、目に見えるときは、約２０ピクセル四方の領域に色を集めたかのように、均一な色のブロックのように見えます。JPG画像は複雑な画像でも自然に見えるため、この形式は写真に最適です。

結論：JPG画像は、写真のようなディテールの多い複雑な画像に適している。

PNG (8-bit)

JPGとは異なり、PNG（Portable Network Graphics）ファイルは、ファイルを開いて再保存しても圧縮が進行しないロスレス圧縮を使います。代わりに、PNG-8ファイルには、使われているすべての固有の色のリストが含まれます。

ここで言う「固有」とは、肉眼では区別がつきませんが、「#FFFFFF」が「#FFFFFE」ではないということです。各ピクセルにはファイルリスト内の色が割り当てられているため、同一のピクセルが貴重なバイトを浪費して既に述べたことを再現する必要がなくなります。

例えば最初の１００ピクセルが RGB（255,255,255）を使っている場合、それを述べる必要はなく、ピクセル 1〜500 がカラー #1 に属すると述べるだけです。なので、PNG 形式は完全にフラットな色の画像を圧縮するのに最適です。

結論：PNG-8 形式は、カラーテーブルと呼ばれるリストに最大２５６の固有の色を保持でき、ピクセルを完全に透明にすることもできる。このような事実により、PNG-8 は今日流行している「フラットカラー」の外観に最適。

PNG (24-bit)

PNG の他の種類である PNG-24 を使ったファイルは、圧縮が使われていないため、とてもきれいに見えます。また、カラーテーブルも使いません。PNG-24ファイルを保存するときは、ディテールが逐一保存されます…そして、それが問題なのです。

不透明度もまた問題です。PNG-8 の画像のピクセルは透明にすることができますが、０か１００かです。見えるか見えないかです。

結論：PNG-24 ファイルのピクセルは部分的に不透明になる可能性があり、その背後にある要素に色を付けることができる。この場合も、ファイルサイズは大きくなる。

GIF

GIF（Graphical Interchange Format）は、多くの点で PNG-8 に似ています。

GIF はあらゆるブラウザで広く受け入れられています。１９８７年から存在して定着しています（PNG はそれより少し新しく、１９９６年に登場しました）。GIF はカラーテーブルを使い、圧縮効率は PNG より平均して若干劣ります。また、ピクセルを完全に透明にすることができます。

GIFの特筆すべきは、１つのファイルに複数の「画像」を保持し、それを連続して表示できる点です。つまり、GIF はアニメーションに対応しているということです。アニメーション GIF ファイルは、アニメーションの開始や停止ができないため、実際にはインタラクティブではないことから、通常はデザインよりもコンテンツに使われます。また、ファイルサイズがやや大きいため、デザイナーはフラットカラー画像には GIF よりも PNG を好むことが多いようです。

結論：シンプルなアニメーションが必要な場合は、GIF が最適。それ以外の場合は、単色のイラストなどのシンプルな画像には PNG-8の少し効率的な圧縮方式、写真などの複雑な画像には JPEGを使うのがおすすめ。

各バイトを圧縮

画像ファイルの圧縮（冗長なデータの削除や、ダウンロードしやすいように画像を変更したりしてファイルサイズを小さくすること）は、Webサイトをサクッと読み込むのに極めて重要です。高速なWebサイトの結果、より多くのユーザーを獲得できますからね。

Photoshop、Sketch、Pixelmator などのほとんどの画像エディタは、Webに適した圧縮ファイルを難なくエクスポートしますが、それが必ずしも理想的というわけではありません。他のツールで、画像をさらに圧縮できるかもしれません。

圧縮サービス

Compress JPEG

名前の通り、この無料サービスでは、品質を犠牲にすることなく、あらゆる JPG ファイルから余分なバイトを取ってくれます。

Compress JPG により、フォトショップで７０% で保存された上記の画像が２１７ KB から１６０ KB にスリム化されました。ちなみに品質はそのままです。

TinyPNG

この無料サービスでは、８ビットおよび２４ビットの PNG ファイルを圧縮して読み込み時間を短縮します。

TinyPNG は、カラーテーブル内のほぼ重複した色を削除することで、品質に影響を与えることなく、上記の画像を１６KB から１２KB に縮小しました。

バイト数の「多すぎる」「少なすぎる」はどのくらい？

画像によって異なりますが、できるだけ少ないバイト数で最高品質の画像を取得することが目標です。ただ、トリミングのしすぎになってしまう時があります。

JPG の場合

検証するために、上の写真をJPGの圧縮率を段階的に変えて保存してみました。結果は、圧縮率０％の４５KBから１００％の４７９KBまで幅がありました。ただこの言葉とは裏腹に、最も圧縮率の高いJPGが最も高品質（そしてファイルサイズが最も大きい）であることを覚えておいてください。

このグラフで、高圧縮領域での劇的な減少がわかります。画質を１００％から７０％に落としただけで、ファイルサイズはほぼ半分になりましたが、より低い圧縮率では、それほど大きな違いは見られませんでした。バイト数は０～２０%に下がったものの、品質が急速に落ちたため、節約に見合うほどではありませんでした。

画像は０％圧縮で４５KB（左）、３０％圧縮で９４KB（右）でした。ファイルサイズは半分になりましたが、アーチファクト、つまりJPG圧縮が効果を発揮するブロック状の部分の増加は、節約に見合いませんでした。

ベストプラクティス：「JPGファイルを７０% より高く、または２０% より低く圧縮しない」これは厳格なルールではなくガイドラインですが、ほとんどの場合、２０～７０の範囲で対応できることがわかりました。

PNG の場合

PNG ファイルを見ると、話はより複雑になります。このグラフィックでも同じ実験を実行しました。

色が厳密にフラットではないことに注目してください。構図全体に細かいグラデーションがかかっていますね。これを考慮するには、微妙なグラデーションをシミュレートするドットのパターンである「ディザリング」が必要です。

JPG とは異なり、PNG フォーマットはパーセンテージを使いません。カラーテーブル内の色の数によって品質が決まり、ある程度はファイルサイズも決まります。８８% のディザリングでは、結果はまあ…

一般的に、色数とファイルサイズには関係がありますが、それほど多くはありません。フォトショップだと、限られたカラーテーブルで最適なパターンを見つけるのが大変でした。実際、４０色は２５色とほぼ同じバイト数で、ファイルサイズは同じですが、品質ははるかによかったです。

ベストプラクティス：「PNG からバイトをすべて絞り出す際に最良の結果を得るには、さまざまなカラーテーブルを試してみるのが最善である。」。残念ながら、適切な量は画像ごとに異なる主観的な問題であり、いつ「適切」に見えるかはあなた次第です。

SVG

SVG（Scalable Vector Graphics）は、ピクセルの代わりに線（ラスター画像の代わりにベクター）を使って線画を表示します。SVG は実際には XML の一種で、Inkscape や Adobe Illustrator などのプログラムで簡単に作成できます。

SVG ファイルは、ディザリングなしでグラデーションを生成でき、古いスマートフォンからワイドスクリーンTVまで、あらゆるサイズのコンテナに合わせて拡大縮小できます。また、SVG ファイルは、ベクターとしてブラウザがその場で点と点を結ぶため、解像度が落ちることはありません。そして JavaScript でアニメーションさせることもでき、 HTML 文書にそのまま埋め込むこともできます。

上: ベクターアート (左) は適切に拡大されます。一方、ラスターアート (右) はブロック状でピクセル化されて見えます。

ただし、PNG や GIF と同様に、SVG も画像が複雑になるにつれて悪くなります。写真には不向きで、点や曲線が増えるにつれてファイルサイズが急速に大きくなります。

ベストプラクティス：「シャープな線と緩やかなグラデーションを備えたフラット 2.0 の外観を求めており、最新のブラウザ（IE8は残念ながら対象外）を対象としている場合は、SVG を使う」のがおすすめです。

コードに関する考慮事項

画像ファイル自体以外にも、コードを使ってさまざまな状況にピクセルが適切に応答するようにすることができます。

必須の CSSのプロパティ

最も一般的で、最も信頼性の高いソリューションの１つは、CSS のちょっとした設定です：

img { max-width: 100%; }

このセレクタとプロパティで、ほとんどの画像がコンテナに収まるようになります。例えば、メディアクエリでラッパーを幅３００ピクセルに設定すると、そのラッパー内の画像は３００ピクセルを超えることはありません。このテクニックには、モダンブラウザ全体で優れたサポートがあるため、今日、多くのレスポンシブWebサイトで見かけることができます。

将来の HTML画像要素

今日、私たちは CSS と <img>要素による背景画像に制限されていますが、新しい技術が実装されると（されれば）、レスポンシブWebデザインのページレイアウトと同じように画像もレスポンシブ化されることになるでしょう。

実験的な <picture> 要素には、メディアクエリを使っていつ読み込むかを宣言する <source> 子要素が１つ以上含まれており、ブラウザは、<picture> 内の <img> 要素の src 属性を、（存在する場合は）関連するソースに置き換えます。

例えば：

</picture>

上記のコードは、画像コンテナの幅に応じて、sample-default.png を大きいバリエーションまたは小さいバリエーションに置き換えます。

おまけに、<picture> に対応していないブラウザでも、デフォルトの <img> 要素は普通に読み込まれます。これは、本記事の執筆時点（2024年4月時点）では、この要素は広く受け入れられているわけではないので朗報です。実際、現在これらの要素に対応している最新のブラウザはほとんどありませんが、<picture> と <source> のサポートは拡大しつつあるので、今後どうなるのか注目しましょう。

ブラウザレンダリング

最高の画像は何もない状態であることもあります。最近のブラウザは、グラデーション、アニメーション、ベジェベクター、影、幾何学図形など、独自のグラフィックをレンダリングできます。ちょっとした工夫で、ストライプを作ることもできるんです。

ブラウザで画像を作成すると、ユーザー側に視覚的な負担がかかります。画像ファイルをダウンロードする必要がないため、帯域幅と時間を節約できますが、ブラウザに特定の機能が必要です。

ベストプラクティス：「ブラウザレンダリングは、背景色や派手なボーダーなどの美観のために使うが、コンテンツのために依存せず、派手な CSS3 のトリックを使わずに、あるいは CSS をまったく使わずに、デザインの可読性を常にテストする」ことがおすすめです。

UIデザインへの影響

アイコンから背景、コンテンツに至るまで、画像がいい UI（ユーザーインターフェース）にとって重要であることは間違いありませんが、レスポンシブ画像は、帯域幅の問題やサイズの問題などの多くの課題に直面しています。

完璧な世界であれば、小さなビューポート用に画像をトリミングし、最も重要な部分に焦点を当てるか、さまざまなブレイクポイント用に異なる画像をアップロードする機能があるはずです。それは可能です。回避策はありますし、 <picture> と srcsetに期待しましょう。ただそれまでは、様々なデバイスやブラウザで読めることを確認するために、様々なサイズで画像をテストすることがベストプラクティスと言えるでしょう。

レスポンシブWebデザインに携わるデザイナーは、画像を考慮しないといけません。適切なファイル形式の使用や圧縮の最適化（やりすぎは禁物）、将来のテクノロジーへの注視は、Webサイトサイトをサクッと読み込み、あらゆるサイズ、解像度、向きの画面で美しく表示するための大きな助けになります。

結局は、ユーザーにとって何が最も役立つかという疑問に行き着きます。

デザインライブラリからインポートした画像、ビデオ、GIFを使ってUIを作成しませんか。

コード優先型のUIデザインのためのオールインワンデザインソリューションであるUXPinをぜひお試しください。UIを８.６倍速く構築して、ベクターをコードに変換せずに本番環境対応のコードをコピーしましょう。UXPin の無料お試しはこちら。

Try UXPin for free