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

**URL:** <https://community.shopify.com/t/dawn/217385>\
**Category:** 技術的なQ＆A\
**Tags:** css\
**Created:** [May 19, 2023, 10:23am UTC](https://community.shopify.com/t/dawn/217385 "2023-05-19T10:23:21Z")\
**Posts on this page:** 3\
**Page:** 1

## AI-generated summary

Dawnテーマの商品ページで「テキスト付き画像」セクションを使用した際、PC版で画像が荒れる問題が報告されました。

**原因:**
- 画像が`srcset`属性によって画面幅（viewport）に応じて自動リサイズされている
- 元画像サイズ1744pxに対し、750px幅の画像が表示されている
- ページ表示速度を優先するための仕様

**解決方法:**
回答者が調査し、以下の対処法を提案:

1. `sections/image-with-text.liquid`ファイルを編集
2. 約40行目付近の`image_tag`フィルタから`srcset:`パラメータを削除
3. または`width: 1500`の数値を希望の最大幅に変更

**注意点:**
- `srcset`を削除すると全画面幅で最大サイズ画像が読み込まれる
- ページ表示速度よりも画質を優先する場合に有効

質問者は提案された解決方法で対処できることを確認しました。

<div class="post-metadata">

**Author:** ![campanule4](https://avatars.discourse-cdn.com/v4/letter/c/43a26b/32.png) [@campanule4](https://community.shopify.com/u/campanule4)\
**Post date:** [May 19, 2023, 10:23am UTC](https://community.shopify.com/t/dawn/217385/1 "2023-05-19T10:23:21Z")

</div>

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

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

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

元サイズ→1744px:940px

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

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

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

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

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

---

<div class="post-metadata">

**Author:** ![Qcoltd](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/qcoltd/32/900_2.png) [@Qcoltd](https://community.shopify.com/u/Qcoltd)\
**Post date:** [May 26, 2023, 10:53am UTC](https://community.shopify.com/t/dawn/217385/2 "2023-05-26T10:53:14Z")

</div>

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

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

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

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

```markup

```

簡単に申しますと、

画面の幅(厳密にはviewportの幅)に応じて表示する画像を変更する、

ということをしています。

質問者様の場合、750px幅の画像が表示されているとのことなので、

質問者様の画面のviewportの幅が750px以下であることを示しています。

さて、

なぜこのようになっているかというと、

画面幅に応じて適切なサイズの画像を読み込ませることで、

ページ表示スピードを良くする、という意図があるためです。

しかし、

状況によってはページの表示スピードより、

画像のクオリティを優先したい場合があるかもしれませんね。

雑なやり方になってしまいますが、

一番簡単な解決方法は

「テキスト付き画像」のimgからsrcsetを削除してしまう、ことです。

(どのような画面幅においても最大サイズの画像が読み込まれてしまいますが、

解決方法としてはこれが最も簡単だと思います。)

ストア管理画面 \> オンラインストア \> テーマ \> コード編集

から、

セクション(sections)のimage-with-text.liquidを編集します。

(Dawnのバージョンによってコードや行数が異なる可能性があります。)

40行目付近の下記を、

```markup
{{
            section.settings.image
            | image_url: width: 1500
            | image_tag: loading: 'lazy', sizes: sizes, widths: widths
          }}

```

↓ 下記のように変更します。

```markup
{{
            section.settings.image
            | image_url: width: 1500
            | image_tag: loading: 'lazy', sizes: sizes, widths: widths, srcset: nil
          }}

```

これで、srcsetが出力されなくなります。

なお、幅1500が最大で設定されているので、

上記のコードの、width: 1500をご希望の数値に変更することで最大幅を変更することもできます。

ご参考まで。

(キュー田辺)

---

<div class="post-metadata">

**Author:** ![campanule4](https://avatars.discourse-cdn.com/v4/letter/c/43a26b/32.png) [@campanule4](https://community.shopify.com/u/campanule4)\
**Post date:** [May 29, 2023, 4:39pm UTC](https://community.shopify.com/t/dawn/217385/3 "2023-05-29T16:39:19Z")

</div>

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

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

ありがとうございます。