-
ID:lqAG7i さんの質問

新人コーダーです。
初歩的な質問かもしれませんが、よろしくお願いいたします。

スマホサイトやレスポンシブサイトでは高解像度のスマホ対応のために、
画像サイズを2倍や3倍で書き出すかと思うのですが、
パソコン用のサイトでも、4Kディスプレイや5KのiMAC対応の場合も同様に、
画像サイズを大きいサイズで書きださなければ画像がボヤけて表示されるのでしょうか。
レスポンシブサイト用の記事や書籍はよく見かけるのですが、
どれもスマホ対応用の記事が多く、4Kや5Kのディスプレイのことは見つけることができませんでいた。
スマホとパソコンではそもそも対応方法が違いうのでしょうか。
何卒、よろしくお願いいたします。

みんなの回答 4 件

ID:QhVQZ5 さんの回答

それだと高解像度じゃない端末でも読み込みが重くなるな?

ID:lqAG7i

仰るとおり読み込みは重くなるかと思います。
なにか良い方法があるのでしょうか。
もしくは4Kや5Kの対応はしないものなのでしょうか。

ID:uq/KKn

javascriptでユーザーの解像度取得してから画像を選択して読むのが一番簡単。SEO的な評価を考えるなら初期に低解像度画像+altで用意してonloadで適切な画像を表示させる。

ID:W2Od1V

解像度取得してどうする。

ID:ZQZZEu

どうするんだろうね。

ID:r6Yh21 さんの回答

ランサーズでバカディレクターがRetinaでぼやけるから画像サイズ2倍で作れとかいちばん最後の最後で言ってきたことがあったな

ID:lqAG7i

私の場合は特に指示されたとかではないのですが、
レスポンシブサイトをコーディング中に、ふと高解像度のPCモニタの場合どうすればいいのか気になったので質問させて頂きました。

ID:W.qaPc

そんなん追加要件として受け止めればいいだろ。

ID:Dd1ool さんの回答

結論はスマホであろうとパソコンであろうと同様です。

よくある疑問ですが、難しい質問だと思います。簡単に説明します。画像を縦横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倍のものを用意してくてはいけません。

間違っている点不足している点などがございましたら、枝によろしくお願いいたします。

ID:Dd1ool

補足:デバイスによって読み込ませる画像を変更したい場合は、ウィンドウサイズ(CSSピクセル)によって読み込ませる画像を変更すればいいです。HTMLならsrcset属性で、CSSであればdevice-pixel-ratioで指定してあげればいいです。

ID:lqAG7i

回答ありがとうございます。

詳しい解説ありがとうございます。
スマホでもパソコンでも同様なのですね。
これまでパソコンサイトでは特に気にせずにコーディングしていたので、
考える必要がありそうですね。
srcset属性に関しては、未来の技術だと思っていましたが、
IEを気にしなければ使用できそうなんですね。

ID:Dd1ool

「画面密度(ppi)で比較します。」と書きましたが、失礼いたしました。こちらは間違いのようです。wikiにイコールにならない端末などもちらほら見つかりました。javascriptの「window.devicePixelRatio」で実機計測するのが一番確かかもしれません。srcsetに関しては、Microsoft Edgeが対応しているのでそのうち対応することでしょう。

ID:lqAG7i

回答ありがとうございます。
>javascriptの「window.devicePixelRatio」で実機計測
javascriptを使うのは少し大げさかに感じてしまうので、
srcsetが普及するまではひとまず対応せずに進めようと思います。
大変勉強になりました!

ID:ELcUP6 さんの回答

iMac5K使ってるけど、PCサイトのRetina対応は、 2016年現在ほぼやってないよ。どこもボケまくり。ECサイトなんかは詳細ページとか、頑張ってるところあるけどね。やはり全対応は現実的ではないから、部分的にやっている感じ。

ID:lqAG7i

回答ありがとうございます。
>PCサイトのRetina対応は、 2016年現在ほぼやってないよ。
貴重な情報ありがとうございます。
どこもボケまくりだと、見ていてつらいですか?

ID:ELcUP6

確かにボケてるけど全く問題ないレベル。ただ高精細じゃないだけよ。

ID:lqAG7i

再度回答ありがとうございます。
>確かにボケてるけど全く問題ないレベル
ありがとうございます。ちょうど「iMac5K」の購入も考えていたので、
製作者側としても利用者側としても安心できました。

最終更新日:2016-01-06 (6,647 views)

関連するトピックス

ページ上部に戻る