PCサイズに合わせて画像が拡大され、画質が荒くなります

[株式会社リブグラフィ]

お世話になっております。

テーマはDawn使用しています。

KV画像を設置したら、なぜか画像が拡大され画質が荒くなります。

PCの横幅に合わせて拡大されているのかと思いますが、画質が荒くさせないためにはどうすればよろしいでしょうか。

ちなみに解像度は350です

よろしくお願いいたします

[Qcoltd · Accepted solution]

@株式会社リブグラフィ 様

興味があり調査してみました。

最もおすすめなのは、Dawnのデザインに準拠し、

引き伸ばされても粗くならない大きな画像をご用意いただくことではあります。

※解像度が大きくても、縦のピクセル数と幅のピクセル数が十分大きくないと、画像が荒れてしまいます。横幅4000pxくらいの画像を用意されると大抵のモニターで綺麗に表示されるかと思います。

しかし、それが難しい事情がある場合は、

KV画像の横幅を規制するのはどうでしょうか？

下記は、KV画像を、「バナー画像」セクションを利用して設定している前提での説明になります。

(1) テーマカスタマイズ画面にアクセスし、「バナー画像」をクリック

(2) カスタムCSSを設定

カスタムCSSに設定する内容は下記です。

@media screen and (min-width: 750px) {
  .banner--large {
    max-width: 1400px;
    margin: 0 auto;
  }
}

max-widthで、画像をどこまで大きく表示するか、を制御していますので、

max-widthをお好みの数値にご調整ください。

なお、

もし、質問者様がレティナディスプレイで確認されている場合、

画像が十分に大きくても、liquidが出力する画像サイズがそれほど大きくないため、

画像が荒れて見える可能性があります。

もし、こちらが原因である場合は、対応方法を考えてみますので、お知らせください。

ご参考まで。

(キュー田辺)

[株式会社リブグラフィ]

株式会社Q様

お世話になっております。

お忙しい中ご連絡ありがとうございました。

一度上記の内容で対応させていただきます。

また何かございましたらご連絡させていただきますのでよろしくお願いいたします。