JPEG文件，PNG格式，和GIF -噢，我的！大多数Web开发人员只学会通过试验，错误和长期的经验要使用的格式。而几乎没有人能理解这些格式实际上是如何工作的。

在本文中，我们将采取一个高层次的看每个格式“压缩算法，以了解他们不同的策略，如何让他们或多或少地适用于不同类型的图像。然后，我们将游览了几个新一代图像格式（如的WebP和JPEG-XR），看看我们如何能够利用智能服务器，以利用这些功能强大的（但尚未普遍支持的）格式的优势，莫衷一是。

让我们踢东西了与亲爱的老朋友……

 响应式网站建设www.xmhudong.com

JPEG

请允许我，一会儿，花一些时间欣赏古老，神奇，JPEG。在25岁的一袋算法是ISO 10918 又名JPEG标准经受住了时间的考验。

那么，如何操作呢？又是什么好？

JPEG压缩分割图像分成8×8像素块，然后做一些事情有点疯狂给他们，有一大堆的数学。它的每个块的转换像素的R，G -列出，和B值，在映射到连续点空间到列表系数，其中描述方面块方程中使用的能量波。在技术方面，JPEG压缩算法转换来自图像的信息空间域到频域。

实际上，这意味着，JPEG是在压缩连续色调图像非常好：具有颜色的巨大数目，以及它们之间的平滑过渡的图像。换句话说，JPEG假定你的形象去看看或多或少就像一张照片。

相反，JPEG格式是可怕在有清晰的边缘或高能量，周围尖锐边缘嘈杂的纹理，稍后即放环图像压缩和模糊了细节。

为了压缩这些图片很好，我们采用不同的压缩算法。进入我们的下一个格式：

GIF

在网络发展初期，如果图像是不 JPEG格式，这是一个GIF。

GIF格式使用LZW压缩算法，这是远高于JPEG的mathemagic简单。从本质上讲，在你的图像数据LZW算法扫描并生成它的重复部分很短代码; LZW缩短重复。这意味着，GIF格式擅长压缩具有相同或重复大量的数据图像。的图像，只有几个颜色，在广阔的大片，它们之间的尖锐过渡能够高效存储无损为GIF格式。

尽管它是一个简单的格式，GIF体育一双花哨的功能：透明度和动画。

但是… GIF在压缩的事情，甚至中等数量的颜色可怕的; 赫克，格式有烤的，坚硬，256色的限制。超过这个数字的颜色将图像转换成有损一个GIF效果色调分离，这看起来可怕。

总之，GIF和JPEG具有相反相成的优势。他们在网络的初期做了一个杀手的球队。

但是，LZW算法周边悬而未决的专利问题，启发少数极聪明的人采取了第二个裂缝在设计无损图像格式的网页。

PNG

PNG擅长用同样类型的GIF图像做的，并带来了一些额外的好处：

• 没有256色的限制
• alpha通道透明度（这样的像素可以是部分地 -transparent，而不是简单的全透明或完全不透明）
• 但在所有的几个边缘的情况下，超级压缩

这从维基百科的图像展示了PNG与半透明像素非常宕好来压缩全彩色图像的能力。

如何拍PNG GIF，当涉及到压缩？通过添加一些层到压缩堆…

首先，将PNG算法试图减少数据就需要通过使用它已经知道预测它不的那些像素来存储量。格式有5个不同的预测策略，但基本上，将PNG假设彼此相邻的像素将是相似的。如果这个假设证明真实的，PNG通过仅存储其预测值与实际值之间的差的数据保存; 小数字占用较少的空间比大。

其次，PNG允许图像参考以前，相同的像素序列（而不是存储相同数据两次）使用称为LZ77算法削减了重复。如果你眯着眼睛，PNG的LZ77和GIF的LZW殊途同归两端切割出的重复，而是通过装置，该装置能够唯一逃避专利律师那里。人人都是赢家！

然后，最后，成就了这一切，PNG使用称为“哈夫曼编码”，以减少产生最小的，可能的码最常见的值（顺便说一句，甚至进一步熬剩下的值的过程中，JPEG格式使用Huffman编码作为最后一步为好）。

结合所有这三个（无损）技术，提供了对GIF的单一战略巨大的好处。和复杂的工具可以通过改变它的通过该长手套运行lossily之前的原始图像数据提供更大的压缩比，以使之更加压缩友好。

退一步，所有你需要知道的是这样的：当涉及到照片PNG将比JPEG表现较差，比GIF几乎总是更好的。所以，使用它与清晰的边缘和纯色的广泛大片或精确重复图案的图像。

下一代

在撰写本文时，这三种格式，JPEG，GIF和PNG-是唯一的图像格式的普遍支持。这就是说，他们是开发人员可以实际使用的唯一格式。但是，新，尖端的格式已经在这里和他们是壮观。

的WEBP

的WebP是谷歌的WebM视频格式的一个分支; 它的压缩策略的核心是预测性的，这就是说，它需要使用PNG格式下一级的简单的预测策略。的WebP使用多达16种不同的预测策略的图像中的每个（可变大小）块中的一个，并且可以任选任无损或lossily压缩预测值和实际值之间的残余差异。该格式的相对复杂性为它提供了很大的灵活性; 这是很好的为各种影像（包括图形，如果你选择它的无损设置和摄影，如果你去有损），拥有比任何PNG或JPEG（一般）更好的压缩。

但是，这是谷歌的格式，它仅适用于Chrome目前支持。

JPEG-XR

微软的下一代格式-的选择题，JPEG-XR层上的JPEG压缩的基本机制之上的一堆新技术，使：

• 无损压缩
• 更高效的有损压缩
• alpha通道半透明度

喜欢的WebP，JPEG-XR是一个复杂得多，高性能，和良好支持不到它的前辈。眼下，格式在Internet Explorer和边缘时，才支持。

如何使用明天的格式，今天

有什么办法让我们使用这些下一代格式，现在呢？有！

新的标记使开发人员能够以多种格式提供相同的图像，并让浏览器决定加载了一堆哪一个。不幸的是，这种标记可以得到一个有点复杂：

<picture>
<source type="image/webp"
       srcset="sunset.wepb" />
<source type="image/vnd.ms-photo"
       srcset="sunset.jxr" />
<img src="sunset.jpg"
    alt="A colorful sunset" />
</picture>

幸运的是，还有着另一种方式。前端工程师可以这种复杂性转移到后端，采用智能服务器，可以从同一个URL发送给不同的用户不同的资源。

使用像服务Cloudinary，开发人员可通过加入几个简单的字符，以他们的网址部署动态，自适应地压缩图像。坚持f_auto到Cloudinary网址，你会得到适应性不添加任何的复杂性。在图片上面的标记归结回落到：

<img src="http://res.cloudinary.com/eric-cloudinary/image/upload/f_auto/sunset"    alt="A colorful sunset" />
这个怎么用？原来，客户什么时候他们要求的图像资源来自服务器它们所支持的格式的服务器。一个聪明的服务器的话，可以给不同的客户端不同的资源，基于包含他们的请求中的信息。