web-dev-qa-db-ja.com

なぜ画像が上から下に読み込まれ、時には解像度を「強化」するのですか?

インターネットを日常的に使用する場合、ほとんどの場合、上から下に垂直に「成長」することによってロードされるイメージがロードされます。つまり、最初に数行のピクセルのみが表示され、完全な高さになるまで増分します。つまり、画像が物理的なプリンターで印刷される方法。

しかし、その他の場合、画像はフルサイズで読み込まれます。つまり、すべての幅と高さを使用しますが、非常に低い解像度で読み込まれ、非常にピクセル化されてぼやけて見えます。 。数回の「スワイプ」の後、画像の最大解像度を取得します。 (resolutionが適切な用語であるかどうかはわかりませんが、アイデアが得られることを願っています)

それで、それぞれがなぜまたはいつ起こるのでしょうか?条件は何ですか?何に依存しますか? Webプロトコル、転送、データエンコード、またはそれらのいずれについてもわからないので、専門家でない人(通常のインターネットユーザー)にわかりやすい答えを教えてください。

3
DiegoDD

これは、PNG、JPEG、GIFなどの一部の画像形式をインターレース/プログレッシブ形式で保存できるためです。これにより、完全な画像をすぐに大まかにレンダリングすることができ、ファイルデータを受信するたびに詳細レベルが高くなります。これは、画像データを上から下に配置する「ベースライン」形式とは対照的です。つまり、ブラウザには、データがまったく受信されていない画像の下部をレンダリングする方法がありません。

ブロードバンドが広く採用される前はプログレッシブ/インターレースエンコーディングがより一般的でした。当時は画像のダウンロード時間が非常に重要だったためです。全部をダウンロードします。

ただし、すべてのブラウザがすべてのインターレース形式のプログレッシブレンダリングをサポートしているわけではありません。そのため、インターレース形式で画像を保存する場合でも、ブラウザは画像全体がダウンロードされるのを待ってから、ユーザーに何も表示しません。ほとんどのウェブマスターは、インターレース/プログレッシブ エンコードはファイルサイズ全体に約10〜20%を追加し、ほとんどの画像は非常に高速でロードされるため、プログレッシブレンダリングは大きなファイルを除いてあまり目立ちません。

編集: w3dが指摘したように、プログレッシブ形式で保存するとJPEGが大きくなるという私の最初の声明は間違っていました。実際には、プログレッシブエンコーディングを使用すると、ファイルサイズがわずかに減少するようです。

6
Lèse majesté