最高の画像フォーマットは何ですか？画像に選択する形式-jpeg、png、またはgif

現在、jpeg形式が先頭に立っています。写真やカラー画像を数回圧縮できるため、最小重量の点でgifおよびpng形式よりも進んでおり、bmpは依然として「後れを取っています」。

今では、写真や写真がない状態でインターネット上でWebページを見つけることはほとんど不可能です。写真はサイトのメインコンテンツを活気づけ、装飾し、補完し、Webのすべての領域でうまく使用されるため、今日ではWebページをレイアウトする際の標準になっています。ちなみに、グラフィックを表示できる最初のブラウザはMosaic（mosaic）で、これはHtmlハイパーテキストマークアップ言語の登場とほぼ同時に登場しました。

現在、ほとんどすべてのブラウザが、Webで使用される3つの主要なラスターグラフィック形式（Gif、Png、およびJpg）をサポートしています。歴史的に、gifが最初に表示され、それを利用して、最初のブラウザで画像やメディア情報を追加および表示することができました。それを作成するとき、開発者は保存された画像のサイズの最大の縮小に焦点を合わせました。

確かに、当時のインターネットの速度は非常に遅く、画像のダウンロードが「永遠に」続くことはなかったため、特別な「グラフィック交換フォーマット」が開発され、適用されました（これがGIFの略語です）。

Gifの特徴は、256色のみで構成されるパレットを含めることができることです。それらの。この形式に変換された画像には、常に256を超える色合いが含まれず、他のすべての色はディザリングから作成されます。しかし、フルカラー写真をGIFに変換するときに、さまざまな予期しないアーティファクトが発生するのは、まさにこの混合のせいです。この明らかで重大な欠点のために、jpegとpngは、ウェブサイトのページにフルカラーの写真や写真を表示するためにますます使用されています。

しかし、gifは、1つの単純な理由で、Web業界で依然として人気があります。それは、Webで使用される唯一のアニメーションをサポートしています。アニメーションの絵文字とアバター、ポストカード、バナーは、Gif形式の結果です。確かに、フラッシュテクノロジーは今ではそれほど人気がありませんが、そのシンプルさから、gifはウェブマスター、特に初心者の間で人気があります。

このアニメーションの本質は、GIFコンテナには1つの画像ではなく、一度に複数の画像があり、これらの画像が互いに置き換わるまでの時間が指定されているという事実にあります。同時に、アニメーションをループさせることができ、最後のフレームの後に最初のフレームが再び表示されます。今日、インターネット上には、Gifアニメーションを自分で作成できる専門のエディターがたくさんあります。

また、gifは、生成された画像の透明度を生成する基本的な方法をサポートできます。なぜ原始的なのですか？はい、GIFは2つの透明度値（透明または不透明）のみをサポートしているため、Png形式のアルファチャネルを使用して実現できる中間状態はありません。

このため、スムーズに変化する透明度を表示するのが難しいため、品質に関連するすべてのものが透明な背景画像の場合-これはすでにPngの特権です。インターネットで見つけることができる透明な背景を持つほとんどすべての画像には、png拡張子が付いています。

PNGにはいくつかのバリエーションがあり、それぞれが独自のタスクを実行するように設計されています。

PNG 8 -ここで、Gifと同様に、PNG 8で写真を保存する場合、256色のみが使用されます。したがって、これら2つのラスターグラフィック形式での画像圧縮の結果はほぼ同じになります。 Gifの場合と同様に、ここでは透過性がサポートされていますが、アルファチャネルが使用されています。

PNG 24 -ここでは、写真の各ピクセルに、それぞれ8ビット（8 * 3 = 24）の3つのカラーチャネルが割り当てられ、歪みのないフルカラーの画像形成を実現します。カラーディスプレイの品質はJpgを上回りますが、重量の点ではより重くなります。

PNG 32 -ここでは、3つのカラーチャネルがフルカラー画像の形成を担当し、4つ目はアルファチャネルの形成に個別に割り当てられます。これにより、PNG32を使用して背景が透明な画像を取得できます。 PNG 32では、透明度の変更を選択できるため、そのような画像は、背景のあるすべてのWebページで同じように表示されます。

それでは、すべての情報を要約して、いくつかの結論を導き出しましょう。

注意してください、たくさんの写真！すべてクリック可能です。

PNG

Web 2.0の時代にますます人気が高まっているビットマップグラフィック形式のPNGは、古き良きGIF（および一部はTIFF）の代わりとして1995年に登場しました。その時までに、プロプライエタリGIFの所有者は、このフォーマットを使用してすべての開発者から4桁の金額を請求することを決定し、無料のコミュニティは無料の代替手段を提供するしかありませんでした。

