関連する画像の第二に、最適化

イメージタイプ:

png8--256支持透明色、8ビット

png24--2 24番目の色、透明度がサポートされていない、24ビット

png32--2 24番目の色、透明支持体32ビット

各画像フォーマットは独自の特徴を持っているため、PNG可逆圧縮は、JPEGは非可逆圧縮され、異なる画像形式は重要であり、さまざまなビジネス・シナリオのために選択します。

一般的なビジネスシナリオで使用される様々な画像フォーマット:

JPG非可逆圧縮、圧縮率は、透明性をサポートしていない、ほとんどがビジネスシーンの明確な絵必要はありません
PNGのサポートの透明性、優れたブラウザの互換性を、ほとんどのビジネスシナリオは、の透明絵必要と
より良いWEBP圧縮を、iOS搭載のWebViewで互換性があります問題、アンドリュースは、すべて
のSVGベクトルコード埋め込まれた、比較的小さい、比較的単純なシーンスタイル画、絵のスタイルは、比較的単純なビジネスシナリオであります

画像を圧縮する方法:

本物の絵の状況については、いくつかの色情報を放棄することは比較的軽微であります。

1、CSSスプライトフィギュア:1枚の画像に統合され、ウェブサイト上のいくつかの画像の使用

利点:HTTPリクエストののサイトの数減らし
合成画像は、よりゆっくりと負荷が大きすぎるので、それはページ全体失われたアイコンをロードしない場合:短所を。

ソリューション:スプライトマップが大きすぎることができない、複数のスプライト図に分けアイコン。ビジネス関連、スプリットスプライト図。

生産スプライト図のスタイル:www.spritecow.com、地域を選択し、スタイル、サイズ、幅と高さはアイコンが望まれるが生成されます。左、上はその点が、オフセットどのように私たちのアイコンの左上隅に左上隅と全体像のアイコンが重なって左上隅からの相対位置です。

図2に示すように、画像インライン:HTML(BASE64)に埋め込まれた画像の内容

利点:HTTPリクエストのサイトの数を減らします

短所:全体のサイズが大きくなります

それの小型4キロバイトまたは8キロバイト画像は、インライン行くべき

3、ベクターグラフィックス使用してこの問題を解決するためにiconfontアイコンを使用して、描画するSVGを使用してベクターグラフィックを。

図4に示すように、アンドリュースWEBPで:WEBP利点は有することに反映され、優れた画像データ圧縮アルゴリズムを、より小さな画像サイズをもたらすことができる、と視認画質に差がありません ;可逆と非可逆と共に特性の圧縮モード、JPEGやPNGへの影響を変換、アルファ透明、アニメーションは非常に良好で、安定性と団結しています。

おすすめ

転載: www.cnblogs.com/QianDingwei/p/11027127.html