# トップページの商品画像が粗く表示されてしまいます **URL:** \ **Category:** 技術的なQ＆A\ **Created:** [November 2, 2022, 4:08pm UTC](https://community.shopify.com/t/topic/164680 "2022-11-02T16:08:22Z")\ **Posts on this page:** 3\ **Page:** 1 ## AI-generated summary トップページで4000x4000pxの商品画像をアップロードしているが、実際には粗く表示されている問題について相談。 **原因:** - Shopifyテーマのコードで画像が最大720px程度で表示される設定になっている - 1100pxの表示エリアに対して小さい画像が引き伸ばされている状態 **提案された解決策:** フルバランスの園畑氏から、Liquidコードの修正方法が提示された: - `card-product.liquid`内の画像出力サイズを変更 - 既存の`image_url: width`パラメータに1200pxなどの大きいサイズを追加 - 参考サイトも紹介された **現状:** 質問者が確認したところ、`srcset`には165〜1066pxまでの画像が設定済み。`sizes`属性の記述方法について追加の質問があり、試しに`sizes`行をコメントアウトしたところ画像が綺麗に表示されたと報告。解決に向けて対応中。
**Author:** ![heptones](https://avatars.discourse-cdn.com/v4/letter/h/a4c791/32.png) [@heptones](https://community.shopify.com/u/heptones)\ **Post date:** [November 2, 2022, 4:08pm UTC](https://community.shopify.com/t/topic/164680/1 "2022-11-02T16:08:22Z")
アップロードしてある商品画像サイズは4000x4000pxと大きいのですが、 トップページに表示される商品画像の画質はなんだか粗く、 自動でリサイズされた小さい画像が表示されているようなのです。 トップページの幅は1200pxで、商品は、PC・スマホとも横並びにせず、１商品ずつ縦に並べています。画像の表示エリアは1100pxです。 chromeのデベロッパーツール＞ソース＞ページタブにある画像をみると、 〜&width=533、〜&width=720の２種類だけあります。 そのどちらかを1100pxの画像エリアに引き伸ばして表示しているようです。 自動生成されるなら、1000px前後の画像が使用されるはずかと思いますが、（Retinaなら2000px？） どういうことなのでしょうか？ ---
**Author:** ![Anonymous\_44fbe07fc59d9ccaacd70575fd5a5155](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/anonymous_44fbe07fc59d9ccaacd70575fd5a5155/32/194200_2.png) [@Anonymous\_44fbe07fc59d9ccaacd70575fd5a5155](https://community.shopify.com/u/Anonymous_44fbe07fc59d9ccaacd70575fd5a5155)\ **Post date:** [November 4, 2022, 9:22am UTC](https://community.shopify.com/t/topic/164680/2 "2022-11-04T09:22:59Z")
Heptonesさま はじめまして、フルバランスの園畑です。 ご質問を確認いたしました。 shopifyでは、基本的に画像は画面横幅に沿った形で表示されるようテーマのコードにより設定されています。 おそらく使用されているテーマのセクションでは最大でも720pxで表示されることを想定した作りになっているため画像が荒く見えているのかと存じますが、コードを修正することで、出力サイズを変更することが可能です。 イメージ的には下記のようなコードがセクション内にあるかと思います。 ```markup {% if image.width >= 533 %}{{ image | image_url: width: 533 }} 533w,{% endif %} {% if image.width >= 720 %}{{ image | image_url: width: 720 }} 720w,{% endif %} ``` 1200pxでも荒くならないようにするためには上記のコードに以下を追加すれば良いかと存じますが、出力方法はテーマにより異なりますので、ご参考までにしていただけますと幸いです。 ```markup {% if image.width >= 1200 %}{{ image | image_url: width: 1200 }} 1200w,{% endif %} ``` (参考)画像サイズ変更について：[https://ec-penguin.com/blogs/shopify/modify-img-url-size-liquid](https://ec-penguin.com/blogs/shopify/modify-img-url-size-liquid) 私たちの励みにもなりますので、 お役に立てていればBest Answerボタンを押して頂ければ嬉しいです。 分からない点があれば、またいつでもご連絡ください。 フルバランス 園畑 ---
**Author:** ![heptones](https://avatars.discourse-cdn.com/v4/letter/h/a4c791/32.png) [@heptones](https://community.shopify.com/u/heptones)\ **Post date:** [November 8, 2022, 10:44am UTC](https://community.shopify.com/t/topic/164680/3 "2022-11-08T10:44:09Z")
フルバランス 園畑様 はじめまして。お返事が遅くなり大変申し訳ありませんでした。 早々にご回答いただき、誠にありがとうございます。 また、参考サイトなどもご紹介いただき大変助かります。 ご教示いただいた箇所を探してみたところ、 card-product.liquid に、 最大で165〜1066pxまでの画像が、srcsetにすでにセットされていました。↓ ````markup 下から３行目 [sizes= 〜] の部分ですが、htmlに書き出されたものを見ますと、 ```markup sizes=" (min-width: 1200px) 267px, (min-width: 990px) calc((100vw - 130px) / 4), (min-width: 750px) calc((100vw - 120px) / 3), calc((100vw - 35px) / 2)" ```` となっていて、画面が大きくなるほど画像が小さくなる（？）設定のようです。 そこで試しに、「sizes=」の行をコメントアウトしてみたところ、 大きい画像が読み込まれて、意図した通り、きれいな画像になりました。 「sizes=」の部分の記述がなんか変？のように思いますが、どう記述すればよいかわからないのでひとまず、コメントアウトすることで対処しています。 知識不足で、認識が間違っているかもしれません。 もし問題点などありましたら、ご教示いただければ幸いです。