では、このフォーマットの利点は何ですか？

アルファ透明性の完全サポート-透明性。画像の領域を透明および半透明にすることができます。
品質を損なうことのない高品質の圧縮アルゴリズム。 LZWに似ていますが、少し効率的です。
インターレースの可能性、および（GIFとは異なり）垂直方向と水平方向の両方で同時に。
内蔵のガンマ補正。表示設定を画像に添付して、画像が作成者と同じように別のモニターに表示されるようにすることができます。

この形式には、PNG-8（GIFに類似-インデックスカラーを使用）とPNG-24（JPEGに近い-フルカラーパレット）の2つのバージョンがあります。

PNG-24は全色域を使用するため、GIFと比較するのは困難です。インデックスパレットを備えたPNG-8は、ここでより似ています。比較のためのスクリーンショットは次のとおりです。

練習（および同僚の意見）は、GIFが単純な小さな画像をよりよく圧縮することを示しています。しかし、大きな画像に関しては、GIFは依然として遅れをとっています。

さらに、もう1つのかなり大きな利点があります。実際、一般的な信念に反して、 PNG-8はフルアルファチャンネルも使用できます、PNG-24と同じように。 Photoshopがそれをサポートしていないというだけなので、LebedevのスタジオのSergei Chikuyonokは、私がやろうと決めたAdobe Fireworksの使用を推奨しています（これについては少し）。

そして、この戦いでは、透明性が必要ない場合、PNGは、いわば「ミドルマーケットセグメント」で負けます。ただし、ICCプロファイルをJPEGにリンクすると、音量の違いは認識できなくなります。私の測定は-JPEG 100％で行われました。また、低品質（目にはあまり目立たない違いがあります）では、比較、残念ながら、さらに悲しくなります。

一般的に、自分の目で確かめてください。

UPD一般に、結果は画像自体に大きく依存します。PNGはグラデーションとソリッドをより適切に圧縮しますが、写真の場合、JPEGはより適切な圧縮を提供します。彼らは言いますが（自分で信じるのは難しいですが）、大きな写真ではPNGがここでもリードしています-記事のスクリーンショットを変換する過程でチェックされただけです（PNG対JPEG-70％-1のゲインと半分回）。

Photoshopの後の生活」および/またはさらに絞る

多くの場合、PNGは通常、他のWeb形式ではサポートされていないため、一般的に不可欠であり、デザイナーやレイアウトデザイナーにどのような範囲が開かれるか... UPDさらに、フォーマットの詳細を考えると、Web上のデザイン要素については、これがおそらく最良のソリューションです。

グーグルとダウンロード-。最小数の設定で約1.5MBのプログラムを使用すると、圧縮されたPNGファイル（バッチを含む）を実行できます。

アイコンパック（ベルやホイッスルのない透明な背景の90ファイル）では、ボリュームの増加は平均して約10〜15％でした。もちろん、特に印象的ではありません。ただし、上記のサンプルファイルの場合、圧縮率は10％（透明度のない大きなポスター）から72％（半透明の長方形）の範囲でした。したがって、特にユーティリティの操作にはそれほど時間がかからないため、試してみる価値があります。

PNGOutに加えて、さらに多くのプログラムがあります詳細な概要今はやりたくないです。

OptiPNG-グラフィカルシェルがなく、コマンドライン。未確認のデータによると、圧縮率は低くなっています。 UPDしかし、そのユーザーはそうではないと主張しています。
Pngcrush-私はそれを自分で試したことがありません、彼らは「ファイルをすべてで最適化しようとしていますアクセス可能な方法」ですが、主なものは「どのように試すか」ではなく、「どのように最適化するか」です。
そして、ファイルからジャンクを単に一掃する多くのユーティリティ。

Adobe Fireworks

正直なところ、Adobe Fireworksは私にとって本当の発見でした：PNG-8、PNG-24、PNG-32 +たくさんの設定！

PNG-24とPNG-32私は詳細に検討しませんでした。私が理解している限り、彼らの用語では32-アルファチャネルあり、24-なし。予備的な見積もりによると、Photoshopはこのタスクによりよく対処します。

しかし、PNG-8は私の（そして私の同僚のほとんどの）固定観念を打ち破りました。結果のファイルはGIFよりもはるかに小さく、「アルファとインデックスの透明度の2つの方法で完全な透明度がサポートされます。PNG-24と比較した唯一の欠点はインデックスパレットですが、すべてニーズによって異なります。私の個人的な意見は PNG-8は、ほとんどの場合、GIFとPNG-24の両方を実行します.

AFでのPNGとGIFの比較。ただし、Fireworksはデフォルトでは通常のGIF-JPEGではうまく機能しません（設定で遊んでいませんでした）。しかし、Photoshopの結果と比較しても、違いはPNGに有利です。

