7

単純な質問に聞こえますが、私はこれについて考えてきました。

ブラウザは画像をどのように正確にレンダリングしますか? たとえば、3000px x 1500px の 1MB の画像があるとします。次に、この画像を width:100%; に設定されたコンテナーに入れることにしました。つまり、それに応じてスケールダウンします。ブラウザーは 1MB 全体をロードしてから、コンテナーに合わせてイメージを縮小しますか、それとも縮小してからロードしますか?

これはほとんど私の状況であり、前者を実行する場合 (最初に 1 MB をロードする場合)、モバイル デバイスで別の画像を提供する必要があると思いますか?

ありがとう

編集: 人々は最初に 1 MB の画像をロードすると言っているので、ユーザーに大きな画像を提供することをどのように提案しますか? モバイル用に縮小して、モバイル/デスクトップ バージョンを用意しますか?

4

3 に答える 3

3

CSS は、画像が完全に読み込まれた後に適用されます。つまり、最初に 1MB の画像をロードしてから、寸法を適用します。また、画像はサーバー側に保存されます。これを説明する非常に便利な画像を見つけました:-

ここに画像の説明を入力

余談ですが：

ブラウザは、特に画像メタデータを読み取った後、非常に短い時間内に同じページを複数回レンダリングすることがよくあります。

于 2013-10-04T16:11:42.000 に答える
2

ブラウザーは (明らかに) 画像をロードする前にスケーリング (または何も実行) できません。

于 2013-10-04T16:08:24.867 に答える
2

画像は、HTTP リクエストなどを介して最初に取得されます。

GET /images/myimage.png

次に、スケーリング/変換が適用されます。したがって、プラットフォームごとに異なるイメージが必要な場合は、そのようにリクエストする必要があります。

于 2013-10-04T16:09:27.123 に答える