縮小画像がギザギザする(chorme)の対処法

Question

お世話になります。

当店トップページの
https://www.rakuten.ne.jp/gold/店舗/

「再入荷しました！」の一覧（4列×6行）の箇所ですが、
chormeでみるとギザギザしてしまいます。

大きい画像を縮小しているからなのですが、
その下の「にぎわいゾウさん」で作っている再入荷（4列×2行）のスライドの方は
ギザギザしていないので、こちらのようにキレイに表示したいです。

下記CSSを入れてみましたが、直りませんでした。
img {
	-webkit-backface-visibility: hidden;
}

対処方法はありますでしょうか。
よろしくお願いいたします。

Answer

ECマスターズの田中です。

「にぎわいゾウさん」製の再入荷スライドでは、
楽天の機能により、予め縮小した商品画像を表示しておりました。

この方法ですと、ブラウザ本来の縮小機能に頼ることなく、
また通信量を抑えながら小さい画像を表示することができますので、
「再入荷しました！」でも同様に、楽天の機能で縮小していただくことを
オススメします。

たとえば、横幅・高さを136pxに縮小する場合は、
画像URLを下記のようにご変更いただくことで、
楽天の縮小機能を使って、縮小された画像を表示することができます。

https://image.rakuten.co.jp/ショップURL/cabinet/フォルダ/ファイル名.jpg
↓
https://tshop.r10s.jp/ショップURL/cabinet/フォルダ/ファイル名.jpg?fitin=136:136

（※末尾の数字を変更して、縮小後のサイズを調整することができます）

まずは、１つの画像URLを書き換えてみて、
想定通り表示されることをご確認の上、
すべての画像URLを修正していただきますようお願いします。

Answer

1つの画像で試してみましたが、縮小されませんでした。

▼テストページ
https://www.rakuten.ne.jp/gold/店舗/index_test.html
傘立ての箇所です。

再度ご確認いただけますと幸いです。

Answer

ECマスターズの田中です。

index_test.htmlの大きくなっている画像のURLを確認したところ、
（前略）/sl0014.jpg?7703?fitin=136:136
のように、「?」が二重で記載されておりました。

まずは、既存の「?」と数値を削除して、
（前略）/sl0014.jpg?fitin=136:136
のようになるよう修正をお試しください。

どうしても数字の記載が必要な場合は、
（前略）/sl0014.jpg?fitin=136:136&7703
のように、「?」ではなく「&」を使って、
パラメータの書式として問題のないようにご記載をお願いします。

Answer

再度ソースを確認してみましたが、7703?　は入れていなくて、なんでだろうと思ったのですが、
画像のキャッシュをクリアするために、画像の最後にクエリ番号を不可するjsが影響していると分かりました。

jsを削除した所、縮小されるようになりました。


ありがとうございます。解決しました。
またよろしくお願いいたします。