流れる帯の画像は、表示する大きさで作る

サイトのトップに、作品が横に流れる帯を置いた。画像は作品ページと同じ元の画像を使い、画面に入ってから読む指定（loading="lazy"）を付けた。PCでは流れていた。スマホで見た人からは「重い」と言われ、iPhone では帯が真っ白だった。

この研究を一言でいうと──小さく見せる画像は、小さく作る。動く場所では、読み込みを遅らせない。

原因は2つあった

1つ目は大きさ。帯の画像は小さく表示されるのに、作品ページ用の大きな元画像を読んでいた。2つ目は遅延読み込み。帯は位置を動かして（transform）流している。iPhone の Safari は、その中の画像を「画面の外」と判定したまま、読みにいかないことがある。

直す前と直した後

PCのブラウザの幅を狭めても、iPhone の判定は再現できない。390px幅の画面で、帯の画像が実際に出ていることを撮って確かめた。

決めたこと

• 流れる帯やカルーセルには、表示の大きさに合わせた専用の画像を作る。
• 動く場所の画像には、遅延読み込みを付けない。
• 直したら、スマホの幅で画像が出ているところを撮って確かめる。

あなたのサイトの帯は、iPhone で流れていますか。

速くするつもりの1行が、写真をぼかす、の研究を読む →