紙でのWeb開発は、一般的な画像フォーマットを読みます

、のための絵絵にこの重要なリソースを使用するのは避けられないだけで、それはウェブサイト象徴的なロゴ、ホームページカルーセルエリア、または表示内容であるかどうか、写真のすべての種類の配列はすぐにページ上に広げ、Webサイトを開きます今日の自然な自明でインターネットの重要性。しかしなどGIF、JPG、PNG、など多くの画像フォーマットは、そこにあるあなたが、その後で読んで知っていない場合、あなたは、その後、それらの間の違いを知っていますか。

異なる画像フォーマットを区別するために入る前に、私たちは最初に少し基本的な知識を理解してみましょう。

画像圧縮

画像圧縮方法は、一般的に次の三つがあります

非圧縮：圧縮されていない画像は、すべてのデータの元の画像を保存しない、そのような画像は、最も高い減少を示すが、なぜなら圧縮することなく、画像の記憶サイズは比較的大きくなります。
非可逆圧縮：非可逆圧縮アルゴリズム画像のデータを処理する画像圧縮アルゴリズムのクラス、このタイプで、画像が表示されているが、一部のデータは、画像を圧縮する役割を再生するにはあまりにも多くの影響が発生することはありません失います。より多くのデータは、より高い圧縮効率を失い、対応する画像は、効果は、特定の減少となり示します。
可逆圧縮：可逆圧縮アルゴリズムの画像データを符号化し圧縮するとき、それが唯一のいくつかの冗長なデータを失うことになるので、写真はほとんど同じです前と後に、我々は圧縮の品質を保証することができます。

グラフィックス種

コンピュータ上のグラフィックは、一般に二つのカテゴリーに分割されたビットマップとベクトルグラフィックス。

ビットマップは、とも呼ばれるビットマップ、ピクセルの数によって画像のこのタイプは、場合拡大ビットマップ、一つの小さなボックスを見ることができ、画素は小さなボックスです。ビットマップが十分に大きい倍に増幅された後、一つの明確なピクセルを見ることができ、ビットマップ画像のエッジは、セレーションの一つとなり始めました。
知られているベクトル、ベクトルグラフィックス。ベクターは、ビットマップとは異なり、このようなパターンを記述するために使用される直線と曲線のように、各点でのデータを記録したが、形状や記録画像の色はありません。ページ上の表示で、式を用いて算出された場合、結果は、ページに表示されます。ベクターが増幅される場合、ベクターは、このように変更することが表示されない効果を示し、次に表示される数式を用いて計算されるからです。

カラーモード

カラーモードは、一般的に分割されて、インデックスカラーと直接色：

カラーインデックスは：カラーマッピングにデジタル画像を記憶しながら、ときにデジタルメモリの組み合わせメモリに番号（インデックス）カラー画像を表現するために使用することをいいます。この方法は、デジタルバイトインデックスカラーを用いて、コンピュータ・システムに対応し、限られた色、通常は256色を記憶することができます。
ダイレクトカラー：、色を表現するために、通常、3~4のデータを複数の番号を使用して、これらの図は、赤、緑、青、透明の色を表します。人気の表示装置は、これらの4つの寸法の256のそれぞれのバリエーションをサポートすることができるので、色の直接電力が32色2を表すことができます。

GIF

GIFは、グラフィックスインターチェンジ形式の略で、グラフィックスインターチェンジ形式を変換することができ、それはビットマップパターンに属しているので、GIFイメージを増幅した後、あなたは大きな歪みを見ることができます。GIFは、主データストリームと設計のためではなく、ストレージ・ファイル・フォーマットとして伝送フォーマットです。

可逆圧縮アルゴリズムであるGIF使用LZW圧縮アルゴリズムの符号化は、その核となるアイデアは、より少ないデータ表現を使用して、データ・マッピングです。例えば：私たちは、文字列ABBABAを持っている場合、元の文字列は、AB22となるように突然データを格納するのに必要なメモリを減少させるように、我々は、元のデータが、、、2 BAを表すためにシンボルを使用することができそれが失われることはありません。

GIFの事実は、2つの基準があります。

