ピクセル密度の高いディスプレイは急速に標準になりつつあります。コンテンツ クリエイターはこの事実に対応する必要があります。この短いガイドでは、ポリフィル、JavaScript、CSS ハッキング、まだ実装されていないブラウザ機能を使用せずに、今すぐウェブ上で高品質の画像を提供するための方法を紹介しています。つまり、ワークフローを大幅に変更せずに済みます。
現在、レスポンシブ画像に関する提案は多数あり、その多くはウェブ デベロッパーに大幅な変更を加える必要があります。標準トラックの srcset
<img> 属性は、特に srcset の追加のビューポート ベースの選択が複雑であるため、実装が困難です。
banner-HD.jpeg 2x, banner-phone.jpeg 100w, banner-phone-HD.jpeg 100w 2x
image-set CSS プロパティは、読み込む画像の決定に devicePixelRatio のみを使用しますが、デベロッパーは画像ごとに多くのマークアップを記述する必要があります。
<picture> 要素のような他の提案は、さらに冗長です。
さらに、標準トラックではないため、広く使用されているかどうかは srcset 属性よりもはるかに優れています。他の選択肢は JavaScript とサーバー側のソリューションのみですが、これらの方法には他の記事で説明されているように独自の欠点があります。
この記事では、ウェブ上で一般的に見られる画像の用途をいくつか取り上げ、通常の画像だけでなく、高ピクセル密度の画面でも機能する簡単なソリューションを紹介します。ここでは、window.devicePixelRatio が 1 より大きいデバイスは高 DPI と見なされます。これは、CSS ピクセルがデバイス ピクセルと同じではなく、画像が拡大されていることを意味します。
内容は次のとおりです。
- 可能であれば、ラスター画像ではなく CSS/SVG を使用してください。
- 高密度ディスプレイに最適化された画像をデフォルトで使用します。
- シンプルな描画やピクセルアート（ロゴなど）には PNG を使用します。
- さまざまな色の画像（写真など）には圧縮 JPEG を使用します。
- すべての画像要素で、必ず（CSS または HTML を使用して）明示的なサイズを設定してください。
シンプルな描画とピクセルアート
多くの場合、小さい画像は CSS 機能や SVG を使用することで完全に回避できます。たとえば、border-radius CSS プロパティは広くサポートされているため、角の丸い画像を使用する必要はありません。同様に、カスタム フォントが広くサポートされているため、「画像化」テキストを使用することはおすすめしません。
ただし、ロゴなど、画像の使用が唯一の方法である場合もあります。たとえば、この Chrome ロゴの自然なサイズは 256x256 です。Retina ディスプレイでは、対角線と曲線で線のエイリアシングが見られます。鮮明にレンダリングされたテキストと比較すると、厚くて粗く見えます。
自然サイズ: 256x256px、アセットサイズ: 31 kB、形式: PNG
ご納得いただけましたら、よかった。次に、高密度画像を使用します。ロゴを JPEG として保存してスペースを節約したいと思うかもしれませんが、ロゴやその他のグラフィックを非可逆形式で保存するとアーティファクトが生じる傾向があるため、これは良いアイデアとは言えません。この例では、非常に高い圧縮を使用して問題を誇張していますが、グラデーションの縞模様、白い背景のスペックル、乱雑な線に注目してください。
自然サイズ: 512x512px、アセットサイズ: 13 kB、形式: JPEG
比較的小さい画像の場合は、2 倍の PNG を使用することをおすすめします。一般に、1 倍と 2 倍の PNG のサイズの差は非常に大きいので注意してください（この場合は 52 KB）。ロゴの場合は、ウェブサイトの顔であり、ユーザーが最初に目にする場所です。サイズと引き換えに品質をあまり重視しなければ、サイト訪問者が目にする最後の部分にもなります。
2 倍ディスプレイ用に自然なサイズの半分に縮小した、Chrome のロゴを次に示します。
自然サイズ: 512x512px、アセットサイズ: 83 kB、形式: PNG
上記のレンダリングを行うためのマークアップは次のとおりです。
<img src="chrome2x.png" style="width: 256px; height: 256px;"/>
画像の幅と高さが指定されていることに注意してください。画像の実際のサイズは 512px であるため、これが必要となります。また、レンダリング エンジンが要素のサイズを適切に把握でき、計算に負担をかけすぎる必要がないため、パフォーマンスにも優れています。
有効な最適化方法の 1 つは、24 ビットの PNG をパレット化された 8 ビットに減らすことです。これは、Chrome のロゴを含む少数の色の画像で機能します。この最適化を行うには、http://pngquant.org/ などのツールを使用します。多少の縞模様が見られますが、このファイルはわずか 13 KB です。元の 512x512 の PNG に比べて 6 倍もサイズ削減できます。
自然サイズ: 512x512px、アセットサイズ: 13 kB、形式: PNG,
8-bit palette
さまざまな色の画像
私は HTML5Rocks の記事でさまざまなレスポンシブ画像技術を調査し、JPEG の 1 倍と 2 倍の圧縮、結果のサイズと画質の比較について調査しました。上記の記事のそのようなタイルの例を次に示します。
画像には、圧縮レベル（JPEG の品質で示される）、サイズ（バイト単位）、比較視覚忠実度に関する主観的な意見（数値でランク付け）のラベルを付けています。ここで興味深い点は、高度に圧縮された 2x の画像（ラベル 3）は、圧縮されていない 1x 画像（ラベル 4）よりもサイズが小さく、見栄えが良いことです。つまり、画像 4 と 3 では、各寸法を 2 倍にして圧縮を大幅に上げると同時に、サイズを 2 KB 縮小することで、画像の品質を向上させることができました。
圧縮、サイズ、画質
圧縮レベル、画像サイズ、画質、画像サイズのトレードオフをもう少し詳しく知りたいと思いました。上記の調査に基づいて、次の仮説で調査を実施しました。
仮説
十分に圧縮されていれば、2 倍の画像は他の（より低い）圧縮率では 1 倍のサイズで同じ画像になります。ただし、この場合、高度に圧縮された 2 倍の画像は 1 倍の画像よりもサイズが小さくなります。
プロセス
- 2 倍の画像から、1 倍の画像を生成します。
- 両方の画像をさまざまなレベルで圧縮します。
- 両方の画像セットを並べて表示するテストページを作成します。
- 2 つのセットの中で画像が同等の場所を見つけます。
- 画像サイズと圧縮レベルは同等です。
- 1 倍と 2 倍のディスプレイの両方でお試しください。
Lightroom の比較ビューに似た画像比較アプリを並べて作成しました。1x と 2x の画像を並べて表示するだけでなく、画像の任意の部分にズームインして詳細を確認することもできます。JPEG 形式または WebP 形式のいずれかを選択し、圧縮品質を変更してファイルサイズと画質を比較することもできます。複数の画像の設定を微調整し、圧縮品質、スケーリング、形式と画質のトレードオフのバランスを考慮して、すべての画像にその設定を使用します。
ツール自体は実際に体験できます。画像を拡大するには、サブ領域を選択してズームインします。
分析
最初にお伝えしますが、画質は主観的なものです。また、特定のユースケースによって、視覚忠実度とファイルサイズの範囲のどちらを優先するかが決まります。また、画像特徴の種類によってスケーリングと圧縮の品質に対する反応が異なるため、画一的なソリューションが必ずしもうまく機能するとは限りません。このツールのポイントは、画質の圧縮、スケーリング、形式について直感的に理解できるようにすることです。
画像ズームを使ってみて、いくつかのことがすぐにわかりました。まず、詳細度を高めるには、quality=90
dpr=1x 画像よりも quality=30 dpr=2x 画像をおすすめします。これらのイメージはファイルサイズも同等です（プレーンの場合、圧縮された 2x のイメージは 76 KB、非圧縮の 1x のイメージは 80 KB です）。
このルールの例外は、グラデーションを含む高度に圧縮（quality<30）された画像です。色の縞模様が生じる傾向があり、画像のスケールに関係なく同様に悪くなります。ツールで見つかった鳥と自動車のサンプルが、その一例です。
特に圧縮レベルが低い場合、WebP 画像は JPEG よりもきれいに見えます。この色の縞模様は、それほど問題にならなかったようです。最後に WebP 画像ははるかにコンパクトです
注意点とフィン
高密度ディスプレイで画像をきれいに見せることは、画面の大きなばらつきによって生じる画像関連の問題の半分にすぎません。場合によっては、ビューポートのサイズに応じて完全に異なる画像を配信することもあります。たとえば、オバマさんの顔写真はスマートフォン サイズの画面に適していますが、彼の前に立ち、彼の後ろに旗を立てている方が、ノートパソコンのディスプレイに適した写真になることもあります。
私は、高 DPI の画像のみに焦点を当てるために、この「アート ディレクション」トピックを意図的に避けました。この問題は、メディアクエリと背景画像の使用、JavaScript 経由、image-set などの新機能経由、サーバー経由など、さまざまなアプローチで解決できます。このトピックについては、可変ピクセル密度用の高 DPI 画像で説明します。
未解決の問題をいくつか解決して締めくくります。
- 高圧縮がパフォーマンスに与える影響高度に圧縮されたイメージをデコードすると、どのようなペナルティがありますか？
- 1 倍のディスプレイに 2 倍の画像が読み込まれた際に、画像を縮小しなければならない場合、どのようなパフォーマンスが損なわれますか？
まとめると、ラスター画像ではなく CSS と SVG を使用します。ラスター画像が厳密に必要な場合は、パレット数に制限があり無地が多い画像には PNG を使用し、色やグラデーションが多い画像には JPEG を使用します。このアプローチの優れた点は、マークアップがほとんど変わらないことです。ウェブ デベロッパーに必要なものは、2 倍のアセットを生成し、DOM 内で画像のサイズを適切に設定することだけです。
詳しくは、同様のトピックに関する Scott Jehl の記事をご覧ください。画像が鮮明になり、モバイルデータの使用量が少なくなる可能性があります。