ホームページ ウェブフロントエンド CSSチュートリアル HTMLページにおける画像形式の選択についての私の意見_体験交流

HTMLページにおける画像形式の選択についての私の意見_体験交流

May 16, 2016 pm 12:05 PM
ページ

今日、学生から「ページ内で GIF 形式が使用されているのですが、歪みが大きすぎます。どうすればよいですか?」と質問されました。この問題は比較的単純で、JPG を使用するだけです。ページで一般的に使用される画像形式は、GIF、JPG、PNG の 3 つです。では、これら 3 つの形式の使用をどのように選択すればよいのでしょうか?私の経験に基づいて、これら 3 つのフォーマットの使用についての私の意見をいくつか話しましょう。

まず、いくつかの形式のより正式な説明を見てみましょう (注: 以下の内容は Baidu Knows からのものです):

GIF は Graphics Interchange 形式、GIF 画像を意味します。拡張子は gif です。すべてのグラフィック ブラウザが GIF 形式をサポートするようになりましたが、一部のグラフィック ブラウザは GIF 形式のみを認識します。 GIF はインデックス付きカラー形式です。色の数が少ない場合、生成されるファイルは非常に小さくなります。主な利点は次のとおりです:

GIF 形式は背景の透明度をサポートしています。 GIF 画像の背景色が透明に設定されている場合、ブラウザの背景と結合されて非長方形の画像が生成されます。
GIF 形式はアニメーションをサポートしています。 Flash アニメーションが登場するまで、Web ページ上のアニメーションの形式は GIF アニメーションのみであったと言えます。 GIF 形式では、単一フレームの画像を結合し、各フレームを順番に再生してアニメーションにすることができます。すべてのグラフィック ブラウザが GIF アニメーションをサポートしているわけではありませんが、最新のグラフィック ブラウザはすでに GIF アニメーションをサポートしています。
GIF 形式はグラフィック プログレッションをサポートしています。プログレッシブとは画面上に徐々に映像が現れることで、プログレッシブ映像はノンプログレッシブ映像よりも早く画面に表示されるため、映像の概要を早く知ることができます。
GIF 形式は可逆圧縮をサポートしています。可逆圧縮は、画像の詳細を失わずに画像を圧縮する効果的な方法です。GIF 形式は可逆圧縮を使用するため、線、アイコン、描画に適しています。
GIF 形式の欠点も非常に明らかです。インデックス カラーは歴史の遺物です。DOS の古いゲームでは、ほぼ例外なくインデックス カラーが使用されています。この形式はずっと前に廃止されるべきでした。ただし、帯域幅の制限により、GIF は DOS 時代からインターネット時代にかけて普及しました。インデックス付きカラー形式 GIF の最大の欠点は、色数が 256 色しかないことです。これは明らかに写真品質の画像には十分ではありません。

JPEG は Joint Photograhic Experts Group (Joint Photographic Experts Group) の略で、JPG と表記されることが多く、JPG 画像の拡張子は jpg です。

JPG の主な利点は、数百万色をサポートできるため、写真の表現に使用できることです。さらに、JPG 画像はより効率的な非可逆圧縮アルゴリズムを使用しているため、ファイル長が小さくなり、ダウンロード時間が短くなります。非可逆圧縮では、ファイル サイズを削減するために、画像の一部の詳細が失われます。圧縮率は非常に高く、特別な JPG 圧縮ツールを使用すると、圧縮率は 180:1 に達し、ブラウジングの観点から画質をあまり損なうことなく、ネットワーク送信やディスク交換ファイルを非常に容易にします。 JPG は、線画ほど写真の細部の損失が目立たないため、GIF よりも写真に適しています。さらに、JPG は写真の圧縮率が高く、最終的な品質が高くなります。

しかし、長期的には、帯域幅の継続的な改善とストレージメディアの開発により、非可逆圧縮は画像に回復不可能な損傷を与えるため、JPG も画像フォーマットとして廃止されるはずです。したがって、圧縮された JPG 画像は一般に印刷には適していないため、重要な画像をバックアップする場合には JPG を使用しないことをお勧めします。また、JPG は GIF 画像ほど柔軟ではなく、グラフィックのグラデーション、背景の透明度、アニメーションをサポートしていません。

