ウェブ画像形式としてPNG、JPG、GIFを選択して使用する方法

ウェブ画像形式として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 の透明度を処理するとグレーで表示されることに注意してください。関連する例については、 sitepointを参照してください。

一般的に、PNG-8 として保存された画像は、同じ品質の GIF よりも小さくなり、完全に透明な画像の場合は現在 PNG-24 のみを使用できます。ただし、画像を PNG-8 で保存して GIF と比較する場合は注意してください。法則が常に正しいとは限らないためです。

画像

JPG は GIF や PNG よりも多くの色を表示でき、圧縮率も高いため、デジタル写真の保存に最適です。ただし、JPG は非可逆圧縮であるため、画像を変更するたびにピクセルの歪みが生じることに注意してください。

上記の概要を読んだ後、どの画像を保存するのにどの形式を使用するかについて、大まかな理解が得られるはずです。要約すると、次のようになります。

要点:小さな画像や基本的な Web ページ要素 (ボタンなど) の場合は、PNG-8 または GIF を検討してください。写真の場合は、JPG を検討してください。

<<:  Vue コンポーネントの切り替え、動的コ​​ンポーネント、コンポーネントのキャッシュについて

>>:  CSS を使用して要素のスクロールバーを非表示にするサンプルコード

推薦する

Vue の要素カレンダー コンポーネントを使用したサンプル コード

まず効果図を見てみましょう: 完全なコードは添付されています <テンプレート> <...

MySQL 5.7.18のインストール方法とMySQLサービスの起動手順の詳細な説明

MySQL は非常に強力なリレーショナル データベースです。しかし、初心者の中には、インストールや設...

HTML ファイルにファイルの内容を含める方法の概要

フォーラムでは、ネットユーザーから「HTML ファイル内の別の HTML ファイルの内容を読み取るこ...

Docker ベースのよく使われる CentOS7 イメージの概要

目次1 Dockerをインストールする2 国内ミラーソースの設定3 中国語環境基本版Centos7イ...

MySQL フルテキスト検索の中国語ソリューションとサンプルコード

MySQL 全文検索中国語ソリューション最近、会社のプロジェクトで、データベースで中国語を検索する機...

ウェブページの広告デザインにおけるウェブデザインの寸法とルール

1. 800*600 未満の場合、Web ページの幅が 778 以内であれば、水平スクロール バーは...

純粋なCSSを使用してスクロールシャドウ効果を実現します

端的に言うと、スクロール可能な要素には非常によくある状況があります。通常、スクロールすると、要素が現...

IE9 のネイティブ ページ互換性の問題に対する解決策についての簡単な説明

序文最近、クライアントのネイティブページを引き継ぎました。顧客は、ページが IE9 以降のバージョン...

MySQLを閉じることができない問題を解決する方法

mysql が閉じない場合の解決策:コンピュータのタスクバーを右クリックしてタスクマネージャーを開き...

Vueフィルターの詳細な説明

<本文> <div id="ルート"> <h2&...

MySQL マルチテーブルクエリの詳細な説明

よく食べて十分に休息を取るというのは簡単なことのように思えますが、実際に実行するのはそれほど簡単では...

CSS でより美しいリンクプロンプト効果をカスタマイズする方法

提案: コードをできるだけ手書きすると、学習の効率と深さを効果的に向上できます。デフォルトでは、&l...

MySQL 圧縮パッケージ版 zip インストール設定方法

圧縮版の記事ではデータの初期化がされていないなどいくつか問題があったため、Windows にインスト...

浮遊する雲のアニメーションを実現するCSS3

操作効果 html <ヘッド> <メタ文字セット='UTF-8'&...

Vue が DingTalk の出勤カレンダーを実装

この記事では、DingTalkの勤怠カレンダーを実装するためのVueの具体的なコードを参考までに共有...