ICS MEDIA

ウェブにHDRがやってきた 〜 白より明るい世界へ、写真が“本物の輝き”に近づく新技術

/ 株式会社ICS 池田 泰延

従来のウェブの画面は黒（#000000）から白（#FFFFFF）の間で色を表現してきました。この範囲で文字色・背景色などのCSSや画像を扱ってきましたが、最近のウェブではこの範囲を超えた明るさを扱えるようになってきています。

従来の輝度の範囲はSDR（スタンダード・ダイナミック・レンジ）と呼ぶのに対し、この範囲を超えるものをHDR（ハイ・ダイナミック・レンジ）といいます。HDRでは白のさらに上、より明るい光が肉眼に近い印象で再現されます。

今年はブラウザの対応状況が進み、HDRをウェブで扱えるようになりました。本記事ではHDRの使い方と魅力を紹介します。

この記事で説明すること

  • HDRでリアリティーのある表示ができ、写真・映像の魅力が増す
  • 静止画、動画、WebGPUでHDRが可能
  • HDR表示が可能なスマートフォンは普及している
  • ウェブ制作者はHDRを意識する必要がある

実装例

HDRの表示がどのようなものか、体験を得られるオリジナルの写真ギャラリーのデモを用意しました。Chrome・Edge・Safariの最新版で、HDR対応ディスプレイ（例：iPhone Pro等）でアクセスして試してみてください。写真を詳細表示したときに、HDR対応ディスプレイではHDRで表示されます。

もうひとつ、SDRとHDRを比較可能なデモも用意しました。写真の間の境界線をドラッグして、SDRとHDRの表示を比較してみてください。

写真の明るい光の部分が飛び抜けて、白より明るく表示されていることを確認できます。これがHDRの効果です。

HDRが普及した背景

HDRを表示するには対応するディスプレイやソフトウェアが必要になります。

ここ数年で、端末とOS／ブラウザのHDR対応が進みました。HDRディスプレイはゲーム業界などでは2010年代に登場していましたが、モバイルでは2017年のiPhone XやXperia XZ Premiumなどから採用されています。

モバイルアプリでは、Meta社のSNS（InstagramやThreads、Facebook）が積極的にHDRに対応しています。Instagramのストーリーで、ときおり画面が明るくなるような投稿を見たことがある人がいるかもしれません。それがHDRです。

現代はHDR撮影が可能なスマートフォンが普及しており、ユーザーは知らず知らずのうちにHDRの静止画・動画を投稿していることでしょう。

HDRの効果

HDRの主な効用はハイライト側の表現にあります。たとえば夜景での光や反射など、輝度差をより豊かに表現できるため、実際にその景色を眺めているような、自然界の輝度を体験できます。

次の写真は、HDRとSDRの写真を並べて比較したものです。高層ビルの夜景で、窓の光の明るさに注目ください。

SDRでは明るく白い状態で表示されていますが、HDRだと輝きとして表示されています。

HDRの効果は写真だとわかりづらいのがネックです（SDRで表現できないHDRの輝度を、SDRの図版で解説するのは無理があります……）、少しでも効果を伝えたいと考え動画を用意しました。次の動画でご覧ください。

https://youtu.be/t2kPQXRATkw

EIZOのサイトでは、「高画質をかなえる5つの要素」が説明されています。ウェブでは“色域”は以前からCSSで扱えましたが、2025年に“輝度（HDR）”も扱えるようになったかたちです。

よくわかる、HDR徹底解説！　HDRとは | EIZO株式会社

HDRの実装方法

ウェブでHDRを扱うハードルは、高くありません。以下の3つの手順で準備します。

  1. HDRの写真素材を用意する
  2. HTMLで<img>タグで通常どおり配置
  3. CSSのdynamic-range-limitで明るさの上限を制御

HDRコンテンツの作成

実装の前提になるのは“正しいHDRファイル”を用意することです。

一般的なデジタルカメラでRAW撮影しておけば、現像ソフトでHDRに書き出せます。

Adobe Lightroom Classicでは、現像モジュールの［基本補正］にある［HDR］を有効にすると、ヒストグラムや各パラメーターがHDR編集向けに切り替わります。書き出し時は［ファイル設定］でAVIFやJPEGなどの形式を選び、［HDR出力］をオンにして保存します。

書き出し方法は以下のウェブページが参考になります。

［互換性を優先］を選択すると、写真をSDR・HDRの両方に対応させられます。ファイルにゲインマップが含まれるためです。

