像盒子一样的图片-里面有什么？Yandex中的报告

图片和视频是“黑匣子”，其中有很多有趣且难以理解的东西。但是您可以查看某些格式，在其中更改所有内容，然后看看会发生什么。

Evil Martians公司的Polina Gurtovaya 在2月的I   Frontend会议上发表了讲话。在实验的帮助下，波利纳（Polina）弄清楚了如何通过度量将简单图片转换为“有效图片”。Polina为我们做到这一点的工具在报告末尾进行了仔细研究。结果极大地影响了各种格式的内部和操作原理：从PNG和JPEG到AV1以及其他格式。


- 大家好。我叫Polina，我是“邪恶火星人”公司的负责人。

也许您从我们许多开放源中了解火星人。我待会儿再告诉你有关他的事。也许我必须说，我们仍在开发产品，而不仅仅是看到开源。



您可以通过GitHub信息库中的精彩链接向您提供该报告的材料。



让我们谈谈优化。当我们与他们打交道时，问题是，如果我们了解自己在做什么，它们就会很好地发挥作用。如果我们不明白，那就很糟糕了。不幸的是，在图像优化方面，这里的一切真的非常酷。我们可能根本没有优化图像，然后刺上会有两米长的怪物，这真令人难过和悲伤。

如果我们进行优化，那我们在做什么？我们认为：这里有一张图片，它是某种神秘的黑匣子，优化程序对此图片进行了某种处理，某种黑色萨满教义。我们获得的优化质量有点可疑。



让我们看一个例子。我有一只PNG格式的猫。我认为我们需要对其进行优化。我在做什么？我创建一个WebP版本，并将两个图像小心地放入<picture>标记中。你认为我在这里做得好吗？为什么手这么少？我真的做得很好！

我做对了所有事情，但是WebP版本却比原始版本多了2 KB。这不是我想要的。




另一个优化，尝试编号2。我在页面上有一个小容器，还有一只大猫。我想把一只大猫放在一个小容器里。我在做什么？我正在调整大小，因为如果我的容器尺寸很小，通过网络驱动字节驱动是愚蠢的。当然，我会考虑设备的设备像素比率。你认为我在这里做得好吗？我受够了！看看我做了什么。

我正在使用libvips库。她非常酷，很受人欢迎，从我硕大而快乐的轻猫中，我得到了一只又小又重的猫。缩小大小（以像素为单位）时，密封增加了2.5倍（以字节为单位）。很好，是吗？



总的来说，为了使这不会发生在我们身上，我们了解如何针对任务优化图像，并且，总的来说，至少我们了解正在发生的事情，让我们调查一下盒子，了解其中的内容。



让我们从查看PNG这样有趣的格式开始。在每个站点周围，一个小peengshechka隐藏在某个地方。这次。因此，必须了解它们。第二：PNG-无损压缩格式。这意味着我们保证以像素为单位与原始图像完美匹配，但是同时，a，我们受到自然的限制，压缩量不能小于压缩量。



Peengeshka可以像任何图片格式一样折叠成一个容器。我们需要告诉程序是否全部读取的第一件事就是内部。如果您假设解码器按扩展名确定图片，则不是这样。

Pengashka报告它是PNG，即容器中的前八个字节。它说“ PNG”。此外，这又是任何容器的特征，您可以对块进行一些布局。也就是说，信息打包成块，它们以某种方式排列。如何-定义容器。在PNG中，它看起来像这样：您有四个字节负责长度，四个字节负责块的类型。什么类型-我们稍后再谈。 

如果块的长度非零，则它具有有效负载。另外，还有校验和之类的东西。您正在检查那里是否被殴打。接下来是以下块。



不仅解析PNG文件，而且几乎解析任何一个文件都非常容易。以FileReader为例，这是一个浏览器API。我们使用FileReader读取文件。阅读后，我们便将该文件切成小块。我不会在此处提供拆分为块功能的代码，但是您可以猜测到if和for的复杂组合。 




