質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

1回答

1456閲覧

レティナディスプレイ対応について

退会済みユーザー

退会済みユーザー

総合スコア0

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2016/12/08 08:00

レティナディスプレイ対応について


2014年に発表されたiPhone 6 Plusでは、物理解像度1920×1080のディスプレイに対し、一度、論理解像度を1242×2208pxにした後に、スケールダウンさせて論理解像度414×736pxの状態で表示しているため、正確に画像を描写するためには縦横3倍で作らなければならないなど、とてもカオスな状態になっています。様々な解像度のディスプレイを搭載したAndroid端末も増え、物理値と論理値が単純に2:1というわけではなくなってきました。

上記情報より、おそらく今はまだ上記までの対応が、平均だと思いますが、
画像のサイズは、画像が%表記の場合、論理解像度736pxにPCのブラウザを縮小してインスペクタで画像の大きさを確認して、普通の画像ならその二倍、重くても画質重視なら3倍にしています。
基本的にこのやり方でいいのでしょうか?
横幅がremならすぐわかりますが%指定だと、何pxになるか実際に見ないとわかりにくくないですか?
本当はカンプ上でやるのが普通ですかね?

ただ今がレスポンス重視なので横幅を1000pxとして画像のサイズを決めるとも聞きます。
それだと736pxの2倍でも大きすぎますかね。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

一言で言えば、「正解はない」です。

「SVGにする」という選択肢を置いておいた場合、「データサイズ」「画質」「実装の手間」の3つを満足できる方法は存在しません。

  • データサイズを犠牲にする→どんな端末でもピクセル数の多い画像を送信する
  • 画質を犠牲にする→どんな端末でもピクセル数の少ない画像を送信する
  • 実装の手間をかける→複数の画像を用意して、srcset属性などを使って出し分ける

理想論を言えば、容量と画質のバランスを見て個々に判断すべきものです。

投稿2016/12/08 14:34

maisumakun

総合スコア145121

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2016/12/08 23:52

将来はsrcset属性一択になりそうですよね。 ただ工数がかかるので追加料金払える人だけですかね?
退会済みユーザー

退会済みユーザー

2016/12/08 23:59

レイヤースタイル、グラデーションなどがある、複雑なアイコンなどでもSVG化で完璧に再現できるのですか? それが一番軽くて、いい。 ただ写真は無理ですよね。
退会済みユーザー

退会済みユーザー

2016/12/09 00:00

すでに4k端末(Xperia)がでてる時点でどうなのてなりそうではあるが
退会済みユーザー

退会済みユーザー

2016/12/09 00:20

ipone6plusまでというのはすでに現場では遅れていて、3倍から4倍にするところまで来ているということですか? カンプをxperia4kのおそらく800pxくらいで作ってそれを4倍するのが理想なのですね? ただ重すぎるので実質、重要な所だけ3倍、重要でない画像は2倍くらいでしょうが。 ただ320pxの還付も作らないといけないので、複数作るのは大変すぎますね。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問