PNG は 1990 年代半ばに開発された画像ファイルの保存形式で、その目的は、GIF および TIFF ファイル形式を置き換えるとともに、GIF ファイル形式にはないいくつかの機能を追加することです。ポータブル ネットワーク グラフィック フォーマット (PNG) の名前は、非公式の「PNG's Not GIF」に由来しており、「ピン」と発音されるビットマップ ファイル ストレージ フォーマットです。 PNG を使用してグレースケール画像を保存する場合、グレースケール画像の深度は最大 16 ビット、カラー画像を保存する場合、カラー画像の深度は最大 48 ビット、さらに最大 16 ビットの画像も保存できます。アルファチャンネルデータ。 PNG は、LZ77 から派生した可逆データ圧縮アルゴリズムを使用します。

PNG ファイル形式は、GIF ファイル形式の次の機能を保持しています。

カラー画像は、カラー ルックアップ テーブルまたはパレットを使用して 256 色をサポートできます。
ストリーミング読み書き性能(ストリーミング性):画像ファイル形式のため、画像データの連続的な読み書きが可能であり、通信中に画像を生成・表示する場合に非常に適しています。
プログレッシブ表示:通信回線上で画像ファイルを送信しながら端末に画像ファイルを表示し、全体の輪郭が表示された後、徐々に画像の詳細が表示される機能です。画像を低解像度で表示し、徐々に解像度を上げます。
透明度 (透明度): この機能は、画像の特定の部分を表示しないようにし、特徴的な画像を作成するために使用されます。
補助情報 (補助情報): この機能を使用して、いくつかのテキスト注釈情報を画像ファイルに保存できます。
コンピュータのソフトウェアやハードウェア環境に依存しません。
可逆圧縮を使用します。
PNG ファイル形式には、GIF ファイル形式にはない次の機能が追加されます。

ピクセルあたり 48 ビットのトゥルー カラー画像。
各ピクセルは 16 ビットのグレースケール画像です。
アルファ チャネルは、グレースケール イメージとトゥルー カラー イメージに追加できます。
画像のガンマ情報を追加します。
巡回冗長コード (CRC) を使用して破損したファイルを検出します。
画像表示を高速化する逐次比較表示方式。
標準の読み取り/書き込みツールキット。
複数の画像を 1 つのファイルに保存できます。
ファイル構造

これら 3 つの形式にはそれぞれ長所と短所がありますが、その中でも PNG には多くの利点があります。その人気は依然として非常に一般的ですが、その特別な利点により、私たちはそれに非常に興味を持っています。少なくとも私は今このフォーマットが好きです。もちろん、ページを作成する側にとっては、ページの合計サイズが競争力になります。したがって、これら 3 つの形式の混合使用には引き続き注意する必要があります。では、GIF をいつ使用するのか、PNG をいつ使用するのか、JPG をいつ使用するのか?以下でそれらを一つずつ分析してみましょう。

実際に作業してみると、一部の小さなアイコンやタイル状の背景など、一般的な単色のグラフィックスは比較的色数が少ないことがわかりましたが、GIF 形式では 256 色しかありませんが、この種の画像に対応する必要があります。とても適切です。もちろん、一部の特殊な小さなアイコンの色の豊かさを排除するわけではありませんが、小さなアイコンであるため、多少の色の損失は全体的な視覚効果に影響を与えないと考えられます。アイコン、タイル状の背景、その他の色 小さな画像が比較的少ない。

このような大きな画像を選択するにはどうすればよいですか? まず、JPG について学びましょう。Photoshop を使用する友人は皆、最後に画像をエクスポートするときに、画質を選択する場所があることを知っています。この JPG 画像の 100 % は圧縮なしを意味します。同じ画像をエクスポートし、異なる品質の画像と比較したところ、低品質の画像は高品質の画像よりも明らかに汚れていることがわかり、写真の見た目は非常に悪くなっています。もちろん、この状況は、カラー ブロックが大きい写真ではさらに顕著であることもわかりました。空やポートレートのように。特にポートレートなどの顔に、見苦しい黒い斑点が現れます。もちろん、写真の品質に厳密な要件がない場合は、JPG を使用して品質を下げることもできます。ただし、背景や小さなアイコンには適用されません。