好的，我们已经裁剪了，我们将看看会发生什么。我们有几种类型的块，它们几乎是任何格式的特征。第一个称为IHDR。有许多称为IDAT的块。这些名称对您来说似乎有些陌生，但现在我们将弄清楚它的含义。当一切都结束时，我们看到了结束块。



让我们仔细看看这些块。 IHDR是一个元块，几乎所有图片都具有这样的元块。它的名称不同，排列方式也不同，但很可能是这样。没有它，您的解压缩器（向您显示peengeshki或non-peengeshki的东西）将无法显示任何内容。这块里有什么？同样，大多数格式的内容都是典型的。这是高度和宽度。高度和宽度被缝到文件中，它就来了。接下来是典型的Panache标志：bitDepth，colorType和隔行扫描。 



在讨论这些标志的含义以及它们对我们如此非常重要的原因之前，让我们先看看如何将像素存储在混乱中。在peanesh中，像素存储在称为IDAT的块中。在一个好的情况下，像素是打包成一个块的一定数量的数字，并且该块通过Deflate压缩算法进行压缩。谁使用了Deflate压缩算法？好吧，您上次拉链的时间是什么时候？您知道Deflate是gzip吗？因此，我认为-很多人都使用它。

但是在peengeshah中，出现了另一种有趣的现象，该现象以多种格式使用，但可能全部使用。这种小发明称为预测编码。事实是我们的图像不是随机像素。我们的小图画上所画的东西彼此之间是有联系的。有一些黑暗的区域，明亮的区域，等等。

我们试图利用这一事实，而不是将像素值存储在这些蓝色单元格中，而是尝试根据先前的像素预测这些像素。在PNG中，这些预测非常简单，它们被打包在像素行之前的第一个字节中。预测可以是这样的，例如，让我们不要预测任何事情，而只是按原样放置所有内容。或者，例如，我们可以这样说：但是让我们仅保留当前像素与上一个像素之间的差异。

如果行中的颜色相同，则将全为零，所有内容都将被完美压缩，这非常酷。



但是，现在让我们谈谈像素的实际含义。一个像素在peengesh中显示为许多数字。通过处理多少个数字，您可以非常非常紧密地压缩PNG-三次。

有哪些选择？第一个是“真彩色”和“ alpha”。我们有三个通道，三种颜色，每种颜色三个数字。加上负责透明度的渠道。

这个数字的大小（以位为单位）为bitDepth，与我们在IHDR块中看到的标志相同。您的bitDepth越小，文件越小，但是可以呈现给它们的颜色越少。典型的数字是8。我认为将有1600万个内容。

好的，您可以做的第一个优化就是丢弃peengesh中的alpha通道。这将是一个不同的colorType。

您甚至可以优化得更好，并且仅使用一个数字而不是四个数字。但是问题是您的peengeshka应该是黑色和白色的。

如果您仍然只需要一个数字并保留颜色，那么也可以这样做。这里发生了什么？您将peengeshka内部的所有颜色都切成一个单独的块。称它为调色板。在样本内部，该区域负责IDAT块中的像素，您只需存储此调色板的索引。如果您有没有复杂背景或任何绘图的屏幕截图，那么这东西就完美了。她挤peengeshki哇！

要说的另一件重要事情是隔行扫描。什么是隔行扫描？这是您逐渐运送peengeshka的时间。您没有一个peengeshka，但有多个图像。每个图像称为扫描。



同时，在paengashka内，对像素进行排序的方式是，某些像素从图片中被撕掉，其中一张图像来自特殊位置。下一部分是另一个，依此类推。看起来很酷的技术，例如渐进式JPEG。

但是看起来像这样。我不确定您是否希望用户看到此消息，尽管它可能对您的任务很有用。

隔行扫描PNG的第二个非常严重的问题是，隔行扫描peengeshka后，peengeshka的大小就会变大。而且不再那么虚弱了，如果您关闭“隔行扫描”，则在几千字节的某个地方您的六千字节peengeshka将会增长。因此，请仔细考虑是否要。