そして、ここにすべての種類のPNG-8があります-このためには、AdobeFireworksをインストールする価値があります。

比較のために：同じファイルは、Photoshopの努力のおかげで、現在受信している450に対して3,188バイト、つまり6倍の重さがありました。

評決

私の意見では、GIFはそれ自体よりも長生きしています。現在、その存在は主に社会の慣性の問題です。 UPDただし、さまざまなアニメーションアメニティのセグメントは、GIFではまだすべてが早いです:)。

透明なデザイン要素の場合は、PNG-8を使用する必要があります（PNG-8パレットでは画像を失わずに保存するのに十分でない場合は、PNG-24を使用することはあまりありません）。

写真や複雑なグラフィックスの場合、JPEGはその強力な画像最適化機能により、引き続き優位に立っています。 PNG-8で十分な場合もありますが、以前と同様に、GIFでは、大胆な実験が成功の鍵となります。 UPDしかし、非常に大きな画像の場合、JPEGは依然として失われます。

UPD私は実際には専門家ではなく、「短い」という形容詞からも明らかなように、レビューはひざまずいて書かれています。多分オンではない最良の例。したがって、特に議論に積極的に参加してくれたすべての人に感謝します

著者から： 2017年3月の時点で、画像はWebコンテンツの65％以上を占めています。そして、それは当然のことです。画像は美しさを追加し、メッセージを伝え、ストーリーを伝え、サイトの訪問者とつながります。問題のもう1つの側面は、誤って使用すると、画像がWebサイトの速度低下やユーザーエクスペリエンスの低下の主な原因となることが多いことです。

Web上で画像を適切に使用することは、次の2つのことを意味します。

選択正しい形式画像;

画像の最適化。

この記事では、最初のポイントを取り上げます。特に、Webに最も適した画像形式と、これらの形式を使用する必要がある画像について説明します。

ただし、最初に、用語について簡単に説明します。

ラスターまたはベクター画像

中心部でビットマップピクセルの2次元グリッドがあります。各ピクセルには、色と透明度の値が格納されます。

ビットマップは適切にスケーリングされません。ビットマップを拡大すると、明瞭さと品質が失われます。 Webで一般的なラスター画像形式は、JPEG、JPG、GIF、およびPNGです。

以下は、リンゴを使用した2つのラスター画像（JPG）です。最初の画像は実物大です。 2つ目は、最初の画像の拡大部分を示しています。

フルサイズのビットマップの例。

ビットマップの拡大部分。

画像の拡大版では品質が低下することに注意してください。

ビットマップとは異なりベクターグラフィックス線、形状、ウェイポイントで構成されます。ベクター画像に関する情報はピクセル単位で保存されるのではなく、ピクセルとはまったく関係のない数学的描画命令に保存されます。 Alex Walkerは、Webで最も人気のあるベクター画像形式であるSVGの例を使用して、違いを非常に明確に説明しました。

「SVGは画像フォーマットではなく、画像レシピのようなものです。」 JPEGがマクドナルドのアップルパイのように見える理由（ただし、SVGはそうではありません）

画面解像度に依存しないことの1つの結果は、ベクター画像をコンテンツに合わせて拡大縮小できることです。画像は鮮明になり、網膜スクリーンに最適です。

小規模のSVGグラフィック。

拡大されたSVG画像の一部。

上記の両方の画像は単一のベクター画像の例ですが、2番目の画像は最初の画像の2倍以上のサイズです。品質の低下はありません。

品質の損失ありまたは損失なし（損失ありおよび損失なし）

非可逆と可逆の両方の用語は、メディアファイルを圧縮するための手法を指します。画像、オーディオ、ビデオ。

非可逆圧縮：「デジタルデータを元の100％に復元しません。非可逆方式は、圧縮率が高いという特徴があり、圧縮ファイルの重みが軽減されます。ただし、元のピクセル、音波、およびビデオフレームの一部は完全に削除されます。」 —PCMag.com百科事典

これが実際に意味することは、不可逆ファイルを圧縮すればするほど、ファイルは小さくなるということです。ファイルサイズを小さくすると、不可逆的に品質が低下します。非可逆圧縮では、小さなファイルサイズと品質のバランスを取る必要があります。

損失の多い画像形式に出くわすことがよくあります。これはJPEGです。

非可逆画像とは異なり、可逆圧縮ではすべてのデータが元の状態のまま保持されます。このような圧縮によって、ファイルの品質が低下することはありません。このため、ロスレスファイル形式は、多くの場合、損失のあるファイル形式よりも重要です。

Web上でロスレス画像形式を簡単に見つけることができます。これらはGIFとPNGです。

