トップページの商品画像が粗く表示されてしまいます

[heptones]

アップロードしてある商品画像サイズは4000x4000pxと大きいのですが、

トップページに表示される商品画像の画質はなんだか粗く、

自動でリサイズされた小さい画像が表示されているようなのです。

トップページの幅は1200pxで、商品は、PC・スマホとも横並びにせず、１商品ずつ縦に並べています。画像の表示エリアは1100pxです。

chromeのデベロッパーツール＞ソース＞ページタブにある画像をみると、

〜&width=533、〜&width=720の２種類だけあります。

そのどちらかを1100pxの画像エリアに引き伸ばして表示しているようです。

自動生成されるなら、1000px前後の画像が使用されるはずかと思いますが、（Retinaなら2000px？）

どういうことなのでしょうか？

[株式会社フルバランス]

Heptonesさま

はじめまして、フルバランスの園畑です。

ご質問を確認いたしました。

shopifyでは、基本的に画像は画面横幅に沿った形で表示されるようテーマのコードにより設定されています。

おそらく使用されているテーマのセクションでは最大でも720pxで表示されることを想定した作りになっているため画像が荒く見えているのかと存じますが、コードを修正することで、出力サイズを変更することが可能です。

イメージ的には下記のようなコードがセクション内にあるかと思います。

{% if image.width >= 533 %}{{ image | image_url: width: 533 }} 533w,{% endif %}
{% if image.width >= 720 %}{{ image | image_url: width: 720 }} 720w,{% endif %}

1200pxでも荒くならないようにするためには上記のコードに以下を追加すれば良いかと存じますが、出力方法はテーマにより異なりますので、ご参考までにしていただけますと幸いです。

{% if image.width >= 1200 %}{{ image | image_url: width: 1200 }} 1200w,{% endif %}

(参考)画像サイズ変更について：https://ec-penguin.com/blogs/shopify/modify-img-url-size-liquid

私たちの励みにもなりますので、
お役に立てていればBest Answerボタンを押して頂ければ嬉しいです。

分からない点があれば、またいつでもご連絡ください。

フルバランス　園畑

[heptones]

フルバランス　園畑様

はじめまして。お返事が遅くなり大変申し訳ありませんでした。

早々にご回答いただき、誠にありがとうございます。

また、参考サイトなどもご紹介いただき大変助かります。

ご教示いただいた箇所を探してみたところ、

card-product.liquid　に、

最大で165〜1066pxまでの画像が、srcsetにすでにセットされていました。↓

<img
srcset="
{%- if card_product.featured_media.width >= 165 -%}{{ card_product.featured_media | image_url: width: 165 }} 165w,{%- endif -%}
{%- if card_product.featured_media.width >= 360 -%}{{ card_product.featured_media | image_url: width: 360 }} 360w,{%- endif -%}
{%- if card_product.featured_media.width >= 533 -%}{{ card_product.featured_media | image_url: width: 533 }} 533w,{%- endif -%}
{%- if card_product.featured_media.width >= 720 -%}{{ card_product.featured_media | image_url: width: 720 }} 720w,{%- endif -%}
{%- if card_product.featured_media.width >= 940 -%}{{ card_product.featured_media | image_url: width: 940 }} 940w,{%- endif -%}
{%- if card_product.featured_media.width >= 1066 -%}{{ card_product.featured_media | image_url: width: 1066 }} 1066w,{%- endif -%}
{{ card_product.featured_media | image_url }} {{ card_product.featured_media.width }}w
"
src="{{ card_product.featured_media | image_url: width: 533 }}"
sizes="(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 130 | divided_by: 4 }}px, (min-width: 990px) calc((100vw - 130px) / 4), (min-width: 750px) calc((100vw - 120px) / 3), calc((100vw - 35px) / 2)"

下から３行目 [sizes= 〜] の部分ですが、htmlに書き出されたものを見ますと、

sizes="
(min-width: 1200px) 267px, <!--　← 1200以上の画面で　267pxのサイズ？？-->
(min-width: 990px) calc((100vw - 130px) / 4),
(min-width: 750px) calc((100vw - 120px) / 3),
calc((100vw - 35px) / 2)"

となっていて、画面が大きくなるほど画像が小さくなる（？）設定のようです。

そこで試しに、「sizes=」の行をコメントアウトしてみたところ、

大きい画像が読み込まれて、意図した通り、きれいな画像になりました。

「sizes=」の部分の記述がなんか変？のように思いますが、どう記述すればよいかわからないのでひとまず、コメントアウトすることで対処しています。

知識不足で、認識が間違っているかもしれません。

もし問題点などありましたら、ご教示いただければ幸いです。