東京オリンピックまでにテレビを4K・8K放送にするとか前に総務省のことを記事にしました。
現在は8Kのディスプレイは存在していないですが、検証は可能です。
一緒にAndroidのフラッグシップモデル（最上級クラス）では、4K（Retina）の4倍の解像度の上をゆく9倍の解像度をつかうクラスもありますので、こちらも一緒にやってみます。
画像サイズは320 x 240 pixelを使います。
画像の切り替えは２種類用意しています。
Retina.js,Retina-images,Picturefill.js(WordPress WP Retina 2x使用),srcsetを上部、
画像のサイズ指定での対応を下部に表示します。
Retina.jsの動作が不安定になっています。
srcsetでの動作に切り替えます、それまでご不便をおかけします。2015-03-07 15:25
切り替えが完了しました。2015-03-07 21:26
通常の解像度(1倍)の画像
普段使う解像度です。
4K（Retina）、Android最上級モデルだとボヤケます。
Androidフラッグシップモデル3Xの解像度(9倍)の画像
Androidは高さ3倍で横3倍でと考えると9倍の解像度が必要になります。
用意した画像は960 x 720 pixelになります。
Retina.js,Retina-images,Picturefill.js(WordPress WP Retina 2x使用),srcset
切り替わった画像には《Android3X》の文字が表示されます。
画像のサイズ指定を1/3に指定
8Kディスプレイの解像度(16倍)の画像
8Kディスプレイは4Kディスプレイの倍の解像度が必要になります。
高さ4倍で横4倍でと考えると16倍の解像度が必要になります。
用意した画像は1280 x 960 pixelになります。
Retina.js,Retina-images,Picturefill.js(WordPress WP Retina 2x使用),srcset
切り替わった画像には《8Kディスプレイ》の文字が表示されます。
画像のサイズ指定を1/4に指定
まとめ
解像度で説明するのがわかりやすいので、箇条書きにしました。
- 通常の画像 解像度1倍
- 4K/Retinaディスプレイの画像 解像度4倍
- Androidフラッグシップモデルの画像 解像度9倍
- 8Kディスプレイの画像 解像度16倍
このようになりますので、これを画像サイズで表現します。
| モニターの種類 | 表示するサイズ | 必要な画像サイズ |
|---|---|---|
| 通常のモニター | 320 x 240px | 320 x 240px |
| 4K/Retina | 320 x 240px | 640 x 480px |
| Android | 320 x 240px | 960 x 720px |
| 8K | 320 x 240px | 1280 x 960px |
今回は320 x 240pxですので、8Kでも1280 x 960pxで済みましたが当サイトの記事の幅は660pxなので、8Kなら2640pxの画像が必要ってことですね。
別サイトでワードプレス講座開催中。
