Dawnテーマの商品ページで「テキスト付き画像」セクションを使用した際、PC版で画像が荒れる問題が報告されました。
原因:
srcset属性によって画面幅（viewport）に応じて自動リサイズされている解決方法:
回答者が調査し、以下の対処法を提案:
sections/image-with-text.liquidファイルを編集image_tagフィルタからsrcset:パラメータを削除width: 1500の数値を希望の最大幅に変更注意点:
srcsetを削除すると全画面幅で最大サイズ画像が読み込まれる質問者は提案された解決方法で対処できることを確認しました。
テーマ「Dawn」を使用しています。
商品ページのテンプレート「テキスト付き画像」を使って、レイアウトしているのですが、PC版のみ画像が荒れてしまいます。
と言いますのも、どうやらモバイル版画像に自動リサイズされてしまっているようです。
元サイズ→1744px:940px
リサイズサイズ→750px:404px
PC版では元サイズの写真を使用したいのですが、方法はありますでしょうか？
もしくはPC版、モバイル版、どちらも元画像を使用する設定でも構いません。
お分かりになる方がいたら幸いです。
よろしくお願いいたします。
興味があり調査してみました。
Dawnのバージョンにより異なるかもしれませんが、
「テキスト付き画像」の画像は、
下記のように、imgのsrcsetで制御されているようです。
簡単に申しますと、
画面の幅(厳密にはviewportの幅)に応じて表示する画像を変更する、
ということをしています。
質問者様の場合、750px幅の画像が表示されているとのことなので、
質問者様の画面のviewportの幅が750px以下であることを示しています。
さて、
なぜこのようになっているかというと、
画面幅に応じて適切なサイズの画像を読み込ませることで、
ページ表示スピードを良くする、という意図があるためです。
しかし、
状況によってはページの表示スピードより、
画像のクオリティを優先したい場合があるかもしれませんね。
雑なやり方になってしまいますが、
一番簡単な解決方法は
「テキスト付き画像」のimgからsrcsetを削除してしまう、ことです。
(どのような画面幅においても最大サイズの画像が読み込まれてしまいますが、
解決方法としてはこれが最も簡単だと思います。)
ストア管理画面 > オンラインストア > テーマ > コード編集
から、
セクション(sections)のimage-with-text.liquidを編集します。
(Dawnのバージョンによってコードや行数が異なる可能性があります。)
40行目付近の下記を、
{{
section.settings.image
| image_url: width: 1500
| image_tag: loading: 'lazy', sizes: sizes, widths: widths
}}
↓ 下記のように変更します。
{{
section.settings.image
| image_url: width: 1500
| image_tag: loading: 'lazy', sizes: sizes, widths: widths, srcset: nil
}}
これで、srcsetが出力されなくなります。
なお、幅1500が最大で設定されているので、
上記のコードの、width: 1500をご希望の数値に変更することで最大幅を変更することもできます。
ご参考まで。
(キュー田辺)
素晴らしいご回答をありがとうございます。
ひとまずこれで対処できそうです。
ありがとうございます。