ピクセル密度の高いディスプレイが急速に標準になりつつあります。コンテンツ クリエイターはこの事実に適応する必要があります。これは、まだ実装されていないポリフィル、JavaScript、CSS ハッキング、ブラウザ機能を使用せずに、今日のウェブ上に高品質の画像を提供する方法についての短いガイドです。つまり、ワークフローを大幅に変更することなく、
現在、レスポンシブな画像に関する提案が多数ありますが、その多くはウェブ デベロッパーに大きな変更をもたらします。標準追跡用の srcset
<img> 属性は特に、srcset でビューポートに基づいて追加の選択が複雑になるため実装が困難です。
banner-HD.jpeg 2x, banner-phone.jpeg 100w, banner-phone-HD.jpeg 100w 2x
image-set CSS プロパティは、devicePixelRatio のみを使用して読み込む画像を決定しますが、それでも、デベロッパーは画像ごとに大量の追加マークアップを記述する必要があります。
<picture> 要素など、その他の提案はさらに冗長です。さらに、Standard Track ではないため、ユビキタスな可用性は srcset 属性よりもさらに遠くなります。他には JavaScript とサーバーサイドのソリューションしかありませんが、これらの方法には他の記事で説明しているように、独自のデメリットがあります。
この記事では、ウェブでよく見られる画像の使用方法をいくつか紹介し、高画素密度の画面と通常の画面の両方で機能する簡単なソリューションを提案します。説明において、1 より大きい window.devicePixelRatio をレポートするデバイスは、高 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
比較的小さな画像の場合は、2x PNG を使用します。通常、1x と 2x の PNG のサイズの差は非常に大きくなります（この場合は 52 KB）。一方、ロゴはウェブサイトの顔であり、ユーザーが最初に目にするものです。サイズと引き換えに品質を優先しすぎてしまうと、訪問者が目にする最後の要素でもあります。
2 倍のディスプレイ用に、Chrome ロゴを元のサイズの半分に縮小したものです。
自然サイズ: 512x512px、アセットのサイズ: 83 kB、フォーマット: PNG
上記をレンダリングするマークアップは次のとおりです。
<img src="chrome2x.png" style="width: 256px; height: 256px;"/>
画像の幅と高さを指定していることに注意してください。画像の自然なサイズが 512 ピクセルであるため、これが必要となります。また、レンダリング エンジンは要素のサイズを適切に把握できるため、パフォーマンスの面でも優れています。
有効な最適化方法の 1 つとして、24 ビットの PNG をパレット付きの 8 ビット PNG に減らす方法があります。これは、Chrome ロゴを含む画像の色数が少ない場合に有効です。この最適化を行うには、http://pngquant.org/ などのツールを使用できます。少しだけ縞模様がありますが、このファイルのサイズはわずか 13 KB です。元の 512x512 の PNG と比べて、サイズを 6 倍削減できます。
自然サイズ: 512x512px、アセットのサイズ: 13 kB、フォーマット: PNG,
8-bit palette
さまざまな色の画像
私は HTML5Rocks の記事で、さまざまなレスポンシブ画像技術の調査を行い、1x と 2x の JPEG の圧縮に関する調査を行い、結果のサイズと画質を比較しました。上記の記事から抜粋したタイルを以下に示します。
圧縮レベル（JPEG 品質で示される）、サイズ（バイト単位）、相対的な視覚的再現性に関する主観的な意見（数字でランク付け）のラベルを画像に付けました。ここで興味深い点は、高度に圧縮された 2 倍の画像（ラベル 3）は、非圧縮の 1x の画像（ラベル 4）よりもサイズが小さく、見栄えが良いことです。つまり、画像 4 と画像 3 では、各ディメンションを 2 倍にして圧縮率を大幅に高め、同時にサイズを 2 kB 縮小することで、画像の品質を改善しています。
圧縮、サイズ、画質
圧縮レベル、画像サイズ、画質、画像サイズのトレードオフについてもう少し詳しく知りたいと思います。上記の調査に基づいて、次の仮説で調査を実施しました。
仮説
十分な圧縮を行うと、2x の画像は、他の（低い）圧縮で 1x サイズの同じ画像と同等に見えます。ただし、この場合、高度に圧縮された 2 倍の画像は 1 倍の画像よりもサイズが小さくなります。
プロセス
- 2x の画像から、1x の画像を生成します。
- 両方の画像をさまざまなレベルで圧縮します。
- 両方の画像セットを並べて表示するテストページを作成します。
- 2 つのセットの中で、画像が同じ場所を選んでください。
- 同等の画像サイズと圧縮レベルに注目してください。
- 1 倍と 2 倍のディスプレイで試してみてください。
Lightroom の比較ビューに似た、画像の並べて比較するアプリを作成しました。1 倍と 2 倍の画像を並べて表示し、画像の任意のセクションをズームして詳細を確認できるようにすることを目的としています。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 画像をご覧ください。
未解決の問題がいくつかあるため承認する:
- 高い圧縮がパフォーマンスに及ぼす影響。高度に圧縮された画像をデコードすると どのようなペナルティがありますか
- 2x の画像が 1x ディスプレイに読み込まれたときに画像のサイズを縮小しなければならない場合、パフォーマンスにどのような影響がありますか？
まとめると、ラスター画像ではなく CSS と SVG をご使用ください。ラスター画像が厳密に必要な場合は、パレットが限られ、単色が多い画像には PNG を使用し、色やグラデーションが多い画像には JPEG を使用します。このアプローチの優れた点は、マークアップが実質的に変更されないことです。ウェブ デベロッパー側で必要なことは、2 倍のアセットを生成し、DOM で画像のサイズを適切に設定することだけです。
詳細については、同様のトピックに関する Scott Jehl の記事をご覧ください。画像が鮮明になり、モバイルデータの使用量が少なくなることを願っています。