选择图像内容的最佳格式

在向网站添加图像时，大多数网站设计人员都有多种格式可供选择 - JPEG，JPEG-XR，PNG，WebP和GIF等等。但确定哪个是每个用例的正确选项可能是一个挑战。

为了了解如何为您的图像找到最佳格式，让我们来看看当今常用的那些 - 以及一些正在获得采用动力的下一代格式。

JPEG

在使用超过20多年的时间里，JPEG是经得起时间考验的标准。JPEG非常适合压缩连续色调图像，如照片，它们具有许多颜色和它们之间的平滑过渡。但是，JPEG不适合压缩具有清晰边缘或高能量，嘈杂纹理的图像，并且会导致尖锐边缘周围的环或细微的细节模糊。

GIF

在网站的早期，如果图像不是JPEG，那就是GIF。GIF格式擅长压缩具有大块相同或重复数据的图像。结果，只有少量颜色的图像，在宽幅区域中，在它们之间具有明显的过渡，可以作为GIF有效且无损地存储。此外，该格式支持透明度和动画。

由于它具有256色的硬限制，因此在压缩具有中等数量颜色的图像时不应使用GIF。将具有超过256种颜色的图像转换为GIF会导致有损的分色，这看起来不太好。因此，虽然GIF最初用于各种图像，但今天只有在需要动画时才应考虑它。

PNG

PNG擅长与GIF相同的图像，但它提供了一些额外的好处。例如，没有256色限制，格式具有出色的压缩性。它还支持alpha通道透明度，它使像素部分透明，而不仅仅是全透明或完全不透明。

最后，对于具有清晰边缘和宽幅纯色或精确重复图案的图像，PNG将优于GIF。但是，在照片方面，它的表现会比JPEG差。

WebP的

WebP是Google的WebM视频格式的分支。它将PNG格式使用的简单预测策略提升到了一个新的水平。WebP对图像中的每个（可变大小的）块使用多达16种不同的预测策略之一，并且可以无损地或有损地压缩预测值和实际值之间的残差。

因此，WebP提供了很大的灵活性。它适用于各种各样的图像（图形，如果你选择它的无损设置，摄影，如果你有损），并且通常提供比PNG或JPEG更好的压缩。缺点：目前仅支持两种主流浏览器：Chrome和Opera。

JPEG-XR

微软的下一代格式选择是JPEG-XR。它在JPEG压缩的基本机制之上层叠了一堆新技术，实现了无损压缩，更有效的有损压缩和alpha通道半透明。与WebP一样，JPEG-XR比其前辈更复杂，性能更好，支持更少。目前，该格式仅在Internet Explorer和Edge中受支持。

这些下一代格式提供了很多承诺，但由于其支持的限制，提供JPEG或PNG备份以确保您网站的所有访问者都可以查看图像非常重要。您可以在客户端使用新的<picture> / <source type>模式执行此操作，也可以在服务器上使用HTTP Accept标头进行内容协商

无论您是使用传统格式还是今天提供明天的格式 - 为您的图像选择正确的格式是您可以为网站的性能做的第一个，最简单和最好的事情之一。做出明智的选择！