提供される情報は、選択に役立ちます最高のフォーマットコンテンツの画像。

以下で説明する最初の3つの画像形式（JPG、GIF、PNG）は、長い間Webサイトで使用されてきました。最後の2つの形式、SVGとwebPは完全に新しいものではなく、まだ人気がありません。ただし、レスポンシブで高速読み込みのWebサイトのニーズによく適合しており、人気が高まっています。

JPEG

JPEGまたはJPGは、Joint PhotographicExpertsGroupによって開発された不可逆形式です。 JPG画像は、Webサイトのすべてのコンテンツタイプのほぼ3％を占めています。この形式が非常に人気があるのはなぜですか。

JPG形式は数百万色を表示できるため、Web上で写真を表示するための理想的な候補になります。

Web開発における最新のトレンドとアプローチ

ウェブサイト構築でゼロから急速な専門家の成長のためのアルゴリズムを学ぶ

非可逆形式であるため、圧縮を使用してファイルサイズを大幅に減らすことができます。 JPGファイルには多くのレベルの圧縮があります。Web上の画像には約60％で十分ですが、75％を超えると画質が低下します。

インターネットを備えたすべてのデバイスはJPG形式をサポートしているため、インターネットでこの形式を簡単に使用できます。

JPGの注目すべき欠点の1つは、JPGファイルが透過性をサポートしていないことです。透明な背景を使用して背景色やページテクスチャの上に画像をオーバーレイする場合、JPG画像は機能しません。以下のオプションのいずれかを選択してください。

gif

GIFまたはGraphicsInterchangeFormatは、最大256色の8ビットロスレス形式です。色の制限により、GIFはさまざまな色の写真や画像を表示するのに適していません。

インターネットでのこの長期使用に影響を与えた要因：

256色の制限があるため、ファイルサイズは非常に小さくなっています。

透明性をサポートします。

アニメーションをサポートします。これにより、このフォーマットを使用して、アイコン、顔文字、バナーなどのループ画像を表示できます。

単色のシンプルな画像には適していますが、写真には適していません。

PNG

PNGまたはPortableNetworkGraphicsは、GIFの代替手段です。このフォーマットはW3Cによって開発されました。 GIFと同様に、この形式は可逆圧縮アルゴリズムを使用し、8ビットおよび24ビットのオプションを使用できます。どちらのオプションも透過性をサポートしています。ただし、24ビットPNG画像では、透明度はアルファチャネルだけでなく、赤、緑、青のチャネルでも機能します。したがって、GIFおよび8ビットPNG画像は完全に不透明または完全に透明にすることができますが、PNGでは各画像ピクセルが256レベルの透明度を提供します。

PNGの24ビットバージョンは、次の目的で使用できます。

透明度のレベルが異なるWeb画像。

複雑な写真とグラフィック;

頻繁に編集およびエクスポートする必要のあるグラフィック：lessless形式は品質を維持します。

GIFとは異なり、PNG形式はアニメーションをサポートしておらず、ファイルのサイズが非常に大きくなる可能性があります。

SVG

SVG（Scalable Vector Graphics）は、XMLベースのベクターファイルの一種です。このフォーマットは2001年に登場しましたが、Web開発者の間で人気を博したのはごく最近のことです。この遅れた愛の理由は、何年にもわたってブラウザでのSVGサポートが不十分だったことです。これを書いている時点で、SVGはすべての主要なブラウザーでサポートされていますが、違いやバグがないわけではありません。

SVGには、特にSVGがロゴ、マップ、アイコンなどの単純な画像に使用される場合に、Webに推奨される形式にする多くの機能があります。

SVG形式の利点

SVGは、特にWeb用に最適化され、gzipで圧縮されている場合、ビットマップよりも小さいことがよくあります。

フォーマットはスケーラブルであり、どの画面解像度でも明瞭になります。

SVGコードはHTMLに配置して、HTTPリクエストを保存できます。

SVGコードはCSSを介してカスタマイズできます。

SVG画像は、CSSとJSの両方を使用して、個々のパーツを含めてアニメーション化できます。これは非常に優れています。

ファイルサイズがわずかに大きくなるため、過度に複雑なSVG画像は避けてください。そして最後に、SVGは写真には適用できません。ここでは、JPGおよびwebP形式の方が適しています。

WebP

このフォーマットは2010年に登場しましたが、webPはまだ非常に新しいフォーマットであり、JPGやPNGほどよく知られていないと言っても間違いありません。ただし、Webはこの形式の血の中にあります。Web用に特別に設計されているため、非常に興味深いものになっています。