我们仅讨论了PNG，但是从中可以得出重要且有用的结论。第一个结论：文件的大小（您不会相信）取决于在那里绘制的内容。黑色方块的收缩比猫好，我在这里不做任何建议。其次，更重要：文件的大小在很大程度上取决于编码器及其传输的参数。

如果要查看可怕的编码器如何工作，请使用浏览器。怎么做的？提取PNG文件，将其绘制在画布上，然后单击另存为，然后将发生的事情与发生的事情进行比较。一般而言，Chrome会将文件大小增加2.5倍，Firefox则增加1.6倍。

顺便说一句，它也始终取决于格式，也就是说，不仅应使用PNG。让我们了解为什么这一切都取决于格式以及我们仍然拥有哪些有趣的选项。



为此，我们将讨论有关JPEG的古代技术。当然，您不能轻视JPEG的重要性。他们随处可见。它们是如此的酷，好，甚至更是如此，JPEG中的印章是一个相当普遍的故事。但是JPEG是一件相当复杂的事情，并且由于JPEG是有损压缩这一事实而变得很复杂。而且，JPEG始终是有损压缩。 JPEG 100％的质量仍然会压缩而丢失。

我们如何获得有损压缩？很简单。我们获取一些源，丢弃其中的数据，然后进行压缩而不会丢失。也就是说，再加上一步。



让我们看看如何在JPEG中造成损失。因此，您有一只大小为32 x 32的猫。为了使我们迈出第一步，我们需要更改渠道。通常我们用RGB来谈论图片。但是我们认为颜色有些复杂。我们的大脑通常是一个大问题，尽管它可以极大地帮助我们压缩JPEG。

我们对黑白非常满意。即使仔细观察，您也会注意到黑白图像中的细节可以更好地区分。我们只是将此黑白图像放在单独的通道中。它称为Y。实际上是Y形条。我们没有对他做任何事情，我们只是离开他。

还有两个负责颜色的通道。这些是CB和CR。通过这些渠道，我们已经可以玩得开心了。在这里，通过这些通道，我们产生了一个很酷的过程，称为下采样。我们采用并降低此通道的分辨率。对于JPEG，通常减半。也就是说，实际上，您会得到三张照片-一张原始照片和两张一半的照片。万岁！

接下来我们要做什么？我们不压缩JPEG，而不像整个文件一样。我们将其分成多个块并进一步压缩，我们已经在开始块。 JPEG中的块大小为8 x 8，看看它们发生了什么。让我们看一下频道Y。CB和CR都相同。



因此，块不是图片，而是数字。我们需要在JPEG中造成损失。此块为8 x 8、64像素，该丢掉哪一个？左边的一个，右边的一个，中间的一个？不清楚但是有很酷的数学可以让我们解决这个问题。

这个数学叫做-现在，如果有人记得可怕的制度过去，请不要紧张-离散余弦变换。因此，借助此离散余弦变换，您可以在块中转换这些数字，以使它们在其中很重要且不重要。

重要提示：转换后，重要数字保留在块的左上方。在右下角保留不重要的数字。

接下来，您需要使JPEG丢失。这也很容易做到。这个技巧称为量化。抱歉，如果您现在想睡觉，但这很重要，请相信我。因此，这种非常量化的工作方式非常简单。您拿起积木和一块特别设计的盘子。该铭牌由您的编码器程序确定。那些在您的程序段中出现的数字，您可以用这个车牌术语除以数字和整数。结果是什么？

由于该数字在该板的右下部分较大，因此只有零。



同时使用JPEG，您的块将完美压缩。在如此复杂的之字形中，您将绕过少量数字，零将全部消失，并且，加油，我们的块已准备好进行压缩。然后，我们只需要使用无损压缩算法对其进行压缩。 JPEG不管使用什么，都使用霍夫曼编码。



如何包装在容器中？ JPEG容器看起来有些笨，我怕它们。因为您看到前两个字节，并且说这很可能是JPEG。但是到目前为止还不清楚。

