画質を綺麗にするには？

Question

前提・実現したいこと

ここに質問の内容を詳しく書いてください。
今、htmlやcssを用いてWebデザインを行なっていたのですが、画像を配置する際、どうしても荒くなってしまいます。
他のホームページを見ていると画質がとても綺麗なのはなぜでしょうか？

発生している問題・エラーメッセージ

保存した状態よりも汚くなってしまう。

##エラーメッセージ
.header-bg-img {
background-image: url(../img/photo-1437419764061-2473afe69fc2.jpeg);
position:relative;
background-size: cover;
background-position: center center;
clip-path: polygon(0px 0px, 100% 0px, 100% 80%, 70% 100%, 0px 80%);
}

該当のソースコード

html, css

試したこと

background-sizeなどを用いて、画像を綺麗に配置はできている。
画質の問題。
ここに問題に対して試したことを記載してください。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Comments

[yoshinavi]

単純に、ソース画像の大きさがデバイスに比べて不足しているのでは？

[Matsunosuke]

アドバイスありがとうございました。
おかげで解決できました。

[yoshinavi]

原因は何だったのでしょうか？
同様の問題で悩んでいる人達へ、解決となるヒントになりますので、出来るだけ「原因」「解決策」を回答されると良いかと思います。

[Matsunosuke]

画像を表示する時に、ダウンロードせずにそのままデスクトップなどに移行していたので、ダウンロードするようにすると綺麗になりました。

[yoshinavi]

どういうことですか？回答の方法とは違うのでしょうか？

[Matsunosuke]

単純に画像をダウンロードしていなかったので、汚かったと思います。
yoshinaviさんがそれを言いたかったのならば、自分の勉強不足で、申し訳ないです。

Answer 1

考えられる原因をいくつか挙げてみます。
・画像を書き出す際のjpeg圧縮率が高い（画質が落ちる）
・画像サイズと配置時の画像サイズが異なる（拡大や縮小されると輪郭がぼやける場合がある）
・何か編集用のソフトウェアを使っている？（ソフトによっては、編集の際の表示を早くするため、解像度を落とした「アタリ画像」が一時的に作成される場合がある

また、画像によってはjpeg形式よりもpngやsvgで保存した方が綺麗に表示できる場合があります。
もう迷わない！JPEG,PNG,GIF,SVG,ESPの違い
ウェブ画像はPNG？ JPEG？ 新人Web担当者に伝えておきたい使い分けの基本

Comments

[Matsunosuke]

アドバイスありがとうございました！
おかげさまで改善できました。