WebPはオープンソースの画像形式です。ソースコード Googleによって開発されました。主な機能：「WebPは、非可逆品質と可逆品質の両方で優れた圧縮を提供する最新のWeb画像形式です。可逆バージョンのWebP画像はPNGよりも26％小さくなっています。 webPの損失の多いバージョンは、同等のバージョンよりも25〜34％軽量です。 JPEG画像…ロスレスwebPは透過性をサポートします…22％の余分なバイトを犠牲にします。非可逆RGB圧縮が適用可能な場合、非可逆webPは透過性もサポートし、PNGの3分の1のファイルサイズを提供します。 —WebPサイト

webPの利点は、ファイルサイズを大きくすることなくJPGとPNGの利点を組み合わせていることです。

にこの瞬間フォーマットのサポートはかなり良いです：Blinkブラウザはリリース以来フォーマットをサポートしています、結局のところwebP- Googleの作成。サポートされていないブラウザとの下位互換性のために、つまり IE / Edge、Firefox、Safari、職人が回避策を考え出しました。

結論

この記事では、Webの画像形式を紹介し、Webに最も適した画像の種類について簡単に説明しました。

JPG、GIF、PNGは非常に人気のある形式であり、非常に長い間使用されてきました。 SVGとwebPは、より新しく、より興味深い代替手段です。 SVGはイラストやシンプルな画像に最適で、webPはすべてのJPGおよびPNGニッチに取って代わります。

開発でSVGとwebPをすでに使用しましたか？どんな困難がありましたか？顕著なパフォーマンスの向上を見たことがありますか？コメントを書いてください！

こんにちは、ブログサイトの読者の皆様。今日は、サイトに表示される画像に使用するのに適したラスターグラフィック形式についてお話したいと思います。

GIFアニメーションをサポートしていることで今人気のGif、フルカラー写真の挿入に最適なJpg、そしてもちろん、背景が透明で画像を作成できるPngを見ていきます。前述の形式の優れた代替品として機能します。また、半分のグラフィックと半分のテキストを読むことができます。

それらはすべて積極的に使用されていますが、画質が低下せず、重量が最小限になるように、特定のケースごとに最適なフォーマットを選択することが微妙です。からグラフィックを取得することをお勧めします無料サービス似ていると他の同様のもので、後で著作権侵害の問題がないように。

GIF、Japeg、PNGに直面したWeb用のラスターグラフィック

現在、写真、アイコン、または写真がまったくない個々のWebページを想像することは非常に困難です。ちなみに、グラフィックを表示できる最初のブラウザはMosaic（mosaic）で、これはの出現とほぼ同時に登場しました。

さらに、前述したように、すべての画像形式がサイトへの追加に適しているわけではありませんが、特定の最大値のみが適しています このシャープ化のために-Gif、Png、Jpg。 Webページに追加する画像の種類に応じて、前述の形式の1つを選択する必要があります。これは、いわゆるラスターグラフィックスに属します。

それ自体は、紙やモニター上の画像が、ピクセル（カラーポイント）と呼ばれるいわゆる単一の要素から形成されることを意味します。ラスターグラフィックスに関連するすべての形式のすべての画像には、いくつかのプロパティがあります。

画像のサイズは、次のような概念によって決定されます。許可、これは水平方向と垂直方向、たとえば300 x 200です。ただし、カメラメーカー（12メガピクセルなど）など、画像の総ピクセル数について話し合うこともあります。

Webに関しては、ラスターイメージの物理的なサイズは、ユーザーがWebページを表示しているデバイスのピクセル（画面の粒子）のサイズに大きく依存する可能性があります。画像はまた、次のような概念によって特徴付けられます色数その中で使用されます。たとえば、Gifの場合、1バイトの情報で指定される256色のみが使用されます。

さて、これに加えて、これらのフォーマットはさまざまなものを使用できます カラーモデル、すべての可能な色合いが形成される助けを借りて。あなたと一緒に書くことを検討したとき、RGBモデルを形成する原理を詳細に検討しました。

ラスターグラフィックスの主な欠点の1つは、Webで使用されているGif、Png、およびJpg形式であっても、結果の画像のサイズが大きいことです。当然、結果の画像を縮小するためにさまざまな方法が使用されます。 圧縮アルゴリズム、品質の低下（非可逆圧縮）の有無にかかわらず機能します。

これはすべて、オーディオ圧縮アルゴリズムの動作原理と非常によく似ています。MP3は損失を伴って圧縮し、まず、人間の耳に認識されない可能性が最も高い遷移が削除されます。ラスターグラフィックスの世界におけるそのようなアナロジーは、 jpg形式 、情報が圧縮されている場所 損失あり。同時に、人の視覚の可能性が考慮され、まず、特に目立たない詳細が削除されます。

