Dawnにおける画像のぼやけについて

Topic summary

Dawnテーマのトップページで、画像バナーやスライドショー、商品画像を含む全体の画像がリサイズされてぼやける問題。画像は1800×800以上で用意してもスマホ含めて不鮮明との報告。投稿者はLiquid未経験で、指示があればコードの貼り付けは可能。

対応案として、該当セクションの画像出力(タグ)のLiquidフィルターを修正し、パイプ(|)後に「img_url: ‘master’」を指定して元解像度の画像を取得する方法が提示された。LiquidはShopifyのテンプレート言語、img_urlは出力サイズを制御するフィルターで、'master’はオリジナル解像度を指す。

この変更により高画質のまま表示できる可能性があると案内。実装は各画像を出力するテンプレート(セクション)単位で行う想定。

現時点で実施結果の報告はなく、解決済みかは不明。議論は継続中。

Summarized with AI on December 26. AI used: gpt-5.

テーマは【dawn】を使用しています。

画像バナー、スライドショー共にTOP画面で使用しています。その際、画像は1800×800で作成しているのですが、リサイズされるため、ぼやけてしまいます。上記のサイズ以上で作成してもぼやけてしまいます。スマホは別画像を表示できるようにしているのですが、同じくぼやけます。全体的に表示されている全ての画像(商品画像も)ぼやけても見えるのですが、何か対処法はございませんでしょうか?

Liquidにはshopifyではじめて触れ、今までコーディングもしたことはありません。知識も皆無ですが、指示通りの箇所にコードをコピーして入れることはできました。大変恐れ入りますが、ご助言いただけませんでしょうか?何卒よろしくお願い致します。

1 Like

質問拝見しました。

おそらくアップロードするタイミングで画像の解像度が低いため、拡大表示してぼやけてしまうのかと思われます。

なので対応するセクションのファイル内のタグの一部を修正する必要があります。


以上のように|の後の部分で、以下処理をさせます。

| img_url: ‘master’:高解像度(元の解像度)の画像を取得します。

こうすることにより高画質のまま画像を挿入できるかと思います!

ご参考にしていただけますと幸いです。

なにかご質問があれば、お気軽にご相談ください。
お悩み解決できましたら、ベストアンサー、いいねいただけると励みになります。
何卒よろしくお願いします。

株式会社フルバランス

1 Like