GIF87a 1987年バージョンの打ち上げが、このバージョンは、それが画像の品質を維持しながら画像のサイズ割を圧縮できLZW圧縮アルゴリズムを使用して、透明なピクセルとアニメーション効果をサポートしていない、ファイルストレージの画像を提供しますセント。
GIF89aの：いくつかのピクセルを透明にできますアニメーション機能を有効にすると、ファイルが複数の画像を保存することができますバージョンの1989打ち上げ。このバージョンではGIFファイルとグラフィック制御ブロック、ノート、メモ、アプリケーション・プログラミング・インターフェース4つのブロックを展開、および透明色及びマルチフレームアニメーションのためのサポートを提供します。

使用したGIF インデックスカラーモードでは、これだけ256色をサポートします。色彩豊かな画像が使用GIF形式、より適切なカラー比較的単純な画像には適していません。

JPEG

それとJPGの違いは何です：それはJPEGに来るとき、あなたは学生を依頼する必要がありますか？答えは何の違いではないの.jpgを使用して互換性のために、DOS、Windows 95とのみ、最大3つの文字の拡張子をサポートするために使用される他の初期のシステムに名前を付けるため、JPGやJPEGは、同じこと、JPGが言う理由が理由です以降なぜなら歴史や習慣互換性のための、現在より人気.JPG。

トピックに戻る、JPEGやGIF同じことをするだけでなく、ビットマップグラフィックに、同じような状況は、歪みを増幅されます。

違いは、JPEGやGIFが使用していることである非可逆圧縮の目標は、JPEGを設計することであるので、アルゴリズム：圧縮ファイルサイズとして、人間の影響区別画質なしです。これは、JPEGが使用しているため、画像のボリュームサイズを小さくするために、データの一部が写真を失われますが、それはJPEGの悪い結果を意味するわけではないことを意味し、直接色を 1600のサポートは、（電源24に2）、万色これまでに作成し、圧縮後の品質の損失が簡単に人間の目によって知覚されることはありません、色のシーンの大半におけるニーズに対応するのに十分な。

だから、豊富なカラー画像に、JPEGを使用することは良い選択、大きな図などのホーム大きな背景の特に一部で、JPEG画像をレンダリングするために使用し、同時に画像品質を確保するために、ボリュームを小さくすることができます。欠点は、JPEGであることである透明性をサポートしていない、透明性の要件は、他の種類の画像を使用して検討します。

PNG

PNGはポータブルネットワークグラフィックス、すなわち、ポータブルネットワークグラフィックスの略です。実際には、PNGによると、色を記憶されたいくつかのデータ・ビットに分割され、ここでは導入されました。

PNG-8：カラー画像に格納された8ビットのバイナリデータを使用し、したがってのみ256色、カラーインデックスカラーモードをサポートします。透明は、2つの異なる形式（透明および透明アルファインデックス）をサポートしています。
PNG-24：24ビットバイナリ画像の色データストレージの使用は、1600万色をサポートすることができ、色は透明度をサポートしていない、ダイレクトカラーモードです。
PNG-32：32ビットのバイナリ色データストレージ、PNG-24と比較して、アルファチャンネルが増加すると、それが透明な、最大420億色をサポートすることができます。

PNGが使用され、可逆圧縮アルゴリズムを、そうJPEGに比べて大容量の PNGとJPEGアニメーションをサポートしていないとして、。PNGをサポートしていますが、透明性もPNGの利点である、その高い品質の可逆圧縮のため、2次ソース・ファイルのための理想的な保存または画像フォーマットを編集する必要があります。PNGは大きな目標ですが、それはJPEG、PNG-24の使用を置き換えることですが、ファイルサイズはJPEGと同じくらいの5倍であり、表示が少しだけリフトを得ることは通常です。あなたは、イメージファイルのサイズを気に結果のより良い表示をしたいか、透明性を使用したくない場合にのみ、そのため、あなたはPNG-24またはPNG-32形式を使用する必要があります。

AFNG

APNGアニメーションポータブルネットワークグラフィックスは、名前の省略形、それがアニメーションPNGで、示唆しています。

APNGはPNGフォーマットの拡張に基づいており、それは420億色に、支持体の透明性としてアニメーション画像のためのサポートを追加し、ならびに24ビットRGBと8アルファ透明のサポート、およびPNG-32。これは、PNGやGIF、豊かな色彩、高品質なロスレス圧縮の両方の利点を統合APNGと同等ですが、また、アニメーション、唯一の大型の災難やボリュームをサポートしています。この領域でAPNG量もアニメーションに格納されたデータは、フレーム間の差は、アルゴリズムによって計算され、最適化されたフレームの前の相違点のみを格納する、代わりの完全なフレームを格納します。