ただし、ロスレス画像圧縮アルゴリズム（BMP、Gif、Png）もあります。 BMPはほとんどの場合非圧縮画像ですが、 GifとPngはロスレス圧縮されています反復的で冗長な情報を削除することによって（アーカイブのようなものになりますが、ラスターグラフィックスの機能を考慮に入れます）。

ラスターグラフィックス（たとえば、同じフォトショップまたはそれ）で動作できるグラフィックエディタはたくさんありますが、これには特にこれに焦点を当てたエディタを使用する必要があります。そうしないと、最も最適化された画像を取得できなくなります。ホスティングサーバーがユーザーのブラウザに読み込まれるときに、不要な負荷がかからないようにしてください。

GIF形式-サイトのデザイン要素とアニメーション

現在、ほとんどすべてのブラウザは、Webで使用される3つの主要なラスターグラフィック形式（Gif、Png、およびJpg）をサポートしています。歴史的に、GIFが最初に登場し、それを利用して、最初のブラウザで、主にいわゆるGIFアニメーションで表現された画像やメディア情報を追加および表示できるようになりました。

略語Gifは、グラフィックス交換フォーマット（グラフィックス交換フォーマット）の略です。のように発音 gif、しかし、標準の開発者はそれをgifと呼ぶのが正しいと信じていましたが、ロシア語の解釈では別の名前が定着しました。

なぜならそれはずっと前に開発されたもので、当時のほとんどのユーザーは、それを作成するときに、結果として得られる画像のサイズを最大限に縮小することに焦点を当てていました（これについては、またはに関する記事で書きました）。

この点で、Gifには次のもので構成されるパレットが含まれる場合があります。 たった256色（インデックスパレットとも呼ばれます）。それらの。この形式に変換された画像には、常に256を超える色合いが含まれず、他のすべての色は混合に基づいて作成されます（ベースパレットから隣接するピクセルは、離れた場所にいる人間の目がそれらを認識できるように巧妙に選択されます。この場所に必要な色）。

しかし、残念ながら、実際には、フルカラー写真をGIFに変換すると、多くのアーティファクトが発生し（この混合が非常に多いため）、写真をWebに投稿することはできません。したがって、サイトページにフルカラーの写真や写真を表示するためには使用されません（これには、JpgまたはPngが最もよく選択されます）。

GIFアニメーションとインターネットでのその使用

このような重大な欠点があるため、Gifはずっと前に忘却に陥っていたはずですが、それでもすべての生物よりも生き生きとしており、この形式の画像はWebサイトのページによく見られます。

ここでの要点は GIF形式はアニメーションをサポートしています（Webで使用される唯一のもの）。インターネット上で多数見つけることができるすべての種類のアニメーションおよびアバター（を含む）には、Gif拡張機能があります。

確かに、しばらくの間、代替のMng形式がすでに開発されており、Pngにアニメーションの可能性が追加されていますが、その開発と配布はそれほど速くはありません。したがって、フラッシュテクノロジーを考慮しない場合、Web上のすべてのアニメーションはGifとフラッシュに基づいて作成されます。

このアニメーションの本質は、GIFコンテナには1つの画像ではなく、一度に複数の画像があり、これらの画像が互いに置き換わるまでの時間が指定されているという事実にあります。この場合、最後のフレームの後に最初のフレームが再開したときにアニメーションをループさせることができます。

Gifアニメーションを作成できる専用のエディターがあります。主なものは、特定のサイズの必要な数の画像を作成し、それらをタイムラインに配置して、それらを変更する間隔を設定することです。

その結果、Webページで見慣れているのと同じ漫画の効果が得られます。時には、アニメーションのバナー（方法について読む）、絵文字、アバターから目が眩むことさえあります。 GIFアニメーションの例は、私のプロジェクトのページ""のゴブリンです。

GIFは透明な背景をサポートします（ほぼ）

ただし、この形式の機能はアニメーションだけではありません。また、生成された画像の透明度を生成する基本的な方法をサポートする場合もあります。 Gifで可能な256色の1つが透明に設定され、 Webページの背景が透けて見えますこの画像が配置される場所。

しかし、問題は、この形式の画像のどのピクセルでも、透明または不透明の2つの値しか使用できないことです（半透明、4分の1透明などの中間オプションの可能性のない2つの極端な状態）。それらの。アルファチャネル（Pngで使用）の概念について、 透明GIFスピーチはありません。このため、スムーズに変化する透明度を表示するのは困難です。

しかし、それでも透明なGifがWebで使用されています。たとえば、Webページで使用されるさまざまなマーカーは、多くの場合、この形式で保存されます。マーカーの周囲の背景が透明になり、Webページの背景が透けて見えます。たとえば、背景が灰色のマーカーは次のようになります。

