Web画像フォーマットPNG、JPG、GIFの選び方・使い方
では、GIF、PNG、JPGのうち、どの形式を候補として選べばいいのか、どの画像形式なら画像は小さくなるけど画質はよくなるのか。
1. 画像フォーマット
GIF
GIFは、アニメーションをサポートし、またロスレス画像フォーマットであるため、画像を修正しても品質が損なわれないという点で優れている。さらに、GIFは半透明(完全な透明度または完全な不透明度)をサポートしています。
Googleによると、GIFは非常に小さい画像やシンプルな画像(10×10以下、3色以下)に適しているとのことです。
PNG
まず、PNGには PNG-8 と トゥルーカラーPNG (PNG-24またはPNG-32)です。そうすると、GIFに対するPNGの最大のメリットは
- 通常、サイズが小さい
- アルファ(完全透過)対応
しかし、PNGはアニメーションに対応していないことが分かっています。
また、IE6ではPNG-8には対応できますが、PNG-24の透明度を扱うとグレーアウトしてしまうので注意してください。例として サイトポイント .
通常、画像をPNG-8で保存すると、同じ品質でGIFよりもサイズが小さくなり、完全透過画像ではPNG-24しか使えなくなりました。法則は常に正しいとは限らないからです。
JPG
JPGはGIF、PNGよりもはるかに多くの色を表示することができ、非常によく圧縮されているので、JPGはデジタル写真の保存に最適です。しかし、歪み圧縮であるため、画像を修正するたびにピクセルの歪みが発生することに注意してください。
どの画像をどのフォーマットで保存すればいいのか、よく理解できたはずです。簡単に言うと
<スパン 一文で言うと 小さな画像や基本的なWeb要素(ボタンなど)には、PNG-8またはGIFをご検討ください。写真には、JPGを検討してください。
関連
-
html フォーム入力で無効化されたソリューションを使用した後、フォームの値を取得することができない
-
htmlタグのネストルールの紹介
-
入力ボックススタイル変更概要のtype="file "について
-
ハイパーリンク付きの美しいチェックボックスを多くのコードなしでシンプルにカスタマイズ
-
HTML中国語文字エンコーディング標準紹介
-
HTMLにおけるbaseタグの使い方を説明します。
-
IEタグLIテキスト改行不具合について
-
form ファイルをアップロードする際のenctypeフィールドの用途は何ですか?
-
IframeとFRAMEの違いの分析
-
iframeページ内で互いのjs関数を呼び出すためにjsを使用する
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン