サイトの画像フォーマット:選択フォーマットの課題

StackOverflow https://stackoverflow.com/questions/392635

  •  23-08-2019
  •  | 
  •  

質問

を設計する場合、どんな考えの画像を使用するフォーマットの特定のタスク?

私は常に自分がジレンマにしようとした場合に何を使用するフォーマットの特定のタスクのように---例えば、 べきは使用します。jpgすべての丸いのか？ または、 がやいている方もいるかもしれません使用。png?

例えば、 アマゾンウェブサイトは、利用 .jpg 商品画像例), .gif この透明ピクセル(例） .png そのCSS Sprites(例)

一方で、 Play.com を使用 .gif そのサイトのロゴ(例が使用 .jpg そのwebサイト製品(アマゾン)(例 したのはその主要なページがもってい .pngsです。

ではどのような形態のどちらを使うべき私のサイト?となどによって異なります。って。

[更新]

感謝 CruellO のための このリンク を説明するための違いも ダスティ を理由を利用します。

役に立ちましたか？

解決

通報用の写真です。私の見通報とテキストそのものをいかな？テキストがテキスト、そうでない利用PNG"となります。

いない場合は写真を撮影がしたいグラフィックでは、PNG"となります。PNGはほとんどいつも以上に相当gifのいく品質のようなJPEGファイルです。PNGと同等のファイルの方がJPEGファイルは、通常、きないと仮定でのフォトリアル).合もございますので、あこがることが望ましい。

PNGはできる8ビットの透明性は、そのままに支えIE、その継続を拒否するのを修正その い 支援シングルビットにおける透明性の8ビット画像と同じgifなど）を分かっています。また多くのhacksを8ビットの透明性を作ります。ません。

概要:

  • 写真→jpg
  • !写真→png

他のヒント

を認識しておく必要があり少数の主な要因は...

最初の二種類があり圧縮： ロスレス や データの損失.

ロスレス この画像は小さいものない不利益の品質です。 データの損失 の画像は(もの)小さいのだが、不利益の品質です。ま保存した画像にデータの損失の形式以外の画像の品質が次第に増悪する。

また異なる色の深さ(パレット): インデックスカラー や 直接色.

と 物価連動 この画像では店舗数に限の色を(通常は256)から選ばれる画像の著者、 直接 これまで店舗数多くの色をしていない選ばれた。

BMP -設計/物価連動の直接

市中心にあるこの形式です。で囲（画像データでは、保存もしていない商品については、圧縮、意味として保存してBMPの結果に非常に大きなファイルのサイズです。までパレットの両方を指直接、その小さなまる慰めなのです。ファイルのサイズが必要以上に大変なんでこの形式です。

適しているかについて何もないですね。いBMPに優れ、っていうことによって、よりよくるようになりました。

BMP vs GIF

GIF -設計/物価連動のみ

GIFロスレス圧縮方式を採用し、画像を保存でき間なく他のデータです。ファイルのサイズによりBMP、良好な圧縮を実際に使用が可能であり、これまでのようにのみの店舗はインデックスパレットで確認できます。することができ、最大で256色のファイルです。ということかなり小額のものです。

GIF画像でもアニメとして透明性を有する。

適しているかについてロゴマーク、ライン図面の簡単な画像が必要です。にのみ用います。

GIF vs JPEG

JPEG -データの損失ダイレクト

通報画像ることによって、詳細な写真画像を得ることを除去し、情報を人間の目になります。結果としてこのデータの損失形式で保存し、同じファイル間のよりデータが失われます。このパレットの色ではの写真が、非可逆圧縮手段が悪いのではなくロゴや線画:ならファジーにそのような画像でも大きなファイルのサイズに比べGif!

適しているかについて写真を撮ります。また、用意致しました。

JPEG vs GIF

PNG-8 -設計/物価連動

PNGは新しい形式、PNG-8(インデックス付き版ではPNG)は本当に良い代替Gif.しかし、悲しこれは、いくつかの欠点:まずれに対応できなアニメのようなGIFできるもので、Firefoxのよう支援をすることとは異なり、アニメーションGIFには対応ブラウザ）検討することを意図していても支援課題との古いブラウザのようなIE6.第三に、重要なソフトウェアのようにPhotoshopは非常に貧しいの実施の形式です。(気にすご覧になるには、Adobe!) PNG-8で店256色のように、Gif.

適しているかについて主なものとPNG-8はよりGifは支援のためのアルファ透明性を有する。

PNG-8 vs GIF

重要な注意： PhotoshopなΑ透過PNG-8ファイルです。(気、Photoshop!) がに変換する方法がありPhotoshop PNG-24PNG-8ファイルがその透明性があります。る方法は、どのようなものがあり PNGQuant, するためには下のように保存ファイル 花火.

PNG-24 -ロスレス直接

PNG-24大となるロスレス符号化の直接色(千色のように、JPEG).このようにBMPこの点、PNG実際に圧縮画像、その結果としてのくらい小さいファイルです。残念ながらPNG-24ファイルが上手く通報,Gif、PNG-8sでいる必要がありました。

もPNG-24sせ千色が圧縮しないの置き換えを目的としてJPEGます。写真として保存PNG-24る少なくとも5倍以上のJPEG画像は、非常に少ない改善が見えます。もちろん、これが望ましい結果だつのファイルサイズは、取得したい最高品質の画像できます。)

のようにPNG-8,PNG-24に対応しアルファ-透明性です。

思い立ちます♪

PNG するために使用される:

  • 必要な透明度は1ビットまたはアルファ透明)
  • ロスレス圧縮方式を広く募集するとともに行している図表やロゴ、またはコンピューターで作ったイメージ）

JPEG するために使用される:

  • 可逆圧縮などの写真)
  • フルカラーが必要