以下に示すように、APNGに合成4枚の画像を仮定：

画像情報のAPNG実際の記憶：

唯一必要なアニメーションフレーム記憶された画像情報からである冗長データが最適化されているボリュームがさらにAPNG低減することができます。

互換性のためにAPNGブラウザが互換性のあるブラウザ上でアニメーションを表示することができ、また非常に良いですが、図ハングの場合は、これは、互換性のないブラウザでは表示されませんので、ストレージAPNGの最初のフレーム通常のPNG画像は、あるAPNGのブラウザはサポートしていないか、またはソフトウェア、唯一の追加リアフレームアニメーション無視して、最初のフレームAPNGファイルが表示されますため APNGはPNGの理由と下位互換性がある理由です。

SVG

スケーラブルベクタグラフィックス（スケーラブルベクターグラフィックス、SVG）はXMLベースのW3Cは、2次元ベクトルグラフィックス規格を立ち上げています。上記フォト異なるフォーマット、SVGはベクトルであり、それは処理された画像ピクセルに基づいているが、説明の式により計算されたデータの後にページに表示される画像の記述に基づいていない、それは注目すべき特徴は、どんなにがどのように拡大していることで、両方の状況が歪んで表示されていません。

SVGは、むしろSVGファイルのサイズを大幅に低減されることができる1つの画素のデータより、画像メモリの説明であると同時に、より優れた圧縮性を有するからです。

SVGは多くの利点を持っていますが、それにも欠点がありますが。

コストは動画に比べて、理由の説明画像の効果を計算する必要の比較的高いレンダリング、あなたはより多くのパフォーマンスを消費する必要があります。
SVGは、他の画像形式を学ぶのないコストはありません、それはプログラム可能です。（もちろん、これはまた、その柔軟性を証明しています）

WEBP

上記のすべての画像フォーマットでは、WEBPがで新しいフォーマットである2010グーグル年によって提案され、それがすることを目指し、その後、全体を聞かせて、実際の定義と互換性のある画像フォーマットを損なうことなく、効果的なウェブの画像ファイル圧縮を作りますダウンロードページより速いです。

WEBPは非可逆と可逆圧縮の両方をサポートし、PNGはアニメーション効果としてGIFとAPNGサポートのような、透明度をサポートしていますように同じことができる、のはWEBPの利点のGoogleの公式説明を見てみましょう、画像フォーマットのすべての利点を収集していると言うことができます。

PNGと比べて、WEBPロスレス画像サイズが26％減少しました。同様のJPEG画像よりも小さい等価質量指数、WEBPロッシー画像25から34パーセントでSSIM。可逆WEBPサポート透明度（また、アルファチャンネルと呼ばれる）、わずか22％の追加バイト。非可逆圧縮RGB許容できる、非可逆WEBPも透明性をサポートするために、PNGと比較して、通常は3倍のファイルサイズを提供しています。

WEBPは非常に多くの利点がありますが、それはまだ後のすべてのですが、あまりにも若く、およびブラウザインタフェースでは、若すぎる結果であることである誰もあなたのあら捜しをしない（互換性はありません）、次のようなデータから、特に悲劇的ではないが、しかし、IEで、見えますどのように大きな、Safariは、具体的には、IOSをサポートしていない、あなたが知っているトラフィックは今、人々が生まれ見えるように十分だった、最後に動いています。

もちろん、あなたができる、オープンWEBPブラウザをサポートしていない使用されている場合、それは、xxxx.jpg.webpあり、これはまた、溶液を持ち、いくつかの電気プロバイダのウェブサイトを開いて、それがオープンWEBPブラウザをサポートするために使用されている場合、我々は大きな画像を見ることができます絵がxxxx.jpgなっ参照、Webサイトのブラウザ上で見つけることができますが、それはWEBPが互換性のある他のリソースが返されますサポートしていませんサポートするためのリソースを返した場合、WEBPをサポートするかどうかを決定するために試験しました。

さて、ここでの今日の導入は、あなたが感じる場合、あなたはまた、調査に便利な仕事で友人が歓迎賞賛コレクションを少し書くことができます~~