テーマ「Dawn」の商品ページの「テキスト付き画像」の画像サイズ

[campanule4]

テーマ「Dawn」を使用しています。

商品ページのテンプレート「テキスト付き画像」を使って、レイアウトしているのですが、PC版のみ画像が荒れてしまいます。

と言いますのも、どうやらモバイル版画像に自動リサイズされてしまっているようです。

元サイズ→1744px:940px

リサイズサイズ→750px:404px

PC版では元サイズの写真を使用したいのですが、方法はありますでしょうか？

もしくはPC版、モバイル版、どちらも元画像を使用する設定でも構いません。

お分かりになる方がいたら幸いです。

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

[Qcoltd · Accepted solution]

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

Dawnのバージョンにより異なるかもしれませんが、

「テキスト付き画像」の画像は、

下記のように、imgのsrcsetで制御されているようです。

<img src="hoge.jpg?v=1682928686&amp;width=1500" alt="" srcset="hoge.jpg?v=1682928686&amp;width=165 165w, hoge.jpg?v=1682928686&amp;width=360 360w, hoge.jpg?v=1682928686&amp;width=535 535w, hoge.jpg?v=1682928686&amp;width=750 750w, hoge.jpg?v=1682928686&amp;width=1070 1070w, hoge.jpg?v=1682928686&amp;width=1500 1500w" width="1500" height="741" loading="lazy" sizes="(min-width: 1200px) 550px,
              (min-width: 750px) calc((100vw - 130px) / 2), calc((100vw - 50px) / 2)">

簡単に申しますと、 

画面の幅(厳密には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をご希望の数値に変更することで最大幅を変更することもできます。

ご参考まで。

(キュー田辺)

[campanule4]

素晴らしいご回答をありがとうございます。

ひとまずこれで対処できそうです。

ありがとうございます。