接下来，您需要查找两个元数据块。为什么两个？因为JPEG是大量不同的标准。我们所谓的JPEG在标准上称为JIFF。这是JPEG标准的特殊扩展。我将不再继续-一般来说，有两个meta块，请相信我。这些元数据块包含有关文件的宽度和高度以及JPEG版本的信息。想象一下，JPEG有更多版本！此外，它是渐进式JPEG吗？这是一个重要的标志。他谈到了您的区块将如何进一步分布。

如果JPEG不是渐进式的，那么您需要解码什么块？ JPEG品质，这非常板。您将块划分成的盘子就是质量。但是JPEG具有两种性质。第一个质量负责通道Y，第二个质量负责通道CB和CR，这决定了颜色。由于我们将质量存储在文件中，并将所有内容压缩到无损压缩算法中，因此我们还需要特殊的霍夫曼表字典来扩展它。

接下来是您的块，然后JPEG已经结束。



好吧，一个进步的故事。一切都完全一样。在开始时，您会拥有一个元大块。接下来是64位加64位数字形式的质量。然后是相同的块，但分布的数字略有不同。块的第一部分，然后是另一部分，另一部分，依此类推。当您收到这些块时，浏览器会绘制JPEG的近似值，因为实际上这些数字是文件的近似值。



关于JPEG我们完成了，您可以呼气，一切都很好。让我们谈谈JPEG 2000这样有趣的事情。你们生产中的任何人都使用JPEG 2000吗？好吧，谁听说过这个？你们当中谁读过Lighthouse-“使用现代格式”？

通常，JPEG 2000是一种很酷的有趣格式，首先，它比JPEG更有效。其次，您不会相信它，在某些情况下，它比WebP更有效，我们稍后将讨论。

他知道如何透明，知道如何压缩而不会丢失。只是完美的格式。但是很遗憾，是的，它仅在Safari中有效。

值得一提的是，JPEG 2000的设计非常复杂，可以在称为小波变换的出色数学上工作。如果您突然对Google感兴趣，我们将继续。



然后，我们突然需要谈论视频。整个报告是关于图像优化和图像的。但是这里的视频非常重要，您会明白现在为什么。当我们想到视频时，想到的第一个词是“编解码器”。需要对视频进行某种方式的编码，为了显示视频，我们需要对其进行解码。如果我们解码视频流，我们会得到什么？

首先，我们有一组框架。但是不要将这些帧视为GIF中的图片。都错了哪些帧非常依赖编解码器。但是在一般情况下，您可以假设您具有关键帧。您可以将猫从关键帧中取出-从这个意义上讲，此关键帧上的任何图片都不会出现。并且有依赖的框架。不可能使猫摆脱依赖帧，因为依赖帧不仅存储有关图像（如果有）的信息，而且还存储有关前一帧或前一帧的块如何移动的信息。因此，您需要解码一点点才能获得相关帧的图片。

我们现在要谈论的只是关键帧和帧内压缩。这是在关键帧内压缩图片的方式。

让我们在真空中看一个抽象编解码器，并将其与JPEG进行比较。到目前为止看来-为什么这样做？一切都会变得更加清晰，相信我。



我们再次重复与JPEG相同的操作。您拍摄一张照片，将其分成多个通道，然后对通道进行下采样。同样的故事。然后您将这张图片分成几块。但是已经有功能。首先，要插入的块的大小取决于编解码器。这些块可能很大。对于JPEG-8 x8。对于视频编解码器-例如，可以是128 x 128。

更远。如果您要注意图片上的一些非常小的细节，您仍然可以将块细分一些，大约大小为4乘4。如何分割块，此分区算法取决于编解码器。

而最新的-最大块大小再次是特定于您的编解码器的。编码器是编解码器的一部分，用术语可以理解。在这里，我们仍然类似于JPEG。



JPEG看起来不像是预测编码。我们谈论他的部分原因是关于peengeshki。正因为如此，帧内视频压缩非常酷而有效。这里发生了什么？

