Q&A
この3つの情報が分かればそれなりに正確な回答を返せます。「その主張をした人はどういう意図や文脈で言ったのか？」「何故その人に意図を聞き返せないのか。」「質問者さんはディスプレイの解像度に関してどのくらい理解していますか？」
モニタの中の点の数が多くなると画質が悪化するというのがわかりませんでした。
座学で考え込むより, ペイントツールとかフォトエディタで色々画像を弄りながら(拡大したり縮小したり)やると理解しやすいですよ
回答3件
0
ベストアンサー
他の質問内容を見て質問者さんの立ち位置が何となく見えてきました。
なるべく平易な表現で解説していきますが…ちょっと分量が多くなりましたのでゆっくりお読み下さい。
retinaディスプレイのiphoneなど
これは昔話を交えながら話さないと理解出来なさそうですね。
という訳で少し長くなりますがお付き合いください。
大昔、Apple社が出したiPhone3Gというスマホにまで遡ります。
この3Gのディスプレイは解像度320480pxでした。
つまり3.5インチの液晶ディスプレイに320480のドットが等間隔で配置してあったんですね。
その後Apple社はiPhone4を発売します。
これの液晶部分はサイズは同じく3.5インチですが、
解像度が320480pxではなく2倍2倍の640*960pxといきなり凄い進化を遂げています。
要するに、液晶ディスプレイのサイズこそ同じですが、
ファミコン時代のガビガビキャラクターがいきなりDSのような綺麗な画質で見れるようになりました。
これが大前提。
次にWebサイトを表示した時の見え方を解説しましょう。
3Gスマホはディスプレイのサイズも解像度も超しょぼい製品でした。
これで普通にWebページを閲覧すると酷いレイアウトでみえたものではありません。
そこで、各Webサイトを作る人は文字や画像を削って320*480pxのサイズで無理せず閲覧出来るページを作りました。
所謂スマホページとかスマホ対応、レスポンシブWebサイトと言われるような対応です。
しかし、iPhone4の登場で怪しくなってきます。
3.5インチなのに画素がめっちゃきめ細かいのです。
そのまま320*480pxのサイトを閲覧すると、文字も画像も全部1/4のサイズです。
これはもう閲覧どころの騒ぎではなく、スマホと一緒に虫眼鏡も必要になってしまいます。
そこで、iPhone4はブラウザに宣言するディスプレイのサイズを「320480px」と宣言したのです。
そして実際のディスプレイサイズは「640960px」なので、320*480pxで送られてきた文字や画像を4倍に引き伸ばして画面に表示するという仕組みを構築しました。
この辺の考え方は「HTML5 viewport」等で検索してみてください。
さて、この前提を元にようやく「画像がぼやけやすい」の真意に迫れます。
iPhone3Gの時代は横幅320pxだったので、
Webサイトを用意する人は最大横幅320pxの画像を用意してサイトに当てはめていました。
iPhone4は横幅320pxを自称していますが、こいつ640pxです。
320pxの画像を渡すと、勝手に2倍に引き伸ばしてまるでモザイクのようなガバガバな画像にして画面に表示してしまうのです。
まぁでも同じ3.5インチだし？画像自体は対して変わらないでしょ？
全然違うんです。
フォントはベクター画像なのでいくら引き伸ばしても劣化しないんです。
画像はラスター画像なので勝手に引き伸ばされるとガビガビになるんです。
つまりどういう事になるかと言えば、
文字は地デジのテロップのようにくっきり表示で超綺麗だけど、奥の映像がほぼモザイク。
うーん……両方ぼやけてるならまだしも、画像だけ品質悪いと目立ちますね。
でもiPhone4は賢かったのです。
横幅640pxの画像を渡してやればそのサイズをベースに画面に表示してくれます。
iPhone3GやAndroidでも横幅640pxの画像を勝手に自分のブラウザで読める範囲に縮小してくれますので、
読み込みが多少遅くなる以外のデメリットはありません。
画像のサイズの主流は横幅320pxから640pxに変化していくことになりました。
iPhone4の発売に伴い、綺麗な液晶ディスプレイにRetinaと名付けて華々しくデビューしました。
Android端末は追従出来ず横幅400pxだったりとしょぼい状態が続きましたが、
他社製品のスマホも少しずつ品質を高め、今ではちょっと高価なスマホを購入すればどれもFullHD(1080*1920px)です。
つまり、今は全てのスマホがRetinaクラスの綺麗さであり、
同じような機能を使っているのでiPhoneだけが該当する訳ではありません。
品質が求められる画像をWebサイトに掲載する時は、画面の横幅が640〜1280pxくらいと想定するようにしてください。
投稿2018/04/05 04:53
編集2018/04/05 09:15総合スコア21158
回答欄では画像≒ラスターと言いましたが、
PNG、JPEG、GIFといったWebでよく使われる画像はラスターです。
SVGを代表する幾つかの画像はベクター画像なので、素材サイト等でSVGを配布している場合はフォントと同じくいくら引き伸ばしてもボケません。
SVGが昔は対応ブラウザが少なく、作るのも大変と敬遠されていたのですが、
アイコンやスタンプ等の用途として採用されるケースが少しずつ出てきました。
イラストテイストの画像にも使えますので検討してみてくださいね。
大変遅くなってしまいすみません。
詳細にご解説くださり誠にありがとうございます。
いろいろ調べながら読み返したりしていたのですがぼやける原因がよくわかりません。。
＞そのまま320*480pxのサイトを閲覧すると、文字も画像も全部1/4のサイズ
iPhone4の解像度の横が640pxだとすると原則通りで考えると320*480pxのサイトを閲覧したときにはすべて1/2のサイズで表示されるのでは？と思ったのですが。
合っているのかわからないのですが、
320px幅の画像をRetina端末（iphone4等）に渡す→Retinaは解像度が幅640なので液晶画面の幅の半分の大きさで表示されるはずだが、iphoneの機能？により640pxであるかのように解釈して倍サイズで引き伸ばす→ラスタ画像だから引き伸ばすと画像はぼやける
・・ということでしょうか？
＞320pxの画像を渡すと、勝手に2倍に引き伸ばしてまるでモザイクのようなガバガバな画像にして画面に表示してしまう
ラスタ画像は点として扱うデータのことだと思っているのですが、引き伸ばすとどうしてぼやけるのでしょうか。
そのままのサイズで表示してもも引き伸ばしても画像内の点の数が同じだと思うので不思議でした。高機能端末のときに逆にぼやける原因はここにあるのでしょうか。
> 1/2のサイズで表示されるのでは？
縦2倍、横2倍で面積は4倍です。
斜めで考えれば√2の1.4倍程度なので体感で言えばそちらに近いかもしれませんね。
> 引き伸ばすとどうしてぼやけるのでしょうか。
実際にやってみれば分かります。
このページの私のアイコンをスクショで保存して、画像編集ソフトで縦横400%くらいまで引き伸ばしてみて下さい。
オリジナルの画像の画像幅を拡大した場合、
ドットを等間隔で敷き詰めたらスカスカになります。
じゃあそのスカスカした場所に何を敷き詰めれば良いでしょうか？
パソコンが機械計算でただ違和感のない色を持ってきて混ぜ合わせただけです。
本来そこにある線という概念は消え失せ、なんとなく塗りつぶしたような感じの拡大のされ方をすることでしょう。
もちろん、元が3GSの3.5インチで見れる画像なので、
3GSと4を横に並べて同じ画像を閲覧した時の見え方は全く同じです。
でも、その周りにあるWebサイトの文字の存在が厄介なのです。
見ないと分からないと思うのでこのサイトみてください。
http://kazpod.com/493/
めっちゃ文字綺麗になりましたよね、縦横2倍*2倍の結果がこれです。
Retinaに画像だけ左のモノを持ってきたらどう思いますか？
流石にどんなに鈍感な奴でも画像の斜めラインや画像に埋め込んだ文字を読めば気付きます。
そういう文字と比較した時の相対的な感覚でボヤケているという印象を読み手に与えます。
コメントありがとうございます。
すみません、縦2倍✕横2倍で4分の1でした。
ありがとうございます。
自分なりに思考を整理してみたのですが（説明がわかりにくかったらすみません）、解像度の幅320ピクセルのandroid端末で幅320の画像を表示した場合、液晶画面全体に表示されるはずですよね。
一方でRetinaのiphone4（解像度640ピクセル）で上と同じ幅320の画像を表示した場合、原則通りなら液晶の幅の半分の大きさで表示されるはずですが、iphoneの機能によって上の320ピクセルのandroidと同じように画面全部で表示されるんですよね？そしてそのときに必然的に画像の引き伸ばしが発生するわけですよね。
私はそのときiphone4の画像はandroidよりもぼやけるのかと思っていたのですが、それは間違いでどちらも同じ画質で表示され、ただiphone4はretinaだから他の文字や画像等と比較されて相対的にぼやけているように見えるという意味だったのでしょうか。
事の発端は知人から解像度の話を聞いていた時にiphoneでは画像がぼやけるとかぼやけやすいという話を聞いたことが始まりだったのですが、本当にぼやけているわけではない（昔のRetinaではない低解像度端末と同じ画質で表示される）という意味だったのでしょうか。
> という意味だったのでしょうか。
私はその人じゃないので、流石に真意を全て汲み取る事は出来ません。
ですので、私の知っている内容からある程度絞り込んで（恐らくこうだろう）と判断して回答しています。
実際にあるのは相対的なボヤけです。
絶対的に画像を勝手にボヤケさせて何の意味があるかと聞かれると無いでしょうしね。
また、iPhoneが画像の拡大処理がバカという話は聞いた事がありません、iPhoneのバージョンによってカメラの性能が良くなったり悪くなったりしているようですが、Webサイトで使う画像は関係ありませんからね。
この辺の事情からiPhone3GSとiPhone4の画素数の違いにより生じる事情を回答欄に書いています。
やっと長年というかここ数ヶ月ずっともやもやしていた疑問が晴れました。
大変詳細にご説明くださり誠にありがとうございました。
0
「低解像度の画像」を「高解像度のスクリーン」に表示しようとした場合, 画像のピクセル数がスクリーンのピクセル数に満たないことがあり, ソフトウェア側でその足りない部分を補間する必要があります.
その際の補間手段が「画像をぼかしてむりくり解像度を合わせる」（アンチエイリアス手法）だった場合に, 画質が劣化します.
投稿2018/04/05 04:36
総合スコア4756
0
スマホでは、ディスプレイの解像度が上がったからといって表示されるものが小さく表示されてしまう、というのはなかなか許してくれません。
そんでどうするかと言うと、表示する画像なり文字なりをその解像度に拡大して表示するようになります
そーすると、解像度上がってるのにボケて見えるなあ、ということになったりしますね
（別質問と同回答）
投稿2018/04/05 04:27
総合スコア87774
あなたの回答
tips
プレビュー
