Heim Web-Frontend HTML-Tutorial 关于图片的PNG与JPG、JIF格式_html/css_WEB-ITnose

关于图片的PNG与JPG、JIF格式_html/css_WEB-ITnose

Jun 24, 2016 am 11:15 AM

一:GIF(Graphics Interchange Format)

简介

GIF图形交换格式是一种位图图形文件格式,以8位色(即256种颜色)重现真彩色的图像。

它实际上是一种压缩文档,采用LZW压缩算法进行编码,有效地减少了图像文件在网络上传输的时间。

它是目前广泛应用于网络传输的图像格式之一。

优点

   1. 优秀的压缩算法使其在一定程度上保证图像质量的同时将体积变得很小。
   2. 可插入多帧,从而实现动画效果。
   3. 可设置透明色以产生对象浮现于背景之上的效果。

缺点

由于采用了8位压缩,最多只能处理256种颜色,故不宜应用于真彩图像。
二:PNG(Portable Network Graphics)

便携式网络图片(Portable Network Graphics),简称PNG,是一种无损数据压缩位图图形文件格式。

PNG格式是无损数据压缩的,允许使用类似于GIF格式的调色板技术,支持真彩色图像,并具备Alpha(半透明)等特性。

现在有很多人使用PNG格式于互联网及其他方面上。

PNG规范 W3C建议 (有了解更多详细理论方面知识,和具有探索精神的童鞋可以去看看 抱歉是英文的)

优点

    * 支持256色调色板技术以产生小体积文件
    * 最高支持48位真彩色图像以及16位灰度图像。
    * 支持Alpha通道的半透明特性。
    * 支持图像亮度的gamma校正信息。
    * 支持存储附加文本信息,以保留图像名称、作者、版权、创作时间、注释等信息。
    * 使用无损压缩。
    * 渐近显示和流式读写,适合在网络传输中快速显示预览效果后再展示全貌。
    * 使用CRC循环冗余编码防止文件出错。
    * 最新的PNG标准允许在一个文件内存储多幅图像。

缺点

但也有一些软件不能使用适合的预测,而造成过分臃肿的PNG文件。

三:JPG(Joint Photographic Experts Group)

JPEG是一种针对相片影像而广泛使用的一种失真压缩标准方法。

JPEG的压缩方式通常是破坏性资料压缩(lossy compression),意即在压缩过程中图像的品质会遭受到可见的破坏。

优点

JPEG/JFIF是最普遍在万维网(World Wide Web)上被用来储存和传输照片的格式。

JPEG在色调及颜色平滑变化的相片或是写实绘画(painting)上可以达到它最佳的效果。

在这种情况下,它通常比完全无失真方法作得更好,仍然可以产生非常好看的影像(事实上它会比其他一般

的方法像是GIF产生更高品质的影像,因为GIF对于线条绘画(drawing)和图示的图形是无失真,

但针对全彩影像则需要极困难的量化)。

缺点

它并不适合于线条绘图(drawing)和其他文字或图示(iconic)的图形,因为它的压缩方法用在这些图形的型态上,

会得到不适当的结果。

四:简单来说最方便的区分方法是:

png即可移植网络图形格式,也是一种位图文件存储格式,可以进行无损压缩。

而jpg是我们最常见的图片格式了,图片占用存储较少,但是也牺牲了图片质量。

简单地说就是一个无损,一个有损。

JPG是有损图片的压缩类型,有损压缩方式去除冗余的图像和彩色数据,

获取得极高的压缩率的同时能展现十分丰富生动的图像,换句话说,就是可以用最少的磁盘空间得到较好的图像质量。
PNG不是压缩性,能保存透明等图,它同时提供 24位和48位真彩色图像支持以及其他诸多技术性支持。

PNG格式可编辑。如图片中有字体等,可利用PS再做更改
JPG格式不可编辑。
对于两种格式的解析度,PNG高于JPG。
PNG不适用任何场合,因为它的体积很大,不利用显示,完全用于编辑者作为以后更改图片时做的备份之用。
JPG格式用于很多场合,不一一例举。

Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

AI Hentai Generator

AI Hentai Generator

Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)
2 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
Repo: Wie man Teamkollegen wiederbelebt
1 Monate vor By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Abenteuer: Wie man riesige Samen bekommt
1 Monate vor By 尊渡假赌尊渡假赌尊渡假赌

Heiße Werkzeuge

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Schwierigkeiten bei der Aktualisierung der Zwischenspeicherung offizieller Konto -Webseiten: Wie vermeiden Sie den alten Cache, der sich auf die Benutzererfahrung nach der Versionsaktualisierung auswirkt? Schwierigkeiten bei der Aktualisierung der Zwischenspeicherung offizieller Konto -Webseiten: Wie vermeiden Sie den alten Cache, der sich auf die Benutzererfahrung nach der Versionsaktualisierung auswirkt? Mar 04, 2025 pm 12:32 PM