我们正在尝试根据先前的像素来预测每个块的像素。也就是说，我们不会以原始形式存储像素，而是对其进行预测。预测选项很多。在一个编解码器中，我们可以使用不同的预测变体。此外，对于这些选项的各种复杂编解码器，例如多达35个。你怎么能做到这一点。让我们看一些例子。

在这里，你有块。您说：我想预测那里的像素。您向左看，您向上看并记住左侧和上方的内容。接下来，取所有找到的像素值，取平均值并用一个块填充它，然后说：我预测了。如果您猜对了，顺便说一句，在小图片上有蓝色箭头的地方，您猜对了，那么您就很棒，您无需执行其他任何操作。但是，如果您还没有猜到，那么您需要保存实际值与预测值之间的差异。这个差异压缩得比纯像素值好得多。



然后，一切都与JPEG中的完全相同。您将变换结果块。但是各种不同的编解码器的独特之处在于，您不能使用DCT（离散余弦变换），而可以使用其他东西。使用什么取决于编解码器。



然后再次使用相同的印版，但是与JPEG不同，您可以为整个文件使用多个印版，并且可以对不同的块使用多个不同的印版。想象-您有一个人，例如，天空。也许，因为天空是蓝色的，所以您不需要那里的特殊品质，因此可以为天空使用一种品质，即一块盘子。对于具有任何质感，衣服的人，使用不同的质量，事实证明它凉爽而有效。



最新的是JPEG所没有的，而JPEG非常非常缺乏。这是使用过滤器。当我们都收获时，压缩后我们会得到如此讨厌的伪像。如果您曾经将JPEG压缩为低质量，则应该看到JPEG如何简单地分解成噩梦般的可怕块。通常，为了摆脱这些伪像，视频编解码器使用特殊的东西。他们应用滤镜，这些块的边缘变平滑。古代的技术使我们能够使用JPEG进行相同的处理。提取JPEG，非常非常困难地压缩它，然后像这样弯曲它，以至于没有什么明显的感觉。通常，这大致相同，但是已经在编解码器级别完成了。大。



自然地，当我们尝试并全部完成时，我们现在需要压缩接收到的块而不会丢失。我们挤压，做得很好。压缩算法与JPEG类似，但仍不同。在此必须理解，无损压缩受到自然极限的限制。我们真的很想接近它，而接近它的最佳方法是使用称为算术编码的算法。而且还有各种各样的变化。这再次取决于编码器，但是我们仅假设存在无损压缩和近似值。



长期以来，我一直想用适当的名称来称呼这些抽象编解码器。一次小的历史游览。 20年来发生了什么？我只是在谈论那些至少在某种程度上受网络支持的视频编解码器。 H.264是支持所有内容和所有人的编解码器。这是整个视频的默认解决方案。一段时间后，几年后，VP8视频编解码器出现。

在这里，野战开始了，人们以哪种编解码器哪个更好为主题，欢呼雀跃。我用谷歌搜索了很长时间-没有答案。关于这一点的科学文章很多，但是平均而言，如果我现在同样说的话，一个西红柿会飞向我。但是，好的，它们是相同的。平均。那我们为什么需要一秒钟呢？

第二个是必需的，因为它是免费的。如果使用H.264，则在某些情况下需要携带MPEG现金。对于VP8，您无需携带现金。很好。因此，VP8关键帧-这是WebP。确实，为什么我们要发明一种新的图像格式？我们采用了关键帧，我们非常努力地尝试了所有步骤。我们称其为图片的新格式，瞧！

接下来发生什么？数年之后，又出现了两个同时来自MPEG和Google的超酷视频编解码器。从Google-VP9，从MPEG-H.265。 H.265旁边有一个称为HEIF的新图像标准。浏览器不支持它，一点也不支持。但是您的Apple设备支持它。 HEIF标准非常有趣，因为它只是这个想法的抽象。在HEIF容器中，几乎可以从任何编解码器填充关键帧。也就是说，VP8不是现代格式。但是HEIF是现代的。

