DAWNの商品写真登録についてですが
商品写真自体はキレイに反映されるのですが
TOPに出てくる写真(登録写真の1枚目+2枚目)が拡大されることにより
ぼやけてしまいます。
元データは5464×8192ピクセルなのですがどのようなサイズにしたらぼやけないでしょうか?
DAWNの商品写真登録についてですが
商品写真自体はキレイに反映されるのですが
TOPに出てくる写真(登録写真の1枚目+2枚目)が拡大されることにより
ぼやけてしまいます。
元データは5464×8192ピクセルなのですがどのようなサイズにしたらぼやけないでしょうか?
Stonesyella様
ご質問を確認しました。
写真を拡大した際にぼやけて見えてしまうとのことですが、
shopifyのテーマは表示している画面幅に合わせて自動で画像サイズが調整される仕様となっております。(大きい商品画像を登録したからといってページが重くなることは基本的にございません。)
そのため画像サイズは登録できる最大の20メガピクセル(4000 × 5000 など)を登録されると良いかと存じます。
それでもボケてしまう場合は、product-media.liquidの下記コードを修正する必要があります。
{%- if media.preview_image.width >= 1100 -%}{{ media.preview_image | image_url: width: 1100 }} 1100w,{%- endif -%}
{%- if media.preview_image.width >= 1445 -%}{{ media.preview_image | image_url: width: 1445 }} 1445w,{%- endif -%}
こちらのコードですが、画面幅が1100px以上の時は画像の横幅を1100pxにするという処理なので、
{{ media.preview_image | image_url: width: 1100 }}内の1100の数字をそれより大きい数に変えていただくことで、画質の良い画像を表示することが可能になります。
550から4096までそれぞれ任意の数に変更されると良いかと存じます。
ご参考までに。
フルバランス 園畑
ご指導本当にありがとうございます。
とても困っていたのでお返事頂けたことがとても嬉しいのですが
ご指示頂きましたコードの1100部分の数字を色々と変えてみたのですが
やはりぼやけております。
数字を変えるのは
{{ media.preview_image | image_url: width: 1100 }}内の1100のみで合ってますでしょうか?
{%- if media.preview_image.width >= 1100 -%}の1100も変更しますか?
画像のぼやけは直りませんでしたが
レイアウトを変えて表示スペースが小さくなりましたら
ぼやけも無くなりました。ありがとうございました。