Q&A
補間の問題ですか？
###前提・実現したいこと
お世話になります。
当方、あるサイトの作成を受注しており、コーディングした後、先方にテストサーバーにアップしたものを確認してもらったのですが、表題の通り画像がガビガビ(角が粗くなる)に表示されてしまうようです。
私のPC(mac),iPhone、オフィスにある別のPC(windows)ではそんなことはなく綺麗に表示されるのですが。。
使用した画像はデザイナーさんから頂いたもので、png形式です。
先方のPCで使用しているブラウザに原因があるのでは、と考えましたが、先方は最新のIEとgoogle chromeを使用しているそうです。
画像の圧縮なども行いましたが、当該サイトを先方がスクショしたものを見たところ確かにガビガビでした。
私はillustoratorやphotoshopを普段使わず、画像についてはあまり明るくないのですが、考えられる原因として何があるか教えて頂けますでしょうか？
これだけの情報では何もわからないと言われてしまいそうで、申し訳ありませんが、クライアントとの関係上、当該画像をお見せすることは難しいです。
何卒よろしくお願いいたします。
質問の記述が曖昧です. 「ガビガビ」などと言った主観的な言葉やあなたの立場と言った間接的な記述を避け, 問題に直接関わる事象(より具体的な画像の崩れ方, 発生した環境, それに対して調査した内容等)を箇条書きで良いですから整理して下さい. それはそれとしてもしかしてズーム？
SurferOnWww様 補間という単語自体はじめて聞いたものですから、調べてみたのですが補間することで画質が変わることがあるのでしょうか？
defghi1977様 大変失礼いたしました。具体的には、丸みを帯びた部分が四角くカクカクしている感じです。知識不足ですみませんが、例えば元の画像が1500px × 300pxのものをcssでwidth , height 指定をして、500px × 100pxで表示させることはズームになりますか？
回答3件
0
ベストアンサー
先方のPCが高解像度(Retinaディスプレイなど)で、画像の改造度が足りないので荒く見えるのではないでしょうか。
http://kray.jp/blog/retina-web/
iPhoneなども同じく高解像度(pixelRatio=2以上)ですが、スマートフォンはいい感じにぼかしてくれるので、荒いのが目立たないだけとか...
あとは、transform系のスタイルシートで拡大縮小、回転をすると荒くなりことがあります。
投稿2017/11/05 02:36
総合スコア20
ikuzou様 ご回答ありがとうございます！
付記しておくべきでしたが、私のPCはRetinaディスプレイです。高解像度では画質が乱れず、非高解像度では乱れるってことあるんですかね？また、先方のPCが高解像度かどうかは知らないので聞いてみます。
tranform系は使用していませんが、例えば元の画像が1500px × 300pxのものをcssでwidth , height 指定をして、500px × 100pxで表示させると画像が粗くことってあるんでしょうか？
縮小の場合でもガビガビになることがあります。
拡大・縮小をどのような方法で行うかを指定するスタイルシートのプロパティがあります。
image-rendering: crisp-edges; を指定してみるといいかもしれません。
→ https://developer.mozilla.org/ja/docs/Web/CSS/image-rendering
逆にドット絵をはっきりとした表示（ガビガビ）にする場合の例ですが、参考になります
→ http://memo.sdn-project.net/post/113148316679/pixelated
> 元の画像が1500px × 300px
また、拡大縮小に関わるレンダリングエンジンの特性について詳しいわけではないのですが、
より大きい倍率で拡大/縮小を行う際に、よりぼやけたりガビガビになったりしやすいため、
x3ではなく、x2程度（1000*200px) にした方が、違和感が少ないかな、と思います。
ikuzou様
大変参考になります。ありがとうございます！
挙げていただいた対応策を試してみます。
0
アルゴリズムにもよりますが, 大きな画像を縮小(特に整数分の1)表示する場合, 画像の詳細データが欠落することで極端に画像の品質が劣化することはありえます.
この問題はOSやブラウザと言った環境に依存する部分が大きいため気が付きにくいかもしれません. (とりわけSafari等のWebkit系ブラウザでは発現しにくいことから見落としがちです.)
参考)
https://stackoverflow.com/questions/18922880/html5-canvas-resize-downscale-image-high-quality
上記はHTML5のcanvas要素における事象ですが, 似たような現象が発生しているものと思われます.
例えば元の画像が1500px × 300pxのものをcssでwidth , height 指定をして、500px × 100pxで表示させると画像が粗くことってあるんでしょうか？
まさにこの条件(ちょうど3分の1表示)に当てはまっているものと考えられます.
さて対処策としては次の方法が考えられます.
- SVGを用いる
SVG（ベクタグラフィック）を用いるとスクリーン環境毎に最適な出力結果が得られます. が, 画像の内容によってはベクタ化が難しいことがあります.
- メディアクエリ/
picture要素/srcset属性を用いて読み込む画像を切り替える
何れも環境毎に異なるスクリーン解像度(1px毎の画素密度)に応じ, 最適なサイズの画像を読み込むための仕組みです. 前もってきれいに縮小済みの画像を用意しておく必要があります.
投稿2017/11/05 17:56
総合スコア4756
defghi1977様
勉強になりました。ありがとうございます！
SVGは画像的に難しいので、picture要素・srcset属性でいけるかやってみたいと思います。
0
補間することで画質が変わることがあるのでしょうか？
補間の方法によっては以下の記事の画像に示ように違いが出ます。
http://surferonwww.info/Hobby/Computer/PcPage16.aspx
ブラウザによっては、大きな画像を width, height を指定して縮小すると、その記事の Default のように表示されるものもあります。
先方は最新のIEとgoogle chromeを使用しているそうです。
とのことですので違うかもしれませんが、以下の記事の「改善前」のようになるブラウザもありました。
http://surferonwww.info/BlogEngine2/post/2010/07/24/Image-Quality-Improvement.aspx
ご参考まで。
【追伸】
上に紹介した記事の「改善前」は最新のブラウザで見ると「改善後」より良く見えることがありますので注意してください。
投稿2017/11/05 14:50
編集2017/11/05 15:07退会済みユーザー
総合スコア0
あなたの回答
tips
プレビュー
