这个演讲是由乔恩·斯内尔斯塔克在Devxxuk发表的。图片是任何网站或应用程序的重要组成部分。在本次演讲中，我们将简要介绍web图像格式，讨论普遍支持的GIF、JPEG和PNG格式以及一些较新的格式：WebP、JPEG XR、JPEG 2000、BPG和FLIF。我们还简要介绍了向量格式，特别是SVG和图标字体。我们将介绍每种格式的优点和缺点以及如何使用它们有效。选择图像的正确格式和压缩质量设置不是一项简单的任务。当渐进式和响应式的网页设计与用户上传的图片结合在一起时，它变得更加具有挑战性。优化你的图片是很重要的，因为平均来说，大约三分之二的网站带宽用于图片。我们将为您提供一些关于如何手动执行此操作的提示，更重要的是，如何自动执行该过程。网络研讨会jonsneyers是Cloudinary研发团队的成员，负责其图像处理后端。Cloudinary是一个基于云的图像管理解决方案，可管理150亿个图像；其后端每秒处理数千个图像。它被超过100000名web开发人员使用。乔恩是网络图像格式方面的专家。他创建了免费无损图像格式（FLIF），它比其他任何格式都能实现更好的无损压缩格式.Jon拥有比利时鲁汶大学计算机科学博士学位，目前居住在布鲁塞尔。幻灯片可用给你。那个"如何"乔恩·斯奈尔斯：欢迎大家，来参加我关于图像优化和如何实现的快速讨论。我是比利时人。我在Cloudinary工作，这是一个端到端的图像管理解决方案。我们管理着大约150亿张图片。我们每秒要进行数千次图像编码，所以我们在处理图像方面有一定的经验。我们就是这么做的。我也是发明了一种叫做免费无损图像格式的新图像格式的人之一。为什么重要？为什么图像优化很重要？按字节计算，一个平均网站的65%是图片。此外，这些图片大多是网站内容的一部分，就像HTML一样。与样式表、JavaScripts或字体不同的是，样式表、JavaScripts或字体是不经常更改的，图像确实经常更改，因此客户端缓存它的机会不多。传输的很多字节和减慢网站或移动应用程序速度的很多东西都是图像，所以，如果你在优化东西，这是你首先要考虑的。图像的种类不同。一种类型的图像是矢量图像，它可以通过设计进行缩放。这类图像由绘图说明组成：画直线、画曲线，或者用某种颜色填充它们。这些类型的图形可以缩放到任何显示分辨率，因为它们没有像素的概念，因此，如果您在这种表示中有您的素材，并且您可以使用SVG这样的图像格式：可缩放矢量图形，大数据的概念，这是所有浏览器都支持的。如果你有像这样的材料，通常是像图标，文本，或者情节，也许是图画或标志之类的东西，这可能是一个非常好的主意来使用它。但是，我们处理的很多图像都不是这种类型的，你不能把任何类型的图像转换成向量图像。光栅我们在处理的大部分时间里栅格化图像，基于一些矩形像素网格的像素图像，云服务器免，这也是你的屏幕所做的。每个像素对于不同的颜色通道都有一些数值，通常是红色、绿色和蓝色。这种表示法可以用于任何类型的图像，不仅仅是徽标和文本，但主要的缺点是，它不可伸缩。我的意思是，物联网专用卡，你总是可以很好地缩小一幅图像，但放大它最多也会显得模糊。当然，我将重点放在像素图像上，并且我将讨论一些可用的不同类型的图像格式。这是一个时间线，或多或少，互联网和图像格式的网络。红色方框是像素图像格式。绿色的是矢量格式。让我们从大家都知道的那些开始，它们是JPEG、PNG和GIF或GIF，我不知道。这些格式是普遍支持的。您可以在任何平台上的任何浏览器上使用它们。这就是这些格式的主要好处：普遍采用。让我们从最古老的一个开始，那就是GIF。它可以追溯到80年代末，但目前它是唯一一种普遍支持的动画格式东西。如果你有一些动画，你希望它在任何地方都能工作，唯一的选择仍然是GIF或"JIF"。不管怎样，它只限于一个只有8位颜色的调色板，所以256种颜色。它在透明度方面是有限的，因为你只能有完全透明的像素或者完全不透明的像素，但是不能是半透明的。这些限制意味着您不能真正很好地表示颜色，所以您必须进行某种颜色量化，颜色抖动，这将使您的图像看起来更糟。但是在这些限制下，它是一种无损的图像格式，所以没有任何损失，当然除了你必须首先减少颜色的数量。另一方面，JPEGJPEG是一种有损格式，它是专门为照片图像设计的。它不支持透明度，因为你的相机不能产生透明度，而且总是有损的。即使是一个高质量的100 JPEG也会有点小有损渐进渲染JPEG的一个很好的特性是它支持渐进式渲染，这意味着如果你正在加载一个慢速连接的JPEG文件，它将看起来像右边的图像，企业信息化应用系统，这样你就可以很快看到完整的图像了。文件的开头已经提供了一个很好的预览。然而，如果你有一个非渐进式的JPEG，它将从上到下加载，这意味着在一个缓慢的连接上，它可能需要一段时间后，底部部分变成可见的。那个渐进式的一种是逐步改善图像的质量，但是你可以看到它看起来好像已经完全加载，而实际上它仍然在加载，但是你不能真正看到它。它现在要停止装载了。是 啊。渐进式比非渐进式稍小。这是典型的。我建议使用渐进式JPEG，但有一些争议。不是每个人都同意我的观点。我觉得这通常是个好主意想法。PNGThen还有PNG文件格式，它被设计用来取代GIF格式，主要是因为GIF有一些专利问题。它在替换GIF方面做得非常好，因为它提供了比GIF更好的压缩。它确实支持半透明和全彩，但它不支持动画，很遗憾，因此在这方面，它不能取代GIF，这可能是GIF仍然存在的唯一原因今天。那里是PNG的动画变体，称为APNG，Firefox、Safari和Chrome都支持它，因此，它开始越来越成为一种选择。这只是Chrome的最新版本，所以还没有。如何选择正确的格式？那么如何选择正确的图像格式。第一个问题是"你的图像必须在所有浏览器上工作吗？"如果它不需要在所有浏览器上运行，你可以做更多有趣的事情，但是如果它必须在所有浏览器上工作，那么第一个问题是，"它是不是动画？"如果是动画，除了使用GIF，你别无选择。如果它没有动画，那么就没有理由使用GIF。如果它有透明度，那么，同样，你别无选择，只能使用PNG，因为JPEG不支持它，但是web上的大部分图像仍然是不使用透明度的图像，在这种情况下，这取决于图像的类型：哪种格式是正确的。如果是照片图像，通常JPEG是最好的选择。如果是非照相的，PNG可能更好选择。所以自动做出这个决定有点棘手，但这或多或少是你必须要做的。可以。这些是普遍支持的格式。现在让我们来看看最近一些没有通用支持的格式。我们先看看这些。如果看一下支持表，这些格式都没有通用的支持。您有JPEG XR（仅在Windows上受支持），JPEG 2000仅在Safari中受支持。另外还有WebP，它在Chrome和Android上也普遍支持。它可能很快就会在Firefox和Safari中得到支持，所以它开始得到更多的采用。还有一些更新的格式没有任何浏览器支持。更新格式JPEG 2000是JPEG的改进版本。它增加了一些缺少的功能，比如对透明度的支持。它有一个无损模式。它支持更高的位深度以获得更精确的颜色表示。遗憾的是，它并没有真正流行起来，至少在网络上是这样。在一些利基案例中，它很受欢迎，比如医学成像，但是在网络上它并没有被广泛使用，当然这主要是因为只有Safari支持它。JPEG XR：差不多是同一个故事。它是对JPEG的改进，也支持透明度，更高的位深度，比JPEG稍好一些的压缩，但差别不是那么大，而且它只在Internet Explorer中支持，所以在某种意义上与JPEG 2000非常相似。还有WebP，这是一种非常有趣的格式。它是由谷歌开发的。在视频压缩方面，它通常是基于JPEG格式的，这意味着它的压缩质量要优于JPEG格式。它有两种变体。有一个有损的变体，它基本上改进了JPEG：增加了对透明度的支持等等。还有一种无损的变体，它是PNG的替代品，而且往往优于PNG。它还支持动画，因此可以取代GIF。还有一些更新的格式。我不想谈太多细节。BPG基于视频编解码器H265。这是目前最好的办法

，淘客选品