質問: Webサイトのぼやけた文字の画像について質問です。 デザイン事務所にデザインをお願いしようと思い、 各社のポートフォリオを確認しています。 ところが、ほとんどのヘッダやフッタにある画像の文字がぼやけています。 # 「人力検索はてな」や「Hatena」の画像もぼやけています。 # そのようなサイトでも、画像の上にテキストを重ねている # (マウスで一文字ずつ選択できる)場合は、文字は綺麗に表示できています。 Googleのトップ画像のように画像でも、ぼやけずに表示されているものもあるので、 技術的には可能だと思いますが、何故でしょう? ポートフォリオとして掲載しているくらいなので、 そのデザイン事務所の自信作なのだと思いますが、 それでもぼやけているというのは技術が足りないのでしょうか? それとも高速化などのために仕方が無いのでしょうか? よろしくお願いします。
回答: あなたは高解像度なディスプレイを使われているのではありませんか? (Windows では HiDPI 環境... Apple デバイスでは Retina と呼ばれているものです) 高解像度ディスプレイを想定した Web ページ制作においては、画像は標準解像度版に加えて高解像度版の素材を用意しておかないと、高解像度が活かされず結果としてぼやけた印象になることがあります。 (ディスプレイが標準解像度であってもブラウザの設定で 100% ではないサイズに拡大表示している場合も同様です) 一方、標準解像度ディスプレイではぼやけません。(ある意味「全てが常にぼやけた状態」に近いので、違いを認知できません) 高解像度ではない PC 環境でも一度比較してみてください。 これに関する詳細は「srcset」でググってください。 > それでもぼやけているというのは技術が足りないのでしょうか? > それとも高速化などのために仕方が無いのでしょうか? つまり、「当該 Web サイトが高解像度ディスプレイ向けに最適化されていない」ということです。 結果的に「高速化」となる効果も0ではありませんが、意図的にそれを狙ってやることはまずないでしょう。(デザイン事務所なら尚更です) 考えようによっては「手抜き」「技術不足・知識不足 (高解像度時代への配慮が不十分である)」と捉えられなくもありませんが、この1点のみを持ってそこまで判断するは行き過ぎかと思います。 デザイン力と、Web サイトでの情報発信における配慮は必ずしもイコールではないでしょう。 特に Web ページ作成に CMS を利用している場合、その CMS が srcset に対応していなかったらいくらコンテンツ制作者が綺麗な素材を作ってもこの問題は避けようがありません。