接下来发生什么？现在，在一个非常庞大的组织（包括Mozilla和Google）中，人们正在观看一种称为AV1的视频编解码器。该组织称为开放媒体联盟。 AV1视频的质量比以前高出许多倍。他自由，他免版税，他很酷。我们有一个非常不错的HEIF容器。我们剩下的就是将AV1关键帧插入其中。完成了。用于将AV1关键帧推入HEIF容器的新格式称为AVIF。这就是未来的等待。也许有一天我们会在本地使用它。

但是我们现在可以使用它。我们只是将视频中的一帧放在页面上，然后说：瞧，您有图片。



如何在webp中完成？正如我所说，WebP是一个VP8关键帧，打包在一个名为riff的容器中。在riff容器中有这样的标题。在那里，不要相信，这就是WebP。谁会对此表示怀疑。 PNG表示它就是PNG WebP。

但是WebP具有一个有趣的功能：VP8关键帧可以位于其中，这就是通常所说的WebP。但是VP8关键帧可能不是。通常，WebP支持无损压缩。 WebP无损是一种完全不同的格式，与VP8，有损压缩等无关。因此，当有人告诉您WebP比其他方法更有效时，首先要问的问题是WebP的东西？因为如果我们谈论无损压缩，那么我们会努力争取一个自然的通道。这些差异“比……有效60％”更可能不是无损的，而是WebP的损失。

好吧，足够多的理论，厌倦了它，让我们已经看过一些东西了。^_可点击




让我们从这个开始。我们用专业相机拍摄照片。从中切出1000 x 1000像素的片段。顺便说一下，这在投影机上看起来非常酷。我们开始考虑一些小细节。同时，我们压缩此段，以便恰好获得15 KB。^_可点击 查看会发生什么。 JPEG立即陷入困境。的确，低质量的产品是我们期望的。 这就是WebP的样子。它也分成了块，但这些块不是很清晰可见。使用WebP编码器并用手控制它时，可以控制WebP中使用的过滤器的强度。而且，如果您更拧松该过滤器的螺钉，则可以消除大量的块工件。因此，从理论上讲，也可以删除这些块。








这是AV1。让我们静静地欣赏。看他有多酷。 Firefox在Chrome中支持AV1，因此如果您突然想使用AV1视频而不是图片。^_可点击 有一个破坏者，我白白添加了。 PNG击败WebP的情况。是的，在这种情况下，PNG比WebP更有效。这是因为我使用了有损WebP。^_Clickable 我对peengeshka做了什么？我创建了索引颜色模式，即我认为将调色板剪切为16种颜色。对于黑白图片而言，它非常有效。事实证明很好，它非常收缩。对于质量有损的WebP，我们可以使用更大的尺寸。但是，对于无损，这是可以预期的，它比peengeshka更有效。我们赢了。











我总结一下。非常酷的嵌入式panghes可以击败有损压缩格式，并且不能击败无损WebP。可悲，可悲。^_Clickable 也许您为这个问题而烦恼：为什么要这样做，我们知道什么是SVG吗？我知道，但是对于某些大小，PNG效率更高。事实证明，对于200 x 200的尺寸，此图片比SVG更有效。然后，SVG当然会赢。^_点击 现在让我们来看看迈克。这是麦克。其尺寸为3000 x 3000像素。 JPEG与WebP。显而易见，JPEG在取胜。但是在这种情况下，我以大约相同的视觉质量获得了大约6％的胜利。这是照片的功能以及我如何准备这张照片。然后，您可以问我是如何做到的。












^_点击。