ここで説明した手順をとらずとも、最近のスマートフォンではデフォルトでHDR記録ができるようになっています。またSIGMA BF、Panasonic LUMIX S1RⅡなど、HDR記録が可能なデジタルカメラが存在します。

各画像形式のHDR対応状況

AVIFエーブイアイエフがオススメです。

HDRを扱える画像形式には、HEIFヒーフやJPEG XLもありますが、ブラウザの対応状況はイマイチです。また従来、JPEGはHDRに対応していませんが、JPEGにゲインマップを埋め込む方式としてUltra HDR（JPEG + ゲインマップ）という形式が登場しました。SDR・HDRの両対応ができるゲインマップはファイル容量が増加します。

ウェブではLighthouseなどのスコアツールで、次世代画像形式が推奨されることが多いです。そのため、HDRを使うなら、ファイル容量的にも高効率なAVIFが一番シンプルだと筆者は考えます。

なお、WebPウェッピーはHDRに対応していません。

形式名 HDR対応 備考
AVIF ✅ 高効率で全ブラウザ対応。
HEIF ✅ 高効率だが、Safariのみ対応。
JPEG XL ✅ 高効率だが、Safariのみ対応。
JPEG ⚠ 部分対応 SDR・HDR両対応は可能だが容量が大きくなりがち。
WebP ❌ 非対応 HDRには未対応。

参考記事：『次世代画像形式のWebP、そしてAVIFへ。変わり続ける技術に対応するweb制作の黄金解』

HTMLでの実装方法

HTMLページでは、imgタグでHDR画像を配置するだけです。

<img src="photo_HDR.avif" alt="" />

先ほどの写真の書き出し時に［互換性を優先］を選択しましたが、ファイルがSDR・HDRの両方のデータをもつので、ブラウザが自動的に対応した写真を表示してくれます。

CSSでの制限方法

HDR画像は輝度が強く、ページ内で浮きやすい存在です。一覧画面では控え、詳細表示するときだけHDR表示するのが無難です。CSSで明るさの上限を切り替えられます。

CSSのdynamic-range-limitプロパティはHDRの“伸び”をどこまで許容するかを要素ごとに指示できます。次のように画面によって、HDR可否を制御するのがいいでしょう。

/* 一覧画面では周辺UIとなじませる */
.thumb img {
  /* HDRをSDR相当に抑える */
  dynamic-range-limit: standard;
}

/* 詳細画面 */
.detail img {
  /* ディスプレイの能力をそのまま使う */
  dynamic-range-limit: no-limit;
}

dynamic-range-limitプロパティのキーワードは以下の指定ができます。

  • standard：SDR相当で抑制
  • no-limit：抑制なし（HDRで表示）
  • constrained：適度に表示（HDRで表示）※Chrome系のみ

詳細はMDN『dynamic-range - CSS』をご覧ください。

ユーザーが投稿する写真がHDRかもしれない

ユーザー投稿があるウェブサービスでは、HDR写真がそのままアップロードできることを意識すべきです。最新スマートフォンは標準カメラでHDR写真を得られるものが多いです。ウェブ開発者が意識していなくても、ユーザーがHDR写真を投稿すれば、ウェブサイトでHDR写真がそのまま表示され、画面のUIから浮いてしまうといったことが考えられます。

また、その逆で、せっかくHDRで撮影して投稿しても、ウェブサービスに投稿すると写真の輝きが失われてしまった、ということも起こりえるでしょう。ウェブサービスでは写真のアップロード時に、画像最適化のサーバーモジュールを使うことが多いです。自動変換で写真のメタデータを除去され、写真の見え方が変わってしまうことも考えられます。

いずれにせよ、ユーザーが写真を投稿できるようなウェブサイトを開発する場合は、SDRとHDRのディスプレイを用意して、それぞれ動作検証する必要があります。ウェブ制作者がSDRのディスプレイで作業をしていると、HDRコンテンツが含まれていたときに気付かない、といったトラブルもあり得ます。

※iPhoneやiPadでは、省電力モードにすると、ディスプレイはSDR固定になります。

対応端末とスペックの見方

身近な端末でもHDR表示は当たり前になっています。仕様では「HDR10／Dolby Visionの記載」「ピーク輝度のニト値」「DisplayHDR認証」などを手掛かりに、HDR対応かどうかを判断できます。

