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

关于图片的PNG与JPG、JIF格式

Jun 20, 2016 am 08:42 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)
3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Beste grafische Einstellungen
3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. So reparieren Sie Audio, wenn Sie niemanden hören können
3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25: Wie man alles in Myrise freischaltet
4 Wochen 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)

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; 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 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

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.

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 das Ansichtsfenster -Meta -Tag? Warum ist es wichtig für reaktionsschnelles Design? Was ist das Ansichtsfenster -Meta -Tag? Warum ist es wichtig für reaktionsschnelles Design? Mar 20, 2025 pm 05:56 PM

In dem Artikel wird das Ansichtsfenster -Meta -Tag erörtert, das für das reaktionsschnelle Webdesign auf mobilen Geräten unerlässlich ist. Es wird erläutert, wie die ordnungsgemäße Verwendung eine optimale Skalierung von Inhalten und Benutzerinteraktion gewährleistet, während Missbrauch zu Design- und Zugänglichkeitsproblemen führen kann.

Was ist der Zweck des & lt; iframe & gt; Etikett? Was sind die Sicherheitsüberlegungen bei der Verwendung? Was ist der Zweck des & lt; iframe & gt; Etikett? Was sind die Sicherheitsüberlegungen bei der Verwendung? Mar 20, 2025 pm 06:05 PM

Der Artikel erörtert das & lt; iframe & gt; Der Zweck von Tag, externe Inhalte in Webseiten, seine gemeinsamen Verwendungen, Sicherheitsrisiken und Alternativen wie Objekt -Tags und APIs einzubetten.

Gitee Pages statische Website -Bereitstellung fehlgeschlagen: Wie können Sie einzelne Dateien 404 Fehler beheben und beheben? Gitee Pages statische Website -Bereitstellung fehlgeschlagen: Wie können Sie einzelne Dateien 404 Fehler beheben und beheben? Apr 04, 2025 pm 11:54 PM

GitePages statische Website -Bereitstellung fehlgeschlagen: 404 Fehlerbehebung und Auflösung bei der Verwendung von Gitee ...

See all articles