不过，一切都在很大程度上取决于编码器的参数。如果您非常努力并以特殊方式松开编码器参数，则JPEG将在大小上以相同的视觉质量击败WebP。我想得出的结论是，猫的收缩能力比JPEG好，但没有。这只是一个示例，说明了如何根据需要将其拧松。 ^_Clickable 这是非常低的质量。 JPEG陷入了困境。这在投影机上尤其明显-鼻子在狗身上变成蓝色，变成正方形。 WebP并不那么恶心。一切看起来都不错，但是事实是，对于非常非常低的质量，WebP所提供的文件大小是JPEG的两倍甚至三倍。因此，在这里您还需要考虑所需的质量。^_可点击









这是最诚实的比较。因此，您必须进行比较，因为H.264和WebP相似。您认为谁赢得了这里？ H.264。但老实说，实验并非完全干净。在WebP和H.264中，以一种很好的方式，视频帧几乎是明确的。^_可单击 但使用AV1，一切都绝对清晰。百分之三十的视觉品质获得了胜利。万岁！^_Clickable 非常重要的一点是了解您所放置的图片类型以及这种格式对图片质量的响应。 WebP格式的狗的质量为79 KB，约为75％，而JPEG为56 KB。为什么会这样呢？











因为不是单一的视频编解码器，所以没有单一的格式可以正确压缩噪声。如果您的图片有很多这样的尖锐失真，斑点和其他东西，那么很可能会遇到压缩问题。如果您可以拍摄其他照片并消除该噪点，请消除噪点。

因此，图片是一件复杂的事情。他们会减慢您的界面速度吗？一个重要而又很好的问题。



答：很可能不是。为什么会发生？因为当图片被解码时，它发生在单独的流中。但是有一个例外-如果您在画布上绘制某些内容，则需要记住，主流中会发生图像解码，并且此时可能不会按下按钮。



如果您真的想达成协议，请打开Chrome，找到相应的光栅化线程和Image Decode事件，即可找到它。



如果您非常好奇，可以转到“跟踪”选项卡，并在那里详细查看解码图像时发生的情况。

优化工具

最重要的是优化工具。现在，我们大致了解了我们想要什么。有待了解我们如何做到这一点。



无论听起来多么奇怪，最重要的图像优化工具都是设计师。只有这个出色的人知道您想与他解决什么问题。我们不会在页面上添加图像以优化它们的酷感，而是给用户留下深刻印象。为了在优化程度和用户体验之间保持平衡，请使用有帮助的设计师。


^{_{幻灯片中的链接}}

第二个工具是我们的火星开源，我答应过谈。这个东西叫做imgproxy，通常可以解决我们所有的问题。在我的项目中，我仅使用imgproxy，此功能几乎可以完成我想要的所有事情。



怎么运行的？你有照片的愿望吗？您需要具有特定优化的特定大小的图片。在遥远的某个地方，您可以看到任何分辨率的图片-可能在本地计算机上，或者在用户的某个位置，或者通常在任何地方。您只需要创建一个特殊的URL并要求imgproxy调整图片大小即可。这是一种服务，它可以在云中或其他地方。也就是说，您有一只大猫，您向imgproxy发送了一个特殊的URL。他可以随时随地完成您想要的一切。



如果这还不清楚，让我们看看对imgproxy的请求是什么样的。首先，您需要确定imgproxy的位置。其次，如果您不希望被吸引，那么您所要求的URL可以进行数字签名。您不能这样做，这只是一种额外的保护措施。

此外，如果要调整大小，则直接在url中传递resize参数。如果您想优化-同样的事情。您只需要传送图片的原始地址即可。



如果您要进行手动优化，则有大量的工具。我现在不会全部描述。该材料的报告，我会送你的，什么都有。



这是最酷和最有用的。这些所有图像都不那么复杂。我想我已成功传达给您。如果您有兴趣，请选择您最喜欢的编程语言-可能是JavaScript，尽管事实并非如此-并开始对其进行整理。

如果要在浏览器中执行此操作，请。您可能需要一个最有可能用加号或C编写的绑定。但是，是什么导致您无法在WebAssembly中将其全部编译呢？有一个很酷的应用程序，称为Squoosh。它确实做到了。您也可以尝试，它会很棒。我很喜欢。

谢谢大家的关注。报告材料-供参考。