レスポンシブデザインの際の、横幅パーセント指定の場合の画像は荒くなるか？

Question

レスポンシブデザインで画像を配置する際、
横幅をパーセント指定した場合、
機種によっては画像サイズのピクセルが小数点となる場合があるかと思います。
例：width: 320.12px

##やりたい事
スマホで画像を綺麗に見せたい

##聞きたい事
・仮に画像が小数点となったとしても、
正方形なら問題ないか？

・長方形の場合、縦横比が崩れるため、
画像がぼやけてしまうか？

・俺ならいつもこんな感じで指定してるよ的なアドバイス

ご存知の方、アドバイスお願い致します。

Answer 1

widthの％指定だけならheightを固定してない限り縦横比は変わらないかと

Comments

[Tatsurou]

縦横比が小数点になっている以上、割り切れない場合縦横比は微妙に変わる気がしますが、それでも画像は綺麗に表示されますでしょうか？

[sousuke]

綺麗にというのは主観的なものなのですがなんともいえませんが
もともとpxという単位は1pxが最小単位なので「小数点のpx」というのは表示不可能だと思います。
pxという小数点に入った場合ブラウザごとの挙動で単位は丸められていると聞いています。
私は気にしていません。高さが奇数pxの画像を横幅50％で表示するだけで既に丸めが発生すると
思います。縦横比以前に小数点はそこそこ出現しているはずです。気にしてもしょうがないかと…

[Tatsurou]

chromeで検証すると、小数点になっていたりすることもあるので、恐らく、その分、縦横比がずれ、画像が少し荒くなってしまうのです。
調べたら、やはり割り切れない幅の場合、荒くなるようです。

参考記事
http://www.omohayui.com/entry/2017/08/20/180653

[Tatsurou]

ご回答頂きありがとうございます。例えば、「iPhone7だけ綺麗に見えたら良い」といった対応が望ましいかなと思いました。つまり、レスポンシブでも、画像サイズがiPhone7の場合、小数点にならないようなcssを書くなど。そのほかの端末は、750px以上は左右の余白をもうける。750px以下は、諦める。このような対策でいこうかと思いますが、どう思われますか？

[sousuke]

引き伸ばしたりせずに余白を設ける方法はいいかと思います。

[Tatsurou]

ご回答いただきありがとうございます！
余白を設けるといった対応で、あまりリキッドなデザインにしないようにしてみます。

Answer 2

レスポンシブ対応の時点で、端末により小数点になるのはあると思いますし、「sousuke」さんへの質問内にある参考記事（リンク）の内容だけ見ると不安になると思います。

個人的な見解ですが、あくまでも厳密に言えばの範囲であり、閲覧者のディスプレイの性能や汚れ等を考慮すると、気にしてもしょうがないと「sousuke」さんと同じ回答になります。

（CSSコーディングでもmargin等同じことがあります。ネガティブで対処可能ですが･･･）

度合いにもよりますが、軽量化の為に圧縮掛ける場合も、これ以上に荒く（劣化）なるので、どこで「良し」とするかだと思います。

Comments

[Tatsurou]

ご回答頂きありがとうございます。例えば、「iPhone7だけ綺麗に見えたら良い」といった対応が望ましいかなと思いました。つまり、レスポンシブでも、画像サイズがiPhone7の場合、小数点にならないようなcssを書くなど。そのほかの端末は、750px以上は左右の余白をもうける。750px以下は、諦める。このような対策でいこうかと思いますが、どう思われますか？

[yoshinavi]

対象が明確になっているのであれば問題ないと思います。「iPhone7」以外でも画面サイズで小数点が出る場合が必ずしもある訳ではないので、「iPhone7」以外の対応設定も特にしなくても良いと思います。

個人的には「WataruT」さんの細かい部分への配慮が、サイト全体でコーディングのみならず、SEO・UI/UX等が良い方に『確実に』向かうと思いますので、大変でしょうが頑張ってください。
(^^)

[Tatsurou]

ご回答いただきありがとうございます！
頑張っていきます(*'-'*)

Answer 3

そもそも画像をpng,svgなど拡大縮小の影響を受けにくい（または受けない）
拡張子で扱うという手もあるかと思います。
（jpgしか無理というならスルーしてください）