GIF べき時：

  • PNGはない昔のソフトウェアのブラウザ
  • アニメーションに必要な

も神話逆に、PNG能GIF多くの側面がある。PNGできる全ての画像モードのGIFのほかにアニメーション、利用時、同じ画像モードでは、PNGのいい圧縮により優れたDEFLATEアルゴリズムに比べてLZW.PNGはもできる追加モードGIFできないなど、24ビットカラー、およびアルファ透明性が、この場合の問題。アルファの透明性の互換性の問題IE6が記録されていhacks存在し得ます。

PNGモード(このはただの小さいサブセット)

  • パレット色の2 256色（GIF）
  • パレット色の2 256色透明色（GIF）
  • True color(24ビットカラー)
  • 真の色とアルファチャンネル(24ビットカラー+8ビットアルファ透明)

最適な圧縮方式を採用し、PNG、webを利用パレットモードになります。だPNGファイルがシナリオによっては相当のGIFファイル、そしてだを省き、PNG24ビットカラーのGIFパレットモードでは、GIFは、常にパレットモード)になります。試しに変換するパレットモードです。

ごPNGファイルの透明性がなくIE6をごGIFファイルや清書が内容的には含まれていをご利用の24ビットカラー+α透過PNGおよびパレットモードと透明色とGIFなどでお送りください。まく変換しますPNG入palettedカラーモードに透明なカラーです。

PNGにも他のモードなどのパレットの色とアルファの透明性のパレットで確認できます。モードに、どのように使用できませんPhotoshopの出番です。

を見てみようにこのサイト http://www.killersites.com/articles_2005/theory/imagesInWebPages.jsp

うかを説明する時に使用する

の場合の保存又は提多数の画像の新しい Google WebP形式 あと25%以PNG/なっています。ではないことに注意してくださいすべてのブラウザのが現状です。何度でも利用することができる。このた2010年後のこの質問が掲載されました。

JPEGファイル形式

  1. 大画像が必要なときのサイズを小さく
  2. 良いオプションのための写真
  3. 悪いロゴマーク、ラインアート、幅広い地平の色

GIFファイル形式

  1. 大のためのアニメの影響
  2. Niceオプションのためのクリップアート、グラフィック、画像を使用する最小限の色彩と緻密なライン
  3. 良いオプションでシンプルなロゴとブロックの色

PNGファイル形式

  1. ロスレス
  2. 優れた選択が透明性が必
  3. 良いオプションのためのロゴをラインアート
  4. 対応していないもの

見ることができるインフォグラフィックのためのより詳細な情報 画像ファイルの種類：するために使用されJPEG、GIF&PNG

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top