2 つの一般的な画像表示方法_html/css_WEB-ITnose

今日Webページの画像の最適化についてグループで話し合っていて、プログレッシブJPEGというおしゃれな用語を聞いたのですが、調べてみると、標準タイプ(ベースラインJPEG)表示方式インターレースPNGがあることがわかりました。 png 画像の を見て、これらが画像を表示する最も一般的な 2 つの方法であることに気づきました。皆さんも私と同じように見たことがあると思いますが、名前を付けることはできません。

1. プログレッシブ プログレッシブ JPEG

1.1 表示方法

この表示方法は、QQ スペース、Baidu 写真など、現在最も一般的です。効果は次のとおりです。ネットワーク速度により、画像を開いた後、相対的に A のみが表示されます。ぼやけた画像スタイルが表示されますが、読み込みを続けると、画像がどんどん鮮明になっていきます。ただし、その代償として CPU の消費量が増加しますが、これは現在のコンピュータのパフォーマンスに比べれば大したことではありません。

1.2 画像をプログレッシブに設定するにはどうすればよいですか?強力なPSを使用して、ASを保存するとき、またはWebのフォーマットとして保存するときにcontinuousをチェックしてください。なのでここでは紹介しません。

1.3 インターレース PNG 上記は jpg 形式の画像の場合、次のように保存するときに

インターレース

をチェックするだけで済みます。私の記憶では、大きな画像が上から下に少しずつロードされるのを長い間見たことがありませんでしたが、この表示方法はおそらく誰にとっても馴染みのあるものです:

デフォルトの保存方法。 ps のタイプは標準タイプです:

フロントエンド開発者として、画像を切り取るときにプログレッシブとして保存することをお勧めします。これは、ユーザー エクスペリエンスを向上させるためだけで問題ありません。