画像いっぱいに広げた際の画質

Question

画像を広げる際についてご質問です。

下記のコードのように画像を広げています。

  <div class="main-top">
    <div class="main-image">
      <div class="main-font">
        <h2 class="f2">hiiro</h2>
      </div>
    </div>
  </div>

.main-top{
  position: relative;
  top: 80px;
  height: 640px;
}

.main-image{
  height: 100%;
  background: url(https://model.foto.ne.jp/free/img/images_big/m020006.jpg);
  background-size: cover;
}

.main-font{
  display: inline-block;
  position: relative;
  top: 60%;
  left: 44%;
  font-family: '游ゴシック';
  opacity: 0.8;
}
.f2{
  text-align: center;
  font-size: 70px;
  line-height: 70px;
}

そして表示されている画像は以下の通り。

画面いっぱいに表示されていますが、画質がちょっと荒くなっている気がします。

background-size: cover;を設定しているので、拡大されて広がるのは分かりますが、少し画質が良くなる方法はありますでしょうか？

一度、background: url(https://model.foto.ne.jp/free/img/images_big/m020006.jpg);に設定せず、HTMLで<img class="main-image" src="https://model.foto.ne.jp/free/img/images_big/m020006.jpg">と設定して、実行しました。

そしてwidth：100%として、広げましたが画像が綺麗に収まることはありませんでした。

色々調べましたが、画像をいっぱいに広げるには、background-size: cover;を使うと書かれていて、画質を綺麗にするものは見当たりません。
やはり、background-size: cover;を設定する必要があるのでしょうか？

Answer 1

提示された画像は横幅420pxなので、もっと大きなサイズの画像を使用しましょう。

Comments

[hiiro46]

ということは、画像選びからということでしょうか？

[kei344]

そうなりますね。表示されるエリアより小さな画像を使うと引き伸ばすことになるため、表示エリアより大きい画像を用意しないと「ちょっと荒く」なります。

[dit.]

画像サイズの話になったのでこちらにコメントで失礼します。

https://model.foto.ne.jp/agreement.html　利用規約の中に「写真素材へ直接リンクを貼る行為を禁じます。」という文がありますので、ダウンロードした素材を使うべきです。
各写真素材に高解像度版のダウンロードリンクがありますでそちらをダウンロードし、使用してください。
ちなみに提示の素材を探したところ「JPEG 3872×2592ピクセル RGB 350dpi」の画像をダウンロードできることを確認済みです。

[hiiro46]

皆さん、ありがとうございます。

画像の利用についても、教えていただきありがとうございました。