HTMLページにおける画像形式の選択についての私の意見_体験交流

HTMLページにおける画像形式の選択についての私の意見_体験交流

HTMLページにおける画像形式の選択についての私の意見_体験交流

個人的には、GIF か高品質 JPG のどちらかで PNG を選択すると思います。単純な小さなアイコンであれば、PNG は GIF より少し大きくなりますが、品質はほぼ同じです。通常の写真であれば、PNG は高品質の JPG よりも少し小さいですが、PNG ではまだ色が若干抜けています。ただし、基本的には拡大しないと見えません。基本的に、私たちは人々が拡大したり批判したりするためだけのページを作成しません。したがって、PNG は中間のオプションです。もちろん、PNG には透明性という大きな利点もありますが、IE6 は以前はこの機能をサポートしていませんでした。 GIF にも透明度がありますが、GIF は絶対透明度のみをサポートし、半透明度はサポートしていないため、GIF 画像の端に白い点の円が表示されることがよくあります。 PNG にはこうした問題はなく、時代が進み、IE6 が歴史になる頃には、PNG の真の実力が分かると思います。

もちろん、背景画像と前景画像が交わる場所など、非常に特殊な状況もあります。このような場所では、優れた視覚効果を生み出すために一貫した色構造が必要です。したがって、このとき、異なる形式をできるだけ混在させないように注意してください。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

Wordでページをコピーする方法 Wordでページをコピーする方法 Feb 20, 2024 am 10:09 AM

Microsoft Word でページをコピーし、書式設定をそのまま維持したいですか? Word でページを複製すると、特定の文書レイアウトまたは形式のコピーを複数作成する場合に時間の節約に役立つため、これは賢明なアイデアです。このガイドでは、テンプレートを作成する場合でも、文書内の特定のページをコピーする場合でも、Word でページをコピーする手順を段階的に説明します。これらの簡単な手順は、最初から始めなくてもページを簡単に再作成できるように設計されています。 Microsoft Word でページをコピーする必要があるのですか? Word でページをコピーすることが非常に有益である理由はいくつかあります。 特定のレイアウトまたは形式の文書をコピーしたい場合。ページ全体を最初から再作成するのとは異なります

LaravelページでCSSが正しく表示されない場合の対処方法 LaravelページでCSSが正しく表示されない場合の対処方法 Mar 10, 2024 am 11:33 AM

「CSS を正しく表示できない Laravel ページを処理する方法、特定のコード例が必要」 Laravel フレームワークを使用して Web アプリケーションを開発する場合、ページで CSS スタイルを正しく表示できず、ページのレンダリングが異常になるという問題が発生することがあります。スタイル。ユーザー エクスペリエンスに影響します。この記事では、Laravel ページで CSS が正しく表示されない場合に対処するいくつかの方法を紹介し、開発者がこの一般的な問題を解決するのに役立つ具体的なコード例を示します。 1. ファイルパスを確認する まずCSSファイルのパスを確認します。

iPhone のスタンバイ モードをカスタマイズおよび編集する方法: iOS 17 の新機能 iPhone のスタンバイ モードをカスタマイズおよび編集する方法: iOS 17 の新機能 Sep 21, 2023 pm 04:01 PM

スタンバイは iOS 17 アップデートの新機能で、携帯電話がアイドル状態のときにすぐに情報にアクセスするための新しく強化された方法を提供します。 StandBy を使用すると、時間を確認したり、今後のイベントを表示したり、カレンダーを参照したり、現在地の天気予報の最新情報を入手したりすることができます。起動すると、充電中に横向きに設定すると、iPhone が直感的にスタンバイ モードに入ります。この機能は、ベッドサイドテーブルなどのワイヤレス充電ポイント、または日常業務中に iPhone の充電から離れているときに最適です。スタンバイ中に表示されるさまざまなウィジェットをスワイプすることで、さまざまなアプリのさまざまな情報にアクセスできます。ただし、好みや頻繁に必要な情報に基づいて、これらのウィジェットを変更したり、一部を削除したりすることもできます。それでは、詳しく見ていきましょう

