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

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

ただいまの
回答率

87.51%

画像がガビガビ(粗い)になってしまう件

解決済

回答 3

投稿

  • 評価
  • クリップ 4
  • VIEW 15K+

score 7

前提・実現したいこと

お世話になります。
当方、あるサイトの作成を受注しており、コーディングした後、先方にテストサーバーにアップしたものを確認してもらったのですが、表題の通り画像がガビガビ(角が粗くなる)に表示されてしまうようです。
私のPC(mac),iPhone、オフィスにある別のPC(windows)ではそんなことはなく綺麗に表示されるのですが。。

使用した画像はデザイナーさんから頂いたもので、png形式です。

先方のPCで使用しているブラウザに原因があるのでは、と考えましたが、先方は最新のIEとgoogle chromeを使用しているそうです。

画像の圧縮なども行いましたが、当該サイトを先方がスクショしたものを見たところ確かにガビガビでした。

私はillustoratorやphotoshopを普段使わず、画像についてはあまり明るくないのですが、考えられる原因として何があるか教えて頂けますでしょうか?

これだけの情報では何もわからないと言われてしまいそうで、申し訳ありませんが、クライアントとの関係上、当該画像をお見せすることは難しいです。

何卒よろしくお願いいたします。

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • SurferOnWww

    2017/11/04 23:05

    補間の問題ですか?

    キャンセル

  • defghi1977

    2017/11/04 23:29

    質問の記述が曖昧です. 「ガビガビ」などと言った主観的な言葉やあなたの立場と言った間接的な記述を避け, 問題に直接関わる事象(より具体的な画像の崩れ方, 発生した環境, それに対して調査した内容等)を箇条書きで良いですから整理して下さい. それはそれとしてもしかしてズーム?

    キャンセル

  • basement

    2017/11/05 22:22

    SurferOnWww様 補間という単語自体はじめて聞いたものですから、調べてみたのですが補間することで画質が変わることがあるのでしょうか?

    キャンセル

  • basement

    2017/11/05 22:27

    defghi1977様 大変失礼いたしました。具体的には、丸みを帯びた部分が四角くカクカクしている感じです。知識不足ですみませんが、例えば元の画像が1500px × 300pxのものをcssでwidth , height 指定をして、500px × 100pxで表示させることはズームになりますか?

    キャンセル

回答 3

checkベストアンサー

+3

先方のPCが高解像度(Retinaディスプレイなど)で、画像の改造度が足りないので荒く見えるのではないでしょうか。
http://kray.jp/blog/retina-web/

iPhoneなども同じく高解像度(pixelRatio=2以上)ですが、スマートフォンはいい感じにぼかしてくれるので、荒いのが目立たないだけとか...

あとは、transform系のスタイルシートで拡大縮小、回転をすると荒くなりことがあります。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/11/05 22:35

    ikuzou様 ご回答ありがとうございます!

    付記しておくべきでしたが、私のPCはRetinaディスプレイです。高解像度では画質が乱れず、非高解像度では乱れるってことあるんですかね?また、先方のPCが高解像度かどうかは知らないので聞いてみます。

    tranform系は使用していませんが、例えば元の画像が1500px × 300pxのものをcssでwidth , height 指定をして、500px × 100pxで表示させると画像が粗くことってあるんでしょうか?

    キャンセル

  • 2017/11/05 23:31

    縮小の場合でもガビガビになることがあります。

    拡大・縮小をどのような方法で行うかを指定するスタイルシートのプロパティがあります。
    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) にした方が、違和感が少ないかな、と思います。

    キャンセル

  • この投稿は削除されました

  • 2017/11/06 16:10

    ikuzou様

    大変参考になります。ありがとうございます!
    挙げていただいた対応策を試してみます。

    キャンセル

+1

補間することで画質が変わることがあるのでしょうか? 

補間の方法によっては以下の記事の画像に示ように違いが出ます。

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/06 16:10

    SurferOnWww様

    ありがとうございます!参考にさせていただきます。

    キャンセル

+1

アルゴリズムにもよりますが, 大きな画像を縮小(特に整数分の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/06 16:09 編集

    defghi1977様

    勉強になりました。ありがとうございます!
    SVGは画像的に難しいので、picture要素・srcset属性でいけるかやってみたいと思います。

    キャンセル

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

  • ただいまの回答率 87.51%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る