Das offizielle Konto -Webseite aktualisiert Cache, dieses Ding ist einfach und einfach und es ist kompliziert genug, um einen Topf davon zu trinken. Sie haben hart gearbeitet, um den offiziellen Account -Artikel zu aktualisieren, aber der Benutzer hat die alte Version immer noch geöffnet. Schauen wir uns in diesem Artikel die Wendungen und Wendungen und wie man dieses Problem anmutig ansehen. Nach dem Lesen können Sie sich leicht mit verschiedenen Caching -Problemen befassen, sodass Ihre Benutzer immer den frischesten Inhalt erleben können. Sprechen wir zuerst über die Grundlagen. Um es unverblümt auszudrücken, speichert der Browser oder Server einige statische Ressourcen (wie Bilder, CSS, JS) oder Seiteninhalte, um die Zugriffsgeschwindigkeit zu verbessern. Wenn Sie das nächste Mal darauf zugreifen, können Sie ihn direkt aus dem Cache abrufen, ohne ihn erneut herunterzuladen, und es ist natürlich schnell. Aber dieses Ding ist auch ein zweischneidiges Schwert. Die neue Version ist online,

Wie füge ich PNG -Bildern auf Webseiten effizient Schlaganfalleffekte hinzu? Wie füge ich PNG -Bildern auf Webseiten effizient Schlaganfalleffekte hinzu? Mar 04, 2025 pm 02:39 PM

Dieser Artikel zeigt einen effizienten PNG -Grenzzusatz zu Webseiten mithilfe von CSS. Es wird argumentiert, dass CSS im Vergleich zu JavaScript oder Bibliotheken eine überlegene Leistung bietet, um zu beschreiben, wie die Randbreite, Stil und Farbe für subtile oder herausragende Effekte angepasst werden können

Wie verwende ich HTML5 -Formularvalidierungsattribute, um die Benutzereingabe zu validieren? Wie verwende ich HTML5 -Formularvalidierungsattribute, um die Benutzereingabe zu validieren? Mar 17, 2025 pm 12:27 PM

In dem Artikel werden unter Verwendung von HTML5 -Formularvalidierungsattributen wie Erforderlich, Muster, Min, MAX und Längengrenzen erörtert, um die Benutzereingabe direkt im Browser zu validieren.

Was ist der Zweck des & lt; datalist & gt; Element? Was ist der Zweck des & lt; datalist & gt; Element? Mar 21, 2025 pm 12:33 PM

Der Artikel erörtert den HTML & lt; Datalist & gt; Element, das die Formulare verbessert, indem automatische Vorschläge bereitgestellt, die Benutzererfahrung verbessert und Fehler reduziert werden.Character Count: 159

Was sind die besten Praktiken für die Kompatibilität des Cross-Browsers in HTML5? Was sind die besten Praktiken für die Kompatibilität des Cross-Browsers in HTML5? Mar 17, 2025 pm 12:20 PM

In Artikel werden Best Practices zur Gewährleistung der HTML5-Cross-Browser-Kompatibilität erörtert und sich auf die Erkennung von Merkmalen, die progressive Verbesserung und die Testmethoden konzentriert.

Was ist der Zweck des & lt; Fortschritts & gt; Element? Was ist der Zweck des & lt; Fortschritts & gt; Element? Mar 21, 2025 pm 12:34 PM

Der Artikel erörtert den HTML & lt; Progress & gt; Element, Absicht, Styling und Unterschiede vom & lt; Meter & gt; Element. Das Hauptaugenmerk liegt auf der Verwendung & lt; Fortschritt & gt; Für Aufgabenabschluss und & lt; Meter & gt; für stati

Was ist der Zweck des & lt; Meter & gt; Element? Was ist der Zweck des & lt; Meter & gt; Element? Mar 21, 2025 pm 12:35 PM

Der Artikel erörtert das HTML & lt; Meter & gt; Element, verwendet zur Anzeige von Skalar- oder Bruchwerten innerhalb eines Bereichs und seine gemeinsamen Anwendungen in der Webentwicklung. Es differenziert & lt; Meter & gt; von & lt; Fortschritt & gt; und Ex

Wie benutze ich die HTML5 & lt; Zeit & gt; Element, um Daten und Zeiten semantisch darzustellen? Wie benutze ich die HTML5 & lt; Zeit & gt; Element, um Daten und Zeiten semantisch darzustellen? Mar 12, 2025 pm 04:05 PM

Dieser Artikel erklärt den HTML5 & lt; Time & gt; Element für semantische Datum/Uhrzeit. Es betont die Wichtigkeit des DateTime-Attributs für die Maschinenlesbarkeit (ISO 8601-Format) neben menschenlesbarem Text, das Zubehör steigert

See all articles