3 秒でページジャンプを実装する方法: PHP プログラミングガイド 3 秒でページジャンプを実装する方法: PHP プログラミングガイド Mar 25, 2024 am 10:42 AM

タイトル: 3秒でできるページジャンプの実装方法: PHPプログラミングガイド Web開発においてページジャンプは一般的な操作ですが、通常はHTMLやJavaScriptのメソッド内のメタタグを使ってページにジャンプします。ただし、特定のケースでは、サーバー側でページ ジャンプを実行する必要があります。この記事では、PHPプログラミングを使用して、3秒以内に指定したページに自動でジャンプする機能を実装する方法と、具体的なコード例を紹介します。 PHP を使用したページジャンプの基本原理 PHP は一種の

Web ページをすばやく更新するにはどうすればよいですか? Web ページをすばやく更新するにはどうすればよいですか? Feb 18, 2024 pm 01:14 PM

ネットワークを日常的に使用する中でページの更新は頻繁に行われますが、Web ページにアクセスすると、Web ページが読み込まれない、表示が異常になるなどの問題が発生することがあります。現時点では、通常、問題を解決するためにページを更新することを選択しますが、ページを素早く更新するにはどうすればよいでしょうか?ページ更新のショートカット キーについて説明します。ページ更新ショートカットキーは、キーボード操作で現在のWebページを素早く更新する方法です。オペレーティング システムやブラウザが異なると、ページを更新するためのショートカット キーが異なる場合があります。以下では一般的な W を使用します。

iPhoneのホーム画面ページを並べ替え、無効化、削除する方法 iPhoneのホーム画面ページを並べ替え、無効化、削除する方法 Nov 29, 2023 am 08:22 AM

iOS では、Apple は iPhone の個々のホーム画面ページを無効にすることを許可しています。ホーム画面のページを無効にするだけでなく、ホーム画面のページの順序を並べ替えたり、ページを直接削除したりすることもできます。仕組みは次のとおりです。ホーム画面のページを並べ替える方法 ホーム画面でスペースをタッチしたままにして、ジッター モードに入ります。ホーム画面ページを表す点の列をタップします。表示されるホーム画面のグリッドで、ページをタッチしてドラッグし、他のページとの相対的な位置を再配置します。ドラッグに応じて他のものも動きます。新しい配置に満足したら、画面の右上隅にある「完了」をタップし、もう一度「完了」をタップしてディザモードを終了します。ホーム画面ページを無効化または削除する方法 ホーム画面でスペースを押したままにして、ディザ モードに入ります。タップしてホーム画面を表示します

ThinkPHP6 を使用して美しい 404 ページを実装する ThinkPHP6 を使用して美しい 404 ページを実装する Jun 20, 2023 am 11:06 AM

インターネットの発展に伴い、多くの Web サイトやアプリケーションは徐々に複雑になってきました。ユーザーがそれを使用すると、エラー ページが頻繁に表示されます。その中で最も一般的なのは 404 ページです。 404 ページは、アクセスされているページが存在しないことを意味し、一般的なエラー ページです。 Web サイトやアプリケーションの場合、美しい 404 ページはユーザー エクスペリエンスを大幅に向上させます。この記事では、ThinkPHP6を使って美しい404ページを素早く実装する方法を紹介します。ルートを作成する まず、ルート フォルダーにエラーを作成する必要があります。

Word でコンテンツのページを削除する方法の紹介 Word でコンテンツのページを削除する方法の紹介 Mar 26, 2024 am 10:06 AM

タイトル: Word でコンテンツのページを削除する方法の紹介 Microsoft Word を使用して文書を編集しているときに、空白のページや不要なコンテンツを削除する必要がある場合があります。文書内の特定のページにあります。この状況に対応して、コンテンツのページを迅速かつ効果的に削除するいくつかの方法を講じることができます。次に、Microsoft Word でコンテンツのページを削除するいくつかの方法を紹介します。方法 1: コンテンツのページを削除する まず、編集する必要がある Word 文書を開きます。確かに

See all articles