Webdesign：PNG-Imageの幅の制限

Question

ウェブページのスクロールに基づいてスライドショーを作成したいと考えています。

私の問題は、画像の幅が78720x1015pxで、png形式であることです。 画像の幅は、横に並んだ41倍の1920pxの1つの画像で決まります。 - 画像が100％動いている（マージン：-100％）漫画のようで、映画の感情を生み出すはずです。

ただし、画像幅は1920px x 41pics = 78720pxになります。

これは莫大な幅ですが、ファイルサイズが私の意見ではそれほど大きくないのはわずか975kBです！ - しかし、どういうわけかWebbrowserで画像をロードするのに非常に時間がかかり、画像はデスクトップ上のImageViewerのような品質ではありません。

質問1：このような大きな画像幅に対処するにはどうすればよいですか？限界は何ですか？

質問2：このような種類のスライドショーを作成するより良い方法はありますか？ - スライド自体が見えないようにしてください。それは約40の写真に基づく映画のようなものでなければならない。

ありがとうございます！

Answer 1

PNGは非常にうまく圧縮されます。特に、限られた数の色しか使用できないような漫画の場合、PNGは非常によく圧縮されます。

ただし、メモリにロードすると、デバイスはすべてのピクセルデータをRAMにロードして表示する必要があります。それはあなたのケースではおよそ8000万画素で、圧縮されていないデータは約320Mbです。これは恐らくブラウザーが苦労していることでしょう。特に、marginを使用している場合は、イメージを完全に再描画する必要があるため、ブラウザを移動してください。

transformを使用すると、ハードウェアアクセラレーションを使用する必要があります。また、トランスフォームがページレイアウトに影響を与えないため、再描画の一部を避けることができます。

しかし、より良い解決方法は、個々の画像に分割することです。次の画像にコードをロードし、それをスクロールさせてから、スクロールしながらスクロールして、スクロールしてから画面を外して、比較的シームレスな表示にします。