Apple製品は仕様書に「ピーク輝度」という記載があり、これがHDR対応していることを指します。

以下に2025年現在の代表的なサポート端末を紹介します。

  • iPhone 17 Pro / iPhone Air / iPhone 17（無印）
    • 最大輝度1,000ニト（標準）、ピーク輝度1,600ニト（HDR）、ピーク輝度3,000ニト（屋外）
  • MacBook Pro
    • XDR輝度：1,000ニトの持続輝度（フルスクリーン）、1,600ニトのピーク輝度（HDRコンテンツのみ）
    • SDR輝度：最大1,000ニト（屋外）
  • Android
    • Pixel 9 Pro
      • 最大輝度2,000ニト（HDR輝度）、3,000ニト（ピーク輝度）
  • Windows
    • Surface Laptop Studio 2
      • VESA DisplayHDR 400認定

▼iPadでHDR対応有無でこれだけ輝度に差が生まれる。

対応ブラウザ

HDR対応について、ここではCSSのdynamic-range-limitプロパティを利用可否の下限として紹介します。

CSSのdynamic-range-limitプロパティはChrome 136（2025年4月）・Edge 136（2025年5月）、Safari 26.0（2025年9月）以上で利用可能です。

参照：Can I use...

※CSSとしては2025年からサポートされましたが、ブラウザによっては、画像・動画としては以前からもHDRに対応していました。

HDR動画

本記事はHDR画像を中心に紹介しましたが、HDR動画も同様にvideoタグとしてブラウザがサポートしており、CSSによって制限できます。

静止画だけではなく、動画も、YouTubeなど主要サービスがHDR配信に対応しています。制作者がHDRに対応した動画ファイルを用意すれば、対応端末では“4K HDR”などの表示で再生されます。

手前味噌ですが、筆者はHDR対応の動画を投稿していますので、ご覧ください。

iOSでの動画撮影では、HDRのON/OFFが選べます。やはり、ユーザーは技術としてのHDRを知らずとも、HDRでコンテンツを作っている可能性が高いといえるでしょう。

WebGPUでもHDRが可能

canvasタグではWebGPUを使う場合に限りHDRの表示が可能です。

『WebGPU の新機能（Chrome 129）  |  Blog  |  Chrome for Developers』にデモが掲載されており、試すことができます。

従来のWebGLにはHDR表示はありませんので、HDR表示がWebGLにたいするWebGPUの利点のひとつと言えます。

まとめ

HDRが実は一般ユーザーにとって普及していること、そして、ウェブで利用可能な時代が来たことを紹介しました。

一方で、HDRの明るさは制作者側にとって新しい概念です。ユーザー体験を損なわない配慮（輝度の調整や使い所の見極め）は新たな課題として意識することも増えるでしょう。

高輝度で見た目に近い表現は見る人の印象に残りやすく、写真やビジュアルコンテンツの魅力を高めてくれるでしょう。環境が整った今、HDR写真のポテンシャルをウェブで活かしてみてください。

カメラ・レンズや映像機器などのウェブサイトや、写真家のポートフォリオサイトでは、HDR対応する価値は高いように思います。

補足：フォトレタッチのHDR合成とは別物

なお、本記事で扱ったHDRは「複数枚の露出を合成してダイナミックレンジを広げる撮影手法」のことではありません（参照『ハイダイナミックレンジ合成 - Wikipedia』）。本記事は撮影工程での合成の有無にかかわらず、最終的にHDR画像として書き出し、それをHDR対応ディスプレイで表示する、という話題です。

  1. 冒頭
  2. 実装例
  3. HDRが普及した背景
  4. HDRの効果
  5. HDRコンテンツの作成
  6. 各画像形式のHDR対応状況
  7. HTMLでの実装方法
  8. CSSでの制限方法
  9. ユーザーが投稿する写真がHDRかもしれない
  10. 対応端末とスペックの見方
  11. 対応ブラウザ
  12. HDR動画
  13. WebGPUでもHDRが可能
  14. まとめ
  15. 補足：フォトレタッチのHDR合成とは別物
SNSでシェアしよう
シェアいただくと、サイト運営の励みになります！
X（旧Twitter）へポスト
はてなブックマークへ投稿
URLをコピー
池田 泰延

ICS代表。筑波大学 非常勤講師。ICS MEDIA編集長。個人実験サイト「ClockMaker Labs」のようなビジュアルプログラミングとUIデザインが得意分野です。

この担当の記事一覧
トップページにもどる