そして、これは、GIFとして保存されたときに灰色の背景が透明な色に置き換えられたときに同じマーカーがどのように見えるかです。

透明度が低下した滑らかなエッジを形成するために GIF、1つのトリックに行きます。いずれかでグラフィックエディタこの形式で画像を作成する場合、いわゆるMATEカラーを指定できます（それ以外の場合は、デフォルトのカラー（通常は白）を使用します）。

MATEカラーは、作成するGIFの領域に混合されます 透明度が低下した滑らかなエッジ、ただし、これはすべて、指定したMATEに一致するWebページの背景でのみ見栄えがします。しかし、別の色合いの上に、この写真は非常に不健康に見えます。

Gif形式を使用するのが理にかなっているWebグラフィックはどれですか？

前述したように、この形式では、画像は失われることなく圧縮（変換）されますが、元の画像が8ビット（カラーエンコーディングに1バイトのみが割り当てられている）の場合に限ります。 256色が含まれています。ソースがフルカラーの場合、一部の色合いが失われるため、保存またはGifに変換するときに品質が低下します。

Gifaの圧縮（変換）アルゴリズムは、写真のサイズを最適化するように機能します 垂直方向の色の変化（グラデーション）。それらの。線の色があまり変わらない画像を圧縮するために使用するのは理にかなっています。

しかし、水平または斜めのグラデーションの写真をGifに変換すると、最終的な画像は非常によくなる可能性があります。ビッグサイズたとえば、すべてを同じPngで比較しました。さて、これ以外にも不快なアーティファクトが出てくるかもしれません。

さらに、この圧縮アルゴリズムはかつて特許を取得していたため、代替のPng 8で集中的な作業が開始されましたが、現時点ではGifの特許はすでに失効しています。その結果、PNGはGIFをはるかに上回り、ウェブマスターの間で人気を博し続けています。

Jpg（JPEG）-軽量のフルカラー画像

Jpgは、フルカラー写真を圧縮して保存するように設計されています。これは、実際にはJpeg-Joint PhotographicExpertsGroupの略語であるAssociationofAmericanPhotographersが所有しています。この協会自体はこれがオープンフォーマットであると言っていますが。

上で述べたように、品質を損なうことなく画像を圧縮します。画像全体が8x8ピクセルの正方形に分割され、圧縮アルゴリズムが機能し始めます。これにより、これらの単純な正方形とは異なる単純な形状がグループ化されます。人間の目では認識できない色の違いはすべて、Jpg画像から削除されます。

Japegの長所と短所

まだ肉眼では見えない情報の一部を削除することで、Jpegは時々許可します フルカラー画像を10倍に圧縮品質を明らかに損なうことなく。

ただし、その一方で、最高品質を選択した場合でも、元の写真とまったく同じ品質の写真をこの形式で保存することはできません。 損失はにバインドされています、ただし、拡大せずに常に目に見えるとは限りません。

非常に高品質の写真を何十回も続けて最高品質でJPEGに保存することで、自分で確認できます。だからそれは良いです Jpgに再保存しないでください同じ形式のソース-アーティファクトの蓄積とオーバーラップにより、品質が大幅に低下します。したがって、未完成の画像をJPEGで保存してから編集を続けると、品質が大幅に低下します。

このような嘲笑の例を次に示します（Jepeg形式で数回再保存するだけで、涙がなければ写真を見ることができません）。

しかし、これらの欠点にもかかわらず jpegは非常に人気があります特にデジタル写真の登場以来。その主な利点は、フルカラー画像の高速でリソースを大量に消費する非常に強力な圧縮の可能性です。確かに、このラスターグラフィックス形式をフルカラーと呼ぶのは難しいです。 RGBパレット全体を完全にカバーしているわけではありませんが、これはマイナーな欠点に起因する可能性があります。

Jpg形式で保存するのに最適な画像はどれですか？

Jpgは写真の保存に最適です 明るさとコントラストのスムーズな移行、しかし、シャープなコントラスト遷移を持つ図面、テキスト、その他の写真などを保存する場合、それは非常に悪いことです。その場合、Pngでロスレス圧縮を使用するのが最善のオプションです。

テキストのスクリーンショットがどのように見苦しいかを見る JPEG形式（PNG形式では同じでさらに小さい重みがありますが、画像は元の画像とまったく区別できません）：

Jpg（JPEG）には、前述したように、次の機能があります。 セット品質圧縮率を調整して得られる画像。たとえば、空が多い写真を保存する場合は、この空で目立つアーティファクトを回避するために、Jpegの品質（圧縮率）を最大（最小圧縮）に近づける必要があります。

