新人コーダーです。
初歩的な質問かもしれませんが、よろしくお願いいたします。
スマホサイトやレスポンシブサイトでは高解像度のスマホ対応のために、
画像サイズを2倍や3倍で書き出すかと思うのですが、
パソコン用のサイトでも、4Kディスプレイや5KのiMAC対応の場合も同様に、
画像サイズを大きいサイズで書きださなければ画像がボヤけて表示されるのでしょうか。
レスポンシブサイト用の記事や書籍はよく見かけるのですが、
どれもスマホ対応用の記事が多く、4Kや5Kのディスプレイのことは見つけることができませんでいた。
スマホとパソコンではそもそも対応方法が違いうのでしょうか。
何卒、よろしくお願いいたします。
みんなの回答 4 件
それだと高解像度じゃない端末でも読み込みが重くなるな?
ランサーズでバカディレクターがRetinaでぼやけるから画像サイズ2倍で作れとかいちばん最後の最後で言ってきたことがあったな
結論はスマホであろうとパソコンであろうと同様です。
よくある疑問ですが、難しい質問だと思います。簡単に説明します。画像を縦横2倍の解像度で出力する理由は、Retinaディスプレイなど画素密度(ppi)が2倍になっているためです。
同じスマートフォンでもiPhone 3GSとiPhone6sを比較してみると分かりやすいと思います。
まずデバイスピクセル比を調べて下さい。デバイスピクセル比の求め方は、CSSピクセル:デバイスピクセルです。
デバイス・ピクセルとCSSピクセルの数が同じのiPhone 3GSは何倍など考えなくてもよいので比率は1とします。
さきほどデバイスピクセル比はCSSピクセル:デバイスピクセルと申しましたが、iPhoneの仕様にはCSSピクセルは書いてありません。その場合は、画面密度(ppi)で比較します。
iPhone 3GSが163ppi、iPhone 6s 326ppiです。お気づきのように、これが2倍の解像度で出力する理由です。CSSピクセルに対しデバイスピクセルが5倍のものがでてこれば、5倍のものを用意してくてはいけません。
間違っている点不足している点などがございましたら、枝によろしくお願いいたします。
iMac5K使ってるけど、PCサイトのRetina対応は、 2016年現在ほぼやってないよ。どこもボケまくり。ECサイトなんかは詳細ページとか、頑張ってるところあるけどね。やはり全対応は現実的ではないから、部分的にやっている感じ。
関連するトピックス