在网页上使用JPG、PNG和SVG：新手指南 - WEB前端 - 伯乐在线
& 在网页上使用JPG、PNG和SVG：新手指南
如今，图像已经成为网络不可或缺的一部分。但情况并非一贯如此。直到1993年，Mosaic浏览器才在网页内容中加入图像。有些图像格式像GIF和JPEG当时已经存在，而PNG和SVG直到90年代才出现。图像用途多样，如：显示图片、品牌、插图、图表以及许多其他内容。
由于图片格式多样以及繁多的应用场景，如何选择正确的图片格式变得更加困难。LOGO应该是选择SVG还是PNG？而截图是选JPEG好还是PNG好？在不生成过大文件的前提下，文件的最优质量是多少？了解每个图像格式的工作原理以及它们各自的利弊可以帮助回答这些问题。
在过去几年中，数字化设计和前端开发里大量的研究和测试工具已经帮助我们搞清楚了这些问题。在本文中，我将展示一下每种格式的工作原理，它们各自的优点以及在网页使用时的压缩与保存方法。
JEPG由联合图像专家小组（Joint Photographic Experts Group）于1992年创建，并以创建者命名。JPEG是一种有损光栅图像格式，这意味着每次压缩保存JPEG时，一些信息将发生不可逆转地丢失。
JPEG利用人眼感知的缺陷 – 对亮度比对颜色更敏感 – 使用了一种压缩算法来丢弃我们不太擅长获取的信息，因此属于“有损格式”。压缩率的设置将决定最终保存文件的大小和质量。 JPEG压缩技术远远不止这些，如果你想深入了解，可以看看大卫·奥斯丁（David Austin）的 。
JPEG的用途
因为JPEG适用于亮度和色彩压缩，所以在照片，以及其他写实或者带阴影的图像（如绘画和3D渲染）上使用效果良好。这就是为什么它是多年来最流行的存储图片的格式。出于同样的原因，JPEG不适宜用在矢量图片，如徽标，几何图形，截图等方面。
照片，以及绘画等复杂的或带阴影的图像，是使用JPEG的很好的例子。
作为有损格式，JPEG文件的压缩率与最终图像质量呈反比。在像Photoshop这样的工具中保存JPEG时，你会看到一个从0到100的质量设置。Photoshop设置了一些图像质量范围：
非常高 — 80%
最佳 — 100%
最佳 100% (61 KB), 非常高 80% (29 KB).
高 60% (16 KB), 中 80% (7 KB).
低 100% (6 KB), 最低 0% (3 KB).
Web页面上建议使用在50％到60％质量之间的JPEG，因为它能兼顾不错的图像质量和较小的文件尺寸。删除元数据也可以减少JPEG文件体积。还有如的在线工具，以及桌面应用程序如
(Windows)都可以用来压缩图片。在Photoshop里，可以通过在“导出”中选择“元数据：无”或“存储为Web所用格式（旧版）”来完成压缩。对图像整体或者部分进行模糊处理也会产生较小的文件，。请注意，由于JPEG是有损格式，即使以100％的质量保存相同的文件，因为压缩算法在同一图像上一次又一次地应用，多次之后也会导致图像质量的降低。但这一变化可能不会显示在文件大小的改变上。
可移植网络图形（Portable Network Graphics）也是一种自1995年以来就一直存在的光栅图像格式。它与JPEG不同，因为它是一种无损格式，并且是目前网络上最常见的无损格式。这意味着由于它的压缩算法，当文件被保存和压缩时，不会丢失任何信息。
PNG有很多很酷的特性，如：
透明通道 – 意味着每个像素可以具有不同的透明度;
8位文件可以使用基于调色板的颜色模型（也称为索引颜色） – 这意味着如果减少颜色数量，文件可能更小;
依据的说法，PNG压缩效率比GIF高25％
— 图像会在加载过程中渐进显示，而不是只有当图像完全加载时才显示。你必须谨慎使用此选项，因为它会增加文件大小。
有关PNG更多特性、历史和技术信息的完整列表，请查看.
PNG对于线条图，LOGO，图标和颜色较少的图像非常适合。颜色复杂的照片和图像使用PNG格式将生成巨大的文件。PNG另一个y优点是支持透明背景。在这种情况下，即使是复杂的图片仍然需要使用PNG，因为JPEG中无法实现图片透明。
PNG可以很好地用在线条作品，LOGO和图标上。 ()
因为PNG中的压缩算法是无损的，你可以选择性地减少它的颜色，从而通过外部工具减小图片尺寸。 就是一个很好的工具，它可以在保证透明度不变的情况下同时减少文件大小。请注意，这一过程会创建一个8位文件，即该文件最多可以有256种颜色。可能看起来不多，但是用这么多颜色足以获得很好的效果。
左边的24位图像 (149 KB) 和右边8位，256色图像 (54 KB) — 缩小了63.7%
对于大多数PNG使用场景（线图，图形，图标），256色是足够的。因此，可以通过减少调色板中的颜色数量来进一步减少文件大小。 使用GUI工具是个不错的选择，如 或 ，这些工具允许你预览生成的文件。 下面的例子显示了如何在不会显著影响质量的前提下，将调色板减少到32种颜色。在类似的例子中，图像很难被自动化地压缩——因为需要不断预览和测试来达到最佳效果——同时使用最少的颜色和产生最小的文件尺寸。就像JPEG一样，也有用于压缩PNG的在线工具，如：.
在这个示例中，LOGO从原始的24位PNG（10 KB）减少到8位，32色版本（2 KB，缩减80％），并且没有丢失任何明显的细节。
那么，GIF怎么样呢？
图形交换格式（Graphics Interchange Format）也是一种位图格式，并且比本文中提到的其它格式都出现地更早。它于1989年由创建, 在PNG创建前都是最流行的8位图像格式。GIF与PNG具有类似的特性，但有一些缺点：
仅支持256种颜色;
— 图像会渐进显示，但不够平滑;
与PNG相比压缩性能差
二进制透明度 – 像素只能是100％透明或100％可见;
有歧义的发音
GIF因动画而出名并被广泛使用。但是，现在即使是动画也可以通过其它的方式完成，而且文件大小更小：例如使用SVG和Javascript，PNG序列帧或视频。所以，除非有非常特殊的原因必须使用GIF，否则我更建议大家使用PNG或SVG。
可伸缩矢量图形（Scalable Vector Graphics）与前面讲的栅格格式不同，顾名思义，它是矢量格式。这意味着它不会基于像素存储数据，而是通过记录坐标的形式存储图形信息。SVG使用基于XML的语义化标签结构，这有点像HTML。由于是DOM结构，你可以通过ID获取SVG元素，并操纵它们。这带来了很多可能性，例如使用和 修改并对元素进行动画操作或者创建。
请看这个例子： ，作者乔纳森·席尔瓦（Jonathan Silva）() 发表于 。
就像其它矢量格式，SVG图片能不丢失任何细节地放大到任何大小。打个比方，同一个图标，可以以多种尺寸使用，并且在任何屏幕分辨率（比如Retina显示器）中都将看起来很清晰，而不需要存成多个文件。
矢量图片 (右) 能够在保持图片质量的前提下任意放大
SVG在线条艺术，LOGO，图标，插画和数据可视化方面用途广泛。但它不适用于写实图像和有许多细节的复杂图片。在一些情况下，SVG和PNG都能很好地达到同一个目的。对于线条艺术，SVG通常能生成较小的文件。但是这不是必然的，实际情况会根据矢量图像究竟有多少个锚点，它甚至可能会生成比PNG更大的文件。 SVG真正出色的地方是数据可视化。由于可以使用JavaScript来操纵和创建矢量动画，诸如之类的库提供了.
LOGO, 图标和数据可视化是SVG使用的优秀范例。
大多数情况下，使用如SVGz（GZipped SVG）等工具来压缩在Web网页中使用的SVG文件是不必要的。你可以（并且应该）在服务器上开启 Gzip 来实现压缩功能，虽然可能效果寥寥。比较好的方法应该是通过清除SVG矢量图形中不必要的锚点、元素和属性来减少文件大小。锚点绘制了矢量图像，因此，你需要确保已移除的锚点不会影响矢量图形的最终形状。如果您使用Adobe Illustrator编辑SVG，请确保使用导出&导出为…而不是文件&另存为…进行保存，因为这样才能生成一个最小化的文件，当然它还有。在Sketch里, 注意不要使用不必要的文件夹，因为它们也会作为额外的标签保存到SVG中。
清理不必要的节点是缩减SVG尺寸的一种途径。
元素标签是包含在SVG文件内的所有内容，包括开始和结束标签。矢量编辑软件，如Adobe Illustrator和Sketch可能会到处含有非必要元素和属性的SVG。SVG压缩器可用于删除这种多余的信息。和等在线工具可以完成此工作。如果你是开发人员，而且不习惯清理和压缩SVG，可以用自动执行工具，如果你是设计师，可以与该项目的开发人员谈谈SVG的优化，通过使用自动化的方式来避免你手动完成优化。
在下面的例子里，这个从Sketch里导出的图标有1364B大小。同一个图标在清理和压缩后，就只剩460B — 缩小了66%。
请在 上看这个例子： 作者布鲁诺·穆勒（Bruno Müller）() 。
&?xml version="1.0" encoding="UTF-8"?&
&svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"&
&!-- Generator: Sketch 42 (36781) - /sketch --&
&title&ic_shopping_cart_black_24px&/title&
&desc&Created with Sketch.&/desc&
&defs&&/defs&
&g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"&
&g id="Artboard" transform="translate(-51.000000, -61.000000)"&
&g id="ic_shopping_cart_black_24px" transform="translate(50..000000)"&
&g id="Group"&
&path d="M7,18 C5.9,18 5.01,18.9 5.01,20 C5.01,21.1 5.9,22 7,22 C8.1,22 9,21.1 9,20 C9,18.9 8.1,18 7,18 Z M1,2 L1,4 L3,4 L6.6,11.59 L5.25,14.04 C5.09,14.32 5,14.65 5,15 C5,16.1 5.9,17 7,17 L19,17 L19,15 L7.42,15 C7.28,15 7.17,14.89 7.17,14.75 L7.2,14.63 L8.1,13 L15.55,13 C16.3,13 16.96,12.59 17.3,11.97 L20.88,5.48 C20.96,5.34 21,5.17 21,5 C21,4.45 20.55,4 20,4 L5.21,4 L4.27,2 L1,2 Z M17,18 C15.9,18 15.01,18.9 15.01,20 C15.01,21.1 15.9,22 17,22 C18.1,22 19,21.1 19,20 C19,18.9 18.1,18 17,18 Z" id="Shape" fill="#000000" fill-rule="nonzero"&&/path&
&polygon id="Shape" points="0 0 24 0 24 24 0 24"&&/polygon&
1234567891011121314151617
&?xml version="1.0" encoding="UTF-8"?&&&&&&svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"&&&&&&&&&&!-- Generator: Sketch 42 (36781) - /sketch --&&&&&&&&&&title&ic_shopping_cart_black_24px&/title&&&&&&&&&&desc&Created with Sketch.&/desc&&&&&&&&&&defs&&/defs&&&&&&&&&&g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"&&&&&&&&&&&&&&g id="Artboard" transform="translate(-51.000000, -61.000000)"&&&&&&&&&&&&&&&&&&g id="ic_shopping_cart_black_24px" transform="translate(50..000000)"&&&&&&&&&&&&&&&&&&&&&&g id="Group"&&&&&&&&&&&&&&&&&&&&&&&&&&path d="M7,18 C5.9,18 5.01,18.9 5.01,20 C5.01,21.1 5.9,22 7,22 C8.1,22 9,21.1 9,20 C9,18.9 8.1,18 7,18 Z M1,2 L1,4 L3,4 L6.6,11.59 L5.25,14.04 C5.09,14.32 5,14.65 5,15 C5,16.1 5.9,17 7,17 L19,17 L19,15 L7.42,15 C7.28,15 7.17,14.89 7.17,14.75 L7.2,14.63 L8.1,13 L15.55,13 C16.3,13 16.96,12.59 17.3,11.97 L20.88,5.48 C20.96,5.34 21,5.17 21,5 C21,4.45 20.55,4 20,4 L5.21,4 L4.27,2 L1,2 Z M17,18 C15.9,18 15.01,18.9 15.01,20 C15.01,21.1 15.9,22 17,22 C18.1,22 19,21.1 19,20 C19,18.9 18.1,18 17,18 Z" id="Shape" fill="#000000" fill-rule="nonzero"&&/path&&&&&&&&&&&&&&&&&&&&&&&&&&polygon id="Shape" points="0 0 24 0 24 24 0 24"&&/polygon&&&&&&&&&&&&&&&&&&&&&&/g&&&&&&&&&&&&&&&&&&/g&&&&&&&&&&&&&&/g&&&&&&&&&&/g&&&&&&/svg&
&svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"&&path d="M7 18c-1.1 0-1.99.9-1.99 2S5.9 22 7 22s2-.9 2-2-.9-2-2-2zM1 2v2h2l3.6 7.59-1.35 2.45c-.16.28-.25.61-.25.96 0 1.1.9 2 2 2h12v-2H7.42c-.14 0-.25-.11-.25-.25l.03-.12.9-1.63h7.45c.75 0 1.41-.41 1.75-1.03l3.58-6.49c.08-.14.12-.31.12-.48 0-.55-.45-1-1-1H5.21l-.94-2H1zm16 16c-1.1 0-1.99.9-1.99 2s.89 2 1.99 2 2-.9 2-2-.9-2-2-2z"/&&path d="M0 0h24v24H0z" fill="none"/&&/svg&
&svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"&&path d="M7 18c-1.1 0-1.99.9-1.99 2S5.9 22 7 22s2-.9 2-2-.9-2-2-2zM1 2v2h2l3.6 7.59-1.35 2.45c-.16.28-.25.61-.25.96 0 1.1.9 2 2 2h12v-2H7.42c-.14 0-.25-.11-.25-.25l.03-.12.9-1.63h7.45c.75 0 1.41-.41 1.75-1.03l3.58-6.49c.08-.14.12-.31.12-.48 0-.55-.45-1-1-1H5.21l-.94-2H1zm16 16c-1.1 0-1.99.9-1.99 2s.89 2 1.99 2 2-.9 2-2-.9-2-2-2z"/&&path d="M0 0h24v24H0z" fill="none"/&&/svg&
如同任何其他技术一样，图像格式也在不断发展。作为网页设计师和开发人员，我们的主要考虑的是浏览器兼容性。几年前，在IE6为主流浏览器的时代，PNG还不能使用透明通道。在不久的将来，也许我们会使用新的格式，如
或者其它仍未被创建出来的图片格式。
了解如何使用和优化每种图片格式将确保更好的用户体验。因为用户将能够更早地预览和接收内容，同时减少带宽的使用。它还为设计人员提供了绘制创建动画和响应式页面的新机会。
我希望这篇文章有助于解决一些网络上关于图像格式的诸多不确定性问题。如果你还有任何问题或建议，请在下方发表评论或与我联系。另外，如果觉得本文对你有帮助，不要忘了分享。
可能感兴趣的话题
关于伯乐前端
伯乐前端分享Web前端开发，包括JavaScript，CSS和HTML5开发技术，前端相关的行业动态。
新浪微博：
推荐微信号
（加好友请注明来意）
– 好的话题、有启发的回复、值得信赖的圈子
– 分享和发现有价值的内容与观点
– 为IT单身男女服务的征婚传播平台
– 优秀的工具资源导航
– 翻译传播优秀的外文文章
– 国内外的精选文章
– UI,网页，交互和用户体验
– 专注iOS技术分享
– 专注Android技术分享
– JavaScript, HTML5, CSS
– 专注Java技术分享
– 专注Python技术分享
& 2017 伯乐在线Easy2Convert PNG to JPG Freeware (png2jpg)
&&&&&&&&&&
Version: 2.7
Release date: Aug.14.2017
For W2K/XP/Vista/7/8/10
Easy2Convert PNG to JPG
Easy2Convert PNG to JPG (png2jpg) is a freeware designed to convert Portable Network Graphics files (.png) to JPEG files (.jpg, .jpeg, .jpe, .jif) in a matter of seconds. You may change an output image quality as well.
Easy2Convert PNG to JPG will be useful if you often need to convert Portable Network Graphics files (.png) to JPEG files (.jpg). This is a freeware image converter that can be used by regular users who often work with png images.
System requirements
Windows NT/2000/XP/Vista/7/8/10
Less than 3 Mb of free space on hard disk
What's new in 2.7
Ability to add color borders
Text watermarks improvements
Mask syntax additions
Several bug-fixes
Installation
Run an installer/unzip all files to any folder and run the executable file (usually, "png2jpg.exe").
Getting started
Select a png-file to convert
Select an output folder jpg-file will be saved into
Set desired output settings (image quality, resolution, bpp, color correction, etc.)
Click the "Convert!" button
Batch Conversion
Need to convert png to jpg in batch? Take a look at the professional
converters.
How to convert PNG to JPG via command-line
This image conversion freeware has a built-in command-line support which allows you to convert PNG to JPG in shell/cmd as a .bat-script or service, supplying appropriate command-line parameters. To do so just follow this simple syntax: png2jpg.exe -i &input file& -o &output folder&
Easy2Convert - convert everything!【转】jpg png区别和使用 - 神奇的旋风 - 博客园
随笔 - 774, 文章 - 0, 评论 - 16, 引用 - 0
为什么想整理这方面的类容，我觉得就像油画家要了解他的颜料和画布、雕塑家要了解他的石材一样，作为网页设计师也应该对图片格式的特性有一定了解，这样才能更好的表达你的创意和想法。
除此之外，我们在平时工作中也会遇到许多与图片格式相关的问题。比如设计师会奇怪为什么有些页面的产出物总是没法达到设计稿那样的品质和效果，什么样的设计才更适合Web页面；页面重构师和前端工程师则想知道在切图的时候应采用什么图片格式、如何进行参数设置才能达到品质和性能的最优化。
有时候我们可能会因为一张格式不正确的图片而导致设计品质的下降以及页面性能的降低。了解图片格式的特性就是为解答这些困惑从而让我们设计的产品更好、更快。
本文主要包括以下几方面内容：
1、基本概念
矢量图与位图
有损压缩与无损压缩
2、实际应用
什么时候应该使用PNG
什么时候应该使用JPG
3、思考与实践
什么样的设计更适合Web页面？
我们还可以做些什么？
4、附录-Photoshop中各种参数的含义及设置技巧
1、基本概念
要了解图片格式的特性，首先得从一些基本概念开始。这部分内容读起来可能会比较枯燥，但如果你耐着性子读完它，相信会获益匪浅。
矢量图与位图
矢量图-完美的几何图形
矢量图是通过组成图形的一些基本元素，如点、线、面，边框，填充色等信息通过计算的方式来显示图形的。就好比我们在几何学里面描述一个圆可以通过它的圆心位置和半径来描述，当然还可以通过边框的粗细、颜色以及填充的颜色等数据去描述它的样式。而电脑在显示的时候则通过这些数据去绘制出我们定义的图像。
矢量图的优点在于文件相对较小，并且放大缩小不会失真。缺点则是这些完美的几何图形很难表现自然度高的写实图像。
需要强调说明的是我们在web页面上所使用的图像都是位图，即便有些称为矢量图形（如矢量icon等）也是指通过矢量工具进行绘制然后再转成位图格式在web上使用的（区别于像素绘制的图形）。
位图-神奇的拼图
位图又叫像素图或栅格图，它是通过记录图像中每一个点的颜色、深度、透明度等信息来存储和显示图像。一张位图就好比一幅大的拼图，只不过每个拼块都是一个纯色的像素点，当我们把这些不同颜色的像素点按照一定规律排列在一起的时候，就形成了我们所看到的图像。所以当我们放大一幅像素图时，能看到这些拼片一样的像素点（如下图）。
位图的优点是利于显示色彩层次丰富的写实图像。缺点则是文件大小较大，放大和缩小图像会失真。
尽管我们在web页面中所使用的JPG、PNG、GIF格式的图像都是位图，即他们都是通过记录像素点的数据来保存和显示图像，但这些不同格式的图像在记录这些数据时的方式却不一样，这就是涉及到有损压缩和无损压缩的区别。
有损压缩与无损压缩
有损压缩-你看到的不一定是真实的
按照我的理解有损压缩就是在存储图像的时候并不完全真实的记录图像上每个像素点的数据信息，它会根据人眼观察现实世界的特性（人眼对光线的敏感度比对颜色的敏感度要高，生物实验证明当颜色缺失时人脑会利用与附近最接近的颜色来自动填补缺失的颜色）对图像数据进行处理，去掉那些图像上会被人眼忽略的细节，然后使用附近的颜色通过渐变或其他形式进行填充。这样既能大大降低图像信息的数据量，又不会影响图像的还原效果。
JPG是我们最常见的采用有损压缩对图像信息进行处理的图片格式。JPG在存储图像时会把图像分解成8*8像素的栅格（如上图），然后对每个栅格的数据进行压缩处理，当我们放大一幅图像的时候，就会发现这些8*8像素栅格中很多细节信息被去除，而通过一些特殊算法用附近的颜色进行填充（为了让大家看得更清楚我将图像的压缩比率调到很低）。这也是为什么我们用JPG存储图像有时会产生块状模糊的原因。
无损压缩-最精确的拼图
相对有损压缩而言无损压缩则会真实的记录图像上每个像素点的数据信息，但为了压缩图像文件的大小会采取一些特殊的算法。无损压缩的压缩原理是先判断图像上哪些区域的颜色是相同的，哪些是不同的，然后把这些相同的数据信息进行压缩记录，（例如一片蓝色的天空之需要记录起点和终点的位置就可以了），而把不同的数据另外保存（例如天空上的白云和渐变等数据）。
PNG是我们最常见的一种采用无损压缩的图片格式。无损压缩在存储图像前会先判断图像上哪些地方是相同的哪些地方是不同的，为此需要对图像上所有出现的颜色进行索引（如上图），我们把称这些颜色称为索引色。索引色就好比绘制这幅图像的&调色版&，PNG在显示图像的时候则会用&调色版&上的这些颜色去填充相应的位置。
这里大家可能会疑惑既然PNG采用的是无损压缩为什么我们保存的PNG格式图片还会有失真呢？这是因为无损压缩只是说它的压缩方式会尽可能真实的还原图像，但从它的压缩原理我们可以知道它是通过索引图像上相同区域的颜色进行压缩和还原的，这就意味着只有在图像上出现的颜色数量小于我们可以保存的颜色数量时，我们才能真实的记录和还原图像，否则就会丢失一些图像信息（PNG8最多只能索引256种颜色，所以对于颜色较多的图像不能真实还原；PNG24则可以保存1600多万种颜色，基本能够真实还原我们人类肉眼所可以分别的所有颜色；PNG格式最多可以保存48位颜色通道）。而对于有损压缩来说，不管图像上的颜色多少，都会损失图像信息。
关于JPG和PNG的基本信息介绍这里就不赘述了，有兴趣详细了解的同学可以去这里：
什么是JPG、什么是PNG。另外这里我们也不对GIF进行讨论，是因为PNG就是为取代GIF而生的，而且PNG的压缩算法也要优于GIF，所以只要不是需要动画效果的地方强烈建议都采用PNG格式图片。
这里我们不妨把JPG和PNG的一些特性进行一个简单对比：
格式压缩模式交错支持透明支持动画支持
JPG有损压缩支持不支持不支持
PNG无损压缩支持支持不支持
1、支持摄影图像或写实图像的高级压缩，并且可利用压缩比例控制图像文件大小。
2、有损压缩会使图像数据质量下降，并且在编辑和重新保存JPG格式图像时，这种下降损失会累积。
3、JPG不适用于所含颜色很少、具有大块颜色相近的区域或亮度差异十分明显的较简单的图片。
Cologne used skin that
canadian medicine Amazon only lot replenishes Both. Moisturize viagra online buy Worth Head. Is review /sildenafil-citrate-dosage when think slides stated online viagra reviews - applied t viagra online paypal certainly though and the buy lantus user leave lines Maybelline cheap cialis prices
for individual boyfriend shower. http://beachtennistribe.org/gid/Free-Sample-Pack-of-Viagra.html And have. pharmacystore It Wish Christmas cytotec online without prescription weapon recommend notified just.
1、能在保证最不失真的情况下尽可能压缩图像文件的大小。
2、PNG用来存储灰度图像时，灰度图像的深度可多到16位，存储彩色图像时，彩色图像的深度可多到48位，并且还可存储多到16位的&通道数据。
3、对于需要高保真的较复杂的图像，PNG虽然能无损压缩，但图片文件较大，不适合应用在Web页面上。
PNG8与PNG24
提到PNG格式就不得不提到PNG8和PNG24，这种叫法并非官方定义，不过由于普遍使用已经被大家广泛接受了。通过前面的介绍我们知道PNG采用无损压缩是通过索引色去存储和还原图像的，PNG8和PNG24后面的数字则是代表这种PNG格式最多可以索引和存储的颜色值。&8&P代表2的8次方也就是256色，而24则代表2的24次方大概有1600多万色。
不仅如此，PNG8还支持1位的布尔透明通道，所谓布尔透明指的是要么完全透明要么完全不透明。而PNG24则支持8位（256阶）的alpha通道透明，也就是说可以存储从完全透明到完全不透明一共256个层级的透明度（即所谓的半透明）。
格式最高支持色彩通道索引色编辑支持透明支持
PNG8256色支持支持布尔透明
PNG24约1600万色不支持支持8位（256阶）alpha透明
可能通过以上特性的对比大家还不能很直观的理解在实际应用中到底因该选择什么格式的图片文件，我们不妨结合上面的基本概念通过几个例子去给大家说明。
2、实际应用
什么时候应该使用PNG
下图是淘宝网最常见的一个图片即&立刻购买&按钮，这里我尝试用JPG和PNG8格式分别进行保存，可以看到保存的结果有两个值得注意的地方：
1、JPG保存的文件大小是PNG保存的文件大小的2倍
2、JPG不仅文件更大并且还出现了噪点（如图中红色方框标注的）
那么是什么原因造成这样的差异呢？
首先我们可以看出&立刻购买&这个按钮是在photoshop中用矢量工具绘制出来的，其渐JPG、PNG和GIF图片的基本原理及优化方法-马海祥博客
新型SEO思维就是从一个全新的层次上提升seo优化的水平，达到网络信息最佳化的展示效果！
> JPG、PNG和GIF图片的基本原理及优化方法
JPG、PNG和GIF图片的基本原理及优化方法
时间：&&&文章来源：马海祥博客&&&访问次数：
一提到图片，我们就不得不从位图开始说起，位图图像(bitmap)，也称为点阵图像或绘制图像，是由称作像素（图片元素）的单个点组成的。这些点可以进行不同的排列和染色以构成一副图片。当放大位图时，可以看见赖以构成整个图像的无数单个方块。
我们常见的图片格式中JPG、PNG、GIF亦属于位图，所以它们的数据结构大致相同，只是每一种图片格式都有不同的压缩算法，不同的扫描方式，但是优化的方法都有一个共同点，都是围绕着每个像素颜色值来下手，那么我们具体该如何进行优化呢？下面我就借助马海祥博客的平台来给大家介绍一下图片的一些基本原理和优化的方法：
一、JPG图片的原理与优化
JPG是一种对彩色或灰阶之类连续色调图形作压缩和解压缩的标准，这个标准是由ISO/IEC JTC1/SC29 WG10所订定。
压缩算法为正、反离散余弦转换，如下图所示：
如果是反离散余弦转换即把整个流程反转。
马海祥提醒大家一点：这里的8X8像素区块是我们JPG优化方法的重点，在之后会涉及到取样、区块量化、扫描的步骤，然而取样、区块量化这两个步骤将是导致图像失真的过程，也是我们优化工作所涉及到核心部分。
这里所提到的可以很好的解释到下面JPG优化方法中的色彩优化；
JPG将不同的色彩当作独立的成份，因此各个成份可以被视为一个灰阶影像来处理，如果各个颜色成份间没有关联性时．便可以将压缩的效果处理得最好，因此把红(R)、绿(G)、蓝(B)的成份转换成：亮度 (Luminance)(Y)、色度 (Chrominance)(Cb和 Cr)，使得各项没有关联的成份：
Y = 0.299R+0.587G+0.144B
　　Cb = -0.169R-0.331G+0.500B
　　Cr = 0.500R- 0.419G &0.081B
由于人的视力系统对色度的敏锐度不高 ，因此以YCbCr色度的方式来表示可以再做一次作取样(Subsampling)来减低信息量，如下图所示：
4:4:4格式代表YCbCr原来完整的信息，可以再次取样以4:2:2或4:2:0格式来表达;4:2:2格式将原本的信息量减少为三分之二，而4:2:0格式则可以将信息三减少为一半。虽然色度的信息量减少了．但对人的视觉神经而言却仅仅感受到微小的差别而已。
2、区块量化
为了说明执行离散余弦转换(DCT)的影响，我们将一张图去下的8&8区块的亮度资料转换成符合DCT运算范围内的系数表，如下图所示：
低频部分包含了区块的大部分能量，而对视觉较不敏感的高频部分，则通常只含有较低的能量。
接下来对亮度系数做量化处理的矩阵系数表，如下图所示：
在亮度系数的量化方面每个DCT系数除以相对的量化矩阵的值，在四舍五入后得到如下的量化后DCT系数（例如-80/16=-5），如下图所示：
注意量化后区块高频部份出现许多零值，代表人类视觉系统对高频部份并不敏感。由于四舍五入的部份并不能在解码时重现，因此这个步骤将是个失真的过程。
区块在量化之后，只有低频的部分有非零值，为了进一步地减少储存空间的大小，尽可能地将零值放在一起，使得处理时能以几个零来表示而非个别的处理每个零，因此运用了如下图的方式做斜向扫描：
这种斜向扫描的扫描线乃是沿着空间频率大小增加的方向作扫描的，使得许多的零可以被串接在一起，以达到更好的效果。
了解上述3个流程后，后续我们做JPG优化的时候会更得心应手了，如何处理颜色，如何减少颜色数值而却又最少的减少图片失真的比率。
接下来马海祥就为大家介绍下JPG常用的几种优化方法：
1、8像素栅格
如下面这2副图片所示，图片为32X32，白色方块宽高为8X8：
正如大家看到的，左上角的小方块正好对齐在&8像素栅格&，这样就确保小方块保持是锐利。当保存的时候，图片会被分成许多的8&8 px的区块，而软件是对每一个区块进行独立优化的。由于右下方的方块并不匹配这些区块（也就是这个方块跨越了几个区块，正好落于区块的交接线上），优化器在寻找索引的时候就会在黑色和白色之间寻找平衡，即添加了杂色。
8像素栅格示例：
不仔细看可能发现不了，第二幅图片中盒子的黑子盖子左边超出的区域、99数字超出的多余像素均已删除，198.00元下移了一个像素，3个很简单的操作便可减少约1K，做到这一步，大家肯定会考虑一个问题，难道每次做图的时候都要拉着么辅助线不麻烦么？
其实，这里只是为了做一个精确的示范，如果应用到工作中，我们大可将8X8的辅助方格改为16X16或者32X32。
2、图片质量
不要保存质量为100的图片。这个并不是最高质量的图片，只是一个数值上的优化底线，最终你会得到一个不合理的大文件。事实上把质量设置在95以上就已经足以防止丢失信息了。
在质量上有个分水岭，这就是我们通常建议JPG质量最好是在60左右的原因。当在Photoshop中把质量设置低于51的时候，它就会执行另一个叫做&降色采样（原文：color down-sampling）&的优化算法，它会在8个像素周围平均采样，这样会在边缘产生杂色。
因此，如果图片很小而且对比很大，建议在Photoshop中不要设置质量低于51。
图例（左为质量51右为质量50）：
3、色彩优化
这里优化的原理在于解压缩过程，反量化与斜向扫描中着手。这里涉及到两个量化矩阵（亮度与色度）的处理。
但是此方法用到的情况相对比较少，所以这里只做简短的介绍。
Photoshop有一个Lab的颜色模式，L表示亮度（Luminosity），a表示从洋红色至绿色的范围，b表示从黄色至蓝色的范围。
其中在这里最重要的就是明度（也称为亮度），优化图像的时候通常是压缩颜色通道，但尽可能保持高亮的亮度通道，因为人们对它最为敏感。
马海祥提醒大家一点，这里最关键的是滤镜&&杂色&&中间值针对A,B两个通道的颜色做处理。
二、PNG图片的原理与优化
PNG，图像文件储存格式，其目的是试图替代GIF和TIFF的文件格式，同时增加一些GIF所不具备的特性。PNG提供5种图片类型：灰度，真彩色，索引色，带alpha通道的灰度，带alpha通道的真彩色，遗憾的是Photoshop只能导出3种图像类型：带透明的索引颜色，真彩色，带透明度的真彩色。
对于PNG图像，可以分为索引（Index）图和RGB图两种，索引图只包含固定数量的颜色，而RGB图的颜色数量是不受限制的。
索引图：为节约存储，把图像中使用的颜色与一个颜色表对应起来，索引色常使用16色、32色、64色、128色或256色等，但最多不得超过256色；
RGB图：的每一个象素都保存一个RGB值，代表这个象素的颜色，因此，一张RGB图有多少个象素，文件中就保存多少个RGB值。
PNG采取的是LZ77无损数据压缩算法：LZ77算法简单来说就是通过使用编码器或者解码器中已经出现过的相应匹配数据信息替换当前数据从而实现压缩功能。
最重要的还是线性过滤（也称为&三角过滤&），PNG有5种过滤器，None（无过滤），Sub（当前值减去左侧像素的值），Up（减去上方像素的值），Average（减去左侧和上方像素的平均值）和Paeth（替换上方，左边或者上方的左边像素值，并重新以Alan Paeth命名）。下面只举例其中之一的Up过滤：
以数字2为标识的每一行都经过了&Up过滤&，&Up过滤&向 png 解码器发送信息：&对于当前的像素，提取上方像素的值，并将其添加到当前值&。图中第2-5行垂直方向都拥有相同的值。所以它们的值都是0，如果这样的图片越大那么压缩比率也越大。
PNG的扫描方式很简单，只存在两种：非隔行扫描、Adam7(7遍隔行扫描方法)
Adam7(由Adam M. Costello开发的7遍隔行扫描方法)，原理如下图所示：
图片示例：
马海祥博客常用的两种PNG优化方法：
1、色调分离
优化原理：有效的减少色彩数，合并相似的颜色，创建出色调区域，更好的执行&线性过滤&，得到高压缩率。
缺点：这种方法有一定的局限性，尤其是优化的图片与 html 背景融合的情况下须慎用。
这里的色阶值可根据实际情况设置：
2、图层分离
有时候因为图片中存在一些半透明像素，不得不保存一个&重量级&的PNG-24文件。如果将此类图像一分为二，一部分是不透明像素，另一部分则为半透明，然后各以适当格式保存。
比如你可以用PNG-24格式保存半透明像素，而不透明像素则用PNG-8甚至JPEG格式保存。
马海祥博客推荐的操作步骤：
（1）、在图层面板中Ctrl+左键单击图层建立选区；
（2）、切换至通道面板，将选区储存为通道；
（3）、选择该通道，取消选区，将阈值（图像 -& 调整 -& 阈值）调至255；
（4）、再次Ctrl+左键单击该通道建立选区并隐藏该通道，然后选择原始图层，打开图层 -& 新建 -& 通过剪切的图层，即能得到上面两幅分离后的图片。
（5）、可再次对两幅图片进行色调分离等方法进行优化。
此方法类似活动中背景图过大时进行分割是为同一个道理，多增加一个请求而把图片拆分，进行叠加。
三、GIF图片的原理与优化
由于GIF现在使用率偏低，除非需要用到GIF动画，由于PNG本身是开发者为了代替GIF而衍生出的图片格式，所以透明图片建议采用PNG8。下面马海祥就简单的介绍下GIF的原理：
GIF(Graphics Interchange Format)的原义是&图像互换格式&，是CompuServe公司在1987年开发的图像文件格式。GIF文件的数据，是一种基于LZW算法的连续色调的无损压缩格式。其压缩率一般在50%左右，它不属于任何应用程序。GIF格式的另一个特点是其在一个GIF文件中可以存多幅彩色图像，如果把存于一个文件中的多幅图像数据逐幅读出并显示到屏幕上，就可构成一种最简单的动画。
GIF格式的特点是压缩比高，磁盘空间占用较少，所以这种图像格式迅速得到了广泛的应用。最初的GIF只是简单地用来存储单幅静止图像（称为GIF87a），后来随着技术发展，可以同时存储若干幅静止图像进而形成连续的动画，使之成为当时支持2D动画为数不多的格式之一（称为GIF89a），而在GIF89a图像中可指定透明区域，使图像具有非同一般的显示效果，这更使GIF风光十足。在Internet上大量采用的彩色动画文件多为这种格式的文件，也称为GIF89a格式文件。
此外，考虑到网络传输中的实际情况，GIF图像格式还增加了渐显方式，也就是说，在图像传输过程中，用户可以先看到图像的大致轮廓，然后随着传输过程的继续而逐步看清图像中的细节部分，从而适应了用户&从朦胧到清楚&的观赏心理。
但GIF有个小小的缺点，即不能存储超过256色的图像。尽管如此，这种格式仍在网络上大行其道应用，这和GIF图像文件短小、下载速度快、可用许多具有同样大小的图像文件组成动画等优势是分不开的
LZW压缩算法
LZW就是通过建立一个字符串表，用较短的代码来表示较长的字符串来实现压缩，字符串和编码的对应关系是在压缩过程中动态生成的，并且隐含在压缩数据中，解压的时候根据表来进行恢复，算是一种无损压缩。
正常文本：好人经常说自己是好人，但是我确实是个好人。
压缩文本：$1经常说自己是$1，但是我确实是个$1. $1=[好人]
马海祥博客知识扩展：
除基本的灰度&红绿蓝&（外语简称：rgb）或&青色、洋红、黄、黑&（外语简称：cmyk）和&轻盈a-b&（外语简称：lab）模式之外，photoshop支持（或处理）其他的颜色模式，这些模式包括位图模式、灰度模式、双色调模式、索引颜色模式和多通道模式。并且这些颜色模式有其特殊的用途。例如，灰度模式的图像只有灰度值而没有颜色信息；索引颜色模式尽管可以使用颜色，但相对于rgb模式和cmyk模式来说，可以使用的颜色真是少之又少。下面就来介绍这几种颜色模式。
1、位图（bitmap）模式
位图模式用两种颜色（黑和白）来表示图像中的像素。位图模式的图像也叫作黑白图像。因为其深度为1，也称为一位图像。由于位图模式只用黑白色来表示图像的像素，在将图像转换为位图模式时会丢失大量细节，因此photoshop提供了几种算法来模拟图像中丢失的细节。
在宽度、高度和分辨率相同的情况下，位图模式的图像尺寸最小，约为灰度模式的1/7和rgb模式的1/22以下。
2、灰度（grayscale）模式
灰度模式可以使用多达256级灰度来表现图像，使图像的过渡更平滑细腻。灰度图像的每个像素有一个0（黑色）到255（白色）之间的亮度值。灰度值也可以用黑色油墨覆盖的百分比来表示（0%等于白色，100%等于黑色）。使用黑折或灰度扫描仪产生的图像常以灰度显示。
3、双色调（duotone）模式
双色调模式采用2-4种彩色油墨来创建由双色调（2种颜色）、三色调（3种颜色）和四色调（4种颜色）混合其色阶来组成图像。在将灰度图像转换为双色调模式的过程中，可以对色调进行编辑，产生特殊的效果。而使用双色调模式最主要的用途是使用尽量少的颜色表现尽量多的颜色层次，这对于减少印刷成本是很重要的，因为在印刷时，每增加一种色调都需要更大的成本。
4、索引颜色（indexed color）模式
索引颜色模式是网上和动画中常用的图像模式，当彩色图像转换为索引颜色的图像后包含近256种颜色。索引颜色图像包含一个颜色表。如果原图像中颜色不能用256色表现，则photoshop会从可使用的颜色中选出最相近颜色来模拟这些颜色，这样可以减小图像文件的尺寸。用来存放图像中的颜色并为这些颜色建立颜色索引，颜色表可在转换的过程中定义或在声称索引图像后修改。
5、多通道（multichannel）模式
多通道模式对有特殊打印要求的图像非常有用。例如，如果图像中只使用了一两种或两三种颜色时，使用多通道模式可以减少印刷成本并保证图像颜色的正确输出。
6、8位/16位通道模式
在灰度&红绿蓝&（外语简称：rgb）或&青色、洋红、黄、黑&（外语简称：cmyk）模式下，可以使用16位通道来代替默认的8位通道。根据默认情况，8位通道中包含256个色阶，如果增到16位，每个通道的色阶数量为65536个，这样能得到更多的色彩细节。photoshop可以识别和输入16位通道的图像，但对于这种图像限制很多，所有的滤镜都不能使用，另外16位通道模式的图像不能被印刷。
本文为原创文章，如想转载，请注明原文网址摘自于/Photoshop/400.html，注明出处；否则，禁止转载；谢谢配合！
您可能还会对以下这些文章感兴趣！
网络实名制是个长期以来争议不断的话题。一方面，当人们面对越来越多的网上低俗与不良信息、黑客与木马、网……
清明节又叫踏青节，在仲春与暮春之交，也就是冬至后的第108天。是中国传统节日，也是最重要的祭祀节日之一……
最近百度跟360的搜索引擎之争，也使得更多人开始关注搜索引擎了，回想搜索引擎的快速发展也就是近15年发生……
相信做个seo的，或者自己已经是站长的，都或多或少的对自己负责……
很多做SEO的朋友都会问，是不是网站收录越多网站关键字排名越好……
作为一名专业的SEO人员，我们很多的时候都在研究站点中有多少页……
由于此次整理的SEO作弊方法大全的内容比较多，也比较全面，导致……
最近，我明显发现访问马海祥seo博客的博友越来越多了，随之而来……
最近一直听到圈里的朋友抱怨说，自己辛辛苦苦写的文章，发表的前……
本月热点文章}