また、さまざまな色の詳細を多く含む写真を保存する場合、目立ったアーティファクトを恐れることなく、品質を下げる（圧縮率を上げる）ことができます。

Jpg（JPEG）で保存する場合、画像全体が1辺が8ピクセルの正方形に分割されることを説明しました。したがって、結果の写真のサイズを選択する機会がある場合は、 8の倍数を取る、なぜならこの場合、アーティファクトがわずかに少なくなります。これは、細い線などの写真で特に目立ちます。

Png-GifとJpegの代替、およびPng32の透明な背景

当初、Pngは当時の独自のGifの代替として開発されました（外部からの誰もそれを開発することは許可されていませんでした）。略語は「ポータブルネットワークグラフィックス」の略で、元々は正確にシャープにされていました ウェブ上で使用するため。このラスターグラフィックス形式は完全にオープンであり、W3CWebサイトで説明されています。

彼が 可逆圧縮形式、つまり、未完成の画像をPngに安全に保存し、Jpgの場合のように、追加のアーティファクトを取得することを恐れずに編集を続けることができます。

Png8とPng24は、GifとJpegの完全な代替品です。

PNG形式には3つのバリエーションがあり、それぞれが独自のタスクを実行するように設計されています。最初の2つは元々既存のGIFおよびJapeg形式の代替として作成され、3つ目は以前にはなかった何かをWebグラフィックにもたらしました。しかし、まず最初に。

PNG 8-図8は、色のビット数を示し、PNG 8で写真を保存するときに、上記のGifと同様に、256色のみが使用されることを示しています。

それらの。これはGIFの完全な代替として設計されており、これら2つのビットマップグラフィック形式での画像圧縮の結果はほぼ同じになります。 GIFのように-ここに 透明性がサポートされています、ただしアルファチャネル付き。

PNG 24-数字の24は、この形式の写真の各ピクセルに、それぞれ8ビット（1バイト）の3つのカラーチャネルが割り当てられ、フルカラーの画像形成を実現することを意味します。それか。 PNG24の助けを借りてあなたはすることができます 歪みのない色を送信します。 Jpgでさえこれを100パーセント行うことはできません。

元の画像をPng24に保存すると、まったく同じ写真が得られますが、そのサイズはJpegを使用した場合よりも大きくなります。ただし、これが常に当てはまるとは限りません。シャープなトランジションのある大きな画像の場合、この形式は、許容可能な品質のJeepegよりも優れた結果を表示できます。

それらの。先ほど申し上げたように、通常の写真にはJpegが最適ですが、テキスト付きの画像や品質が低下しない画像には、Png24が不可欠です。、私が記事で使用している、PNG8または24は私にとって最良の解決策のようです。

たとえば、Jpegに保存されたすぐ上に表示されるテキストを含む同じスクリーンショット（ただし、質の悪い可能性のあるアーティファクトを強調表示するには）Pngでは次のようになります。

しかし、私は通常、Jeepegの各記事の冒頭にフルカラーの写真を保存します。品質/サイズの比率は、まさにそのようなオプションを支持しています。あるとだけ言わせてください違う方法画像をPng形式に圧縮すると、私の意見では、最高のアルゴリズムの1つが使用されます。オンラインサービス PunyPng。

PNG32-アルファチャネルによる完全な透明性

このラスターグラフィックス形式では、1ピクセルに最大4バイトの情報を使用できることを類推して理解していると思います。

3つはPNG24との類推によるフルカラー画像の形成に関与しますが、4番目のバイトはアルファチャネルの形成に別々に割り当てられます。これにより、PNG32を使用して取得できます。 背景が透明な画像.

その中で、MATEカラーなしで透明度の変更を指定できます。これは、そのような画像が、背景のあるすべてのWebページで同じように見栄えがすることを意味します。そのような画像の例は、私のブログのヘッダーのロゴです。

おそらくそれは明らかです PNG 32は単に不可欠であり、その機能の点で類似物はありません。。ちなみに、アルファチャネルはPNG 8でも使用できますが、残念ながら、すべてのラスターグラフィックエディタでこれを使用できるわけではありません。たとえば、Photoshopはこれを実行できませんが、FireworksまたはGimpは実行できます。

さらに、アルファチャネルを備えたPNG 32および8には、バージョン6以下以降、IEブラウザで完全にサポートされていないという問題があり、透明な背景の代わりに灰色が混合され、Png8はそこのアルファチャンネルはまったく表示されません。確かに、ユーザーにはそのような古風なブラウザはほとんど残っていませんが、それでもなおです。

頑張って！ブログページサイトでお会いしましょう

送信

リンク

ピンする

最高の画像フォーマットは何ですか？ 画像に選択する形式-jpeg、png、またはgif

PNG