Image compression deep-dive

00:31:32
https://www.youtube.com/watch?v=F1kYBnY6mwg

概要

TLDRIl video esplora l'importanza della compressione delle immagini nel web, evidenziando come le immagini rappresentino una parte significativa del traffico dati. Viene presentato Squoosh, un'applicazione per la compressione delle immagini, e si discutono vari formati di compressione, sia con perdita che senza perdita, come JPEG, WebP e PNG. Si analizzano le tecniche di compressione e si forniscono suggerimenti su come ottimizzare le immagini per migliorare le prestazioni del sito web, sottolineando l'importanza di scegliere il formato giusto e di utilizzare le impostazioni appropriate per ottenere i migliori risultati.

収穫

  • 📸 Le immagini rappresentano il 50% del traffico dati su una pagina web.
  • 🛠️ Squoosh è un'app per la compressione delle immagini.
  • 🖼️ JPEG e WebP sono formati comuni per la compressione delle immagini.
  • 🔍 La compressione con perdita riduce la qualità per risparmiare spazio.
  • 🚫 Evita di usare GIF per la compressione delle immagini.
  • 🌐 WebP offre vantaggi rispetto a JPEG in termini di qualità e dimensione.
  • ⚙️ Le impostazioni del codec influenzano la qualità finale dell'immagine.
  • 🎨 La complessità delle forme influisce sulla dimensione del file nelle immagini vettoriali.
  • 📏 Ottimizza le immagini per migliorare le prestazioni del sito web.
  • 💡 Considera sempre le impostazioni del codec per ottenere i migliori risultati.

タイムライン

  • 00:00:00 - 00:05:00

    Inizio della discussione su Remote 203 e l'importanza della compressione delle immagini per il web. Si sottolinea che le immagini rappresentano circa il 50% del traffico di dati su una pagina web e che ci sono molte opportunità di ottimizzazione.

  • 00:05:00 - 00:10:00

    Si parla delle diverse tecniche di compressione delle immagini, sia con perdita che senza perdita. Viene menzionato che molti utenti non ottimizzano le immagini e utilizzano impostazioni predefinite, perdendo così opportunità di miglioramento delle prestazioni.

  • 00:10:00 - 00:15:00

    Si approfondisce il concetto di compressione con perdita e senza perdita, discutendo i vari formati come JPEG, PNG e WebP. Si evidenzia che la compressione con perdita può portare a risultati visivi accettabili anche con file di dimensioni ridotte.

  • 00:15:00 - 00:20:00

    Si analizzano esempi pratici di compressione delle immagini, mostrando come la qualità visiva possa rimanere alta anche con una significativa riduzione della dimensione del file. Si discute anche dell'importanza di non ingrandire le immagini per valutare la qualità.

  • 00:20:00 - 00:25:00

    Si introduce il concetto di campionamento cromatico e come questo influisca sulla compressione delle immagini. Si evidenzia che la percezione umana è più sensibile alle variazioni di luminosità rispetto a quelle di colore.

  • 00:25:00 - 00:31:32

    Si conclude con una riflessione sull'importanza di scegliere il giusto codec per la compressione delle immagini e sull'uso di strumenti come Squoosh per ottimizzare le immagini per il web, sottolineando che la scelta del formato dipende dalle specifiche esigenze e dal contesto.

もっと見る

マインドマップ

ビデオQ&A

  • Qual è l'importanza della compressione delle immagini sul web?

    Le immagini rappresentano circa il 50% del traffico dati su una pagina web, quindi la loro compressione è fondamentale per migliorare le prestazioni.

  • Cosa è Squoosh?

    Squoosh è un'applicazione per la compressione delle immagini che offre vari formati e impostazioni per ottimizzare le immagini.

  • Quali formati di immagine vengono discussi nel video?

    I formati discussi includono JPEG, WebP, PNG e GIF.

  • Qual è la differenza tra compressione con perdita e senza perdita?

    La compressione con perdita riduce la qualità dell'immagine per ridurre le dimensioni del file, mentre la compressione senza perdita mantiene la qualità originale.

  • Perché dovrei evitare di usare GIF?

    Le GIF non sono efficienti in termini di compressione e qualità rispetto ad altri formati come PNG o WebP.

  • Quali sono i vantaggi di WebP rispetto a JPEG?

    WebP offre una migliore compressione, supporta la trasparenza e ha filtri di decodifica superiori.

  • Come posso ottimizzare le immagini per il mio sito web?

    Utilizza strumenti come Squoosh per comprimere le immagini e scegli il formato più adatto in base al contenuto.

  • Cosa significa 'campionamento della crominanza'?

    È una tecnica utilizzata nei codec per ridurre la quantità di dati di colore mantenendo la qualità visiva.

  • Qual è il ruolo della complessità delle forme nella compressione delle immagini vettoriali?

    La complessità delle forme influisce sulla dimensione del file e sull'uso della CPU durante il rendering.

  • Perché è importante considerare le impostazioni del codec?

    Le impostazioni del codec possono influenzare significativamente la qualità e la dimensione del file finale.

ビデオをもっと見る

AIを活用したYouTubeの無料動画要約に即アクセス！
字幕
zh-CN
オートスクロール:
  • 00:00:00
    [音乐]
  • 00:00:13
    - 你好，伙计 - 你好
  • 00:00:15
    这像是Remote 203对吧？很棒吧!
  • 00:00:17
    是的，很特别的感觉
  • 00:00:19
    我们好像有让这些行得通 所需要的所有技术
  • 00:00:25
    但还是不同
  • 00:00:27
    是不是可行就让其他人来评断
  • 00:00:29
    确实如此
  • 00:00:30
    在此我要谈谈图像压缩
  • 00:00:33
    这是我一直想谈的
  • 00:00:36
    我们就这部分编写了完整的应用程序
  • 00:00:39
    是的，待会讲座也会涵盖那个应用程序
  • 00:00:42
    很好，我喜欢
  • 00:00:44
    如果关注对网页的研究 你会发现图像是网页上最重要的组件
  • 00:00:49
    - 每个页面的占比大约一半 - 没错
  • 00:00:52
    平均而言，任何给定页面的流量
  • 00:00:54
    其传输的字节中有50％是图像
  • 00:00:58
    是的，有时为了好玩 我会从网上下载图像并重新压缩
  • 00:01:04
    通常，我可将档案大小减半 且不会损失任何视觉保真度
  • 00:01:09
    所以可以说有太多网页内容
  • 00:01:11
    可以更好地进行压缩
  • 00:01:13
    包括使用其他格式
  • 00:01:15
    使用更好的编码器 或像是优化编码器的设置
  • 00:01:19
    是的，我也发现了
  • 00:01:21
    我最近做了些实验并发现
  • 00:01:23
    即使不深入编码器的内部设置
  • 00:01:28
    也会发现，人们通常根本不优化图像
  • 00:01:32
    而采用Squoosh的默认设置
  • 00:01:36
    但这样已经有很不错的压缩率且不失真
  • 00:01:41
    所以，如果您在家观看本视频
  • 00:01:42
    又是那种只会用Photoshop 来存储网路图像的
  • 00:01:46
    那今天的主题正适合您 因为我要对此进行讨论
  • 00:01:50
    因为我认为，您过去错失很多性能提升的机会
  • 00:01:53
    所以我想深入探讨图像编解码器 并展示其运作原理
  • 00:01:56
    进而探索一些较不为人所知的设置
  • 00:01:59
    有这些格式
  • 00:02:01
    当中可见有损压缩，例如JPEG和WebP
  • 00:02:03
    无损压缩的有PNG，GIF和WebP
  • 00:02:06
    等一下，伙计
  • 00:02:09
    你把GIF当作无损压缩吗？
  • 00:02:13
    它们是无损的呀！
  • 00:02:15
    即使它是256色模式？
  • 00:02:18
    是的，但在压缩前得更改设定
  • 00:02:21
    这是因为GIF压缩器 不接受比256色模式更复杂的图像
  • 00:02:25
    所以压缩前有其必要步骤
  • 00:02:28
    它确实是无损的，相信我
  • 00:02:30
    -好吧 -因为PNG也是这样
  • 00:02:33
    不过我想问你
  • 00:02:35
    - 如果你用数字绘图 - 嗯
  • 00:02:39
    例如计算机绘图
  • 00:02:41
    你会用哪种格式？
  • 00:02:43
    如果可能的话，SVG
  • 00:02:46
    对，我同意
  • 00:02:48
    因为它可以是任何分辨率 因此是绘图的理想选择
  • 00:02:51
    但是有时绘图的图像很复杂
  • 00:02:54
    作为无损图像，SVG 实际上尺寸更小，压缩更快
  • 00:02:59
    但是话又说回来 如果绘图有很多渐变和阴影
  • 00:03:02
    对用户来说，在视觉效果不会太糟的情况下
  • 00:03:04
    以有损格式存储，档案可能会更小
  • 00:03:08
    我看过很多有关压缩的讲座和文章
  • 00:03:11
    他们试过以不同格式储存图像
  • 00:03:13
    对此我认为这可能有些误导
  • 00:03:15
    不过，在此我反倒要谈论的是
  • 00:03:18
    这些格式实际占用的字节是怎样分配的
  • 00:03:21
    好的
  • 00:03:22
    有损压缩图像，很难避免锯齿边缘
  • 00:03:26
    连带加大了图档的档案大小
  • 00:03:30
    还有在不用太详尽的地方的一些小细节
  • 00:03:34
    这听来有点令人困惑 所以过会儿我们来看几个例子
  • 00:03:38
    对于无损压缩，问题则是颜色变化 特别是不可预测的那种
  • 00:03:43
    这部分我们也会有些例子
  • 00:03:45
    还有颜色总数也会影响档案大小
  • 00:03:49
    对于矢量，档案大小会因 形状数和形状复杂性加大
  • 00:03:53
    矢量有一点特别之处
  • 00:03:56
    就是形状的复杂性 导致CPU使用成本增加
  • 00:04:01
    这点与其他格式不同 所以请留意这部分
  • 00:04:05
    这就是本讲的概略(tl;dr)
  • 00:04:07
    真的，就这样而已
  • 00:04:09
    好，谢谢你，下次再见
  • 00:04:12
    再见--没有啦
  • 00:04:14
    我想深入了解这些编解码器 我们就直入主题
  • 00:04:18
    只是先厘清一下，你刚才说这些是编解码类型
  • 00:04:21
    好比这些类都各有数个编解码器
  • 00:04:25
    我认为你基本上 就是用相同图像去试
  • 00:04:30
    例如，如果您不知道图像属于哪一类
  • 00:04:33
    只需在这些编解码器中尝试
  • 00:04:36
    那是理想的步骤，对吗？
  • 00:04:40
    是的，但是你可以 在所拥有的知识基础上
  • 00:04:42
    做出一些有根据的猜测
  • 00:04:45
    Surma, 看看这个
  • 00:04:47
    我知道这有些困难
  • 00:04:49
    因为您正通过WebRTC观看此视频 辨别起来会略受限制
  • 00:04:54
    您注意到照片的特殊地方了吗？
  • 00:04:58
    有的，如果它不是流压缩
  • 00:05:01
    我觉得在处理云朵时 存在块效应问题
  • 00:05:07
    我认为这是流压缩
  • 00:05:10
    哦，那再试一把
  • 00:05:14
    当您问我它的特殊性
  • 00:05:16
    是指图像存在什么问题
  • 00:05:19
    还是让我猜猜 哪种编解码器最适合它？
  • 00:05:24
    好吧，如果你还没有注意到
  • 00:05:26
    那对我来说已经足够了
  • 00:05:28
    如果您在家用全高清观看视频
  • 00:05:32
    那它是1920 x 1080
  • 00:05:34
    显然，您还获得了视频压缩
  • 00:05:37
    所以您看不到和我所见到的不同
  • 00:05:39
    但是这张照片的亮度数据是
  • 00:05:42
    1920 x 1080的全高清
  • 00:05:45
    但此图像中的颜色数据为96 x 54
  • 00:05:50
    只占数据的0.3％
  • 00:05:53
    而你几乎没留意到
  • 00:05:55
    拉近些，您可以看到
  • 00:05:57
    一些围栏周围有些变色
  • 00:06:00
    其中一个好像没了
  • 00:06:03
    是的，如果颜色的分辨率那么小
  • 00:06:07
    颜色会在边界处消失
  • 00:06:10
    即使光线数据仍能给出轮廓
  • 00:06:13
    所以 -
  • 00:06:15
    但是你几乎没注意到-
  • 00:06:16
    是
  • 00:06:17
    这是因为你眼神不好
  • 00:06:20
    这种糟糕的人眼
  • 00:06:22
    对颜色的变化非常不敏感
  • 00:06:25
    但实际上，你非常擅长于 观察亮度的变化
  • 00:06:27
    我要把这张照片变一下
  • 00:06:30
    把亮度变成低分辨率
  • 00:06:32
    但颜色变成高分辨率
  • 00:06:35
    好了
  • 00:06:37
    您注意到的第一件事 这看不清
  • 00:06:40
    但数据量是相同的 只是调转了一下
  • 00:06:45
    这样就行
  • 00:06:48
    示例中没有表现特极端的
  • 00:06:50
    这个图像的色彩数据比较复杂
  • 00:06:55
    您可以看到路上的黄线 和车的红色条纹
  • 00:06:58
    其中有很多块状的地方
  • 00:07:00
    但是随着我们增加 颜色数据量
  • 00:07:04
    再次，变得较难识别
  • 00:07:06
    一旦颜色数据
  • 00:07:08
    到5％左右
  • 00:07:12
    我就无法识别了
  • 00:07:14
    我还构建了一个Web应用 来对此进行研究呢
  • 00:07:17
    是的
  • 00:07:19
    这是我写的第一个WebGL，Surma
  • 00:07:22
    哦，是使用WebGL完成的 那会很有趣！
  • 00:07:24
    是的，进行颜色转换
  • 00:07:26
    您也可以- 我将链接放在这里
  • 00:07:28
    您可以将自己的图像放进去 会得到一些很酷的效果
  • 00:07:31
    这样您就可以看到各个颜色通道
  • 00:07:33
    因为这就是有损编解码器所做的
  • 00:07:36
    被称其为色度二次采样
  • 00:07:38
    而不是RGB，先是亮度 然后是两个颜色通道
  • 00:07:43
    这意味着可以省去这些颜色数据
  • 00:07:46
    因此节省了许多文件的大小
  • 00:07:49
    如前所述，会出现一些褪色
  • 00:07:52
    但这几乎不被觉察
  • 00:07:54
    特别是在摄影图像中
  • 00:07:58
    有损编解码器 在有损方面还有一点
  • 00:08:03
    Surma，这是另一个小测验
  • 00:08:05
    我对此图像进行了处理
  • 00:08:07
    你看到我做了什么吗？
  • 00:08:09
    在树之间 有一个非常不祥的圆圈
  • 00:08:13
    是的，我在空中画了一个圆圈
  • 00:08:15
    在那里 但还不完全对
  • 00:08:18
    在这里，我用噪声替换了亮度数据
  • 00:08:22
    只是白噪音
  • 00:08:25
    但您起初并没有注意到这个
  • 00:08:28
    有趣的是
  • 00:08:29
    这个图与原图的差异
  • 00:08:32
    现在，天空中的圆圈很微弱
  • 00:08:37
    几乎看不出
  • 00:08:38
    实际上，如果您正通过 视频压缩观看此视频
  • 00:08:41
    可能根本看不见
  • 00:08:42
    我就看不见
  • 00:08:45
    但是那底部的噪音 成了一个巨大的差异
  • 00:08:50
    但是，人的眼睛很糟糕
  • 00:08:52
    只善于看到我们所说的 低频区域的细微变化
  • 00:08:55
    像天空，那里没有太多的东西
  • 00:08:57
    您会发现细微的差异
  • 00:08:59
    而很难看到高频区域的变化
  • 00:09:02
    这使我想起了我们的盲点
  • 00:09:07
    大脑为我们填补了那里的空白
  • 00:09:09
    因为我看到了圆圈
  • 00:09:12
    你给我看了差异 并还原到完整的图像
  • 00:09:15
    我看到那圆圈
  • 00:09:16
    然后它的形状融入整个环境
  • 00:09:19
    现在，看起来像灌木丛 我也知道圆圈在那里
  • 00:09:21
    但我却看不到它
  • 00:09:23
    所以我认为这是大脑在自动校正
  • 00:09:26
    我很讨厌这点
  • 00:09:28
    确实如此 也是有损图像编解码器的一部分
  • 00:09:32
    它们利用了这一点
  • 00:09:35
    就是把这样的拍摄图像
  • 00:09:37
    划分成8x8块
  • 00:09:39
    它们不是逐个用像素描述
  • 00:09:43
    而是用这个
  • 00:09:44
    用一块块的形状相乘
  • 00:09:47
    以形成完全相同的图像
  • 00:09:49
    不是一种强度
  • 00:09:51
    每个方块的强度可能不同
  • 00:09:53
    甚至可以是负片
  • 00:09:55
    但是您可以使用这些形状
  • 00:09:57
    重建任何8x8的图像
  • 00:10:00
    这让我特震惊 差点不能相信
  • 00:10:03
    我至今还是不相信 即使我构建了一个应用来表现它
  • 00:10:07
    看，我为HTTP 203 制作了一个像素艺术203
  • 00:10:10
    我不太擅长像素艺术 但我至少尝试着做了
  • 00:10:13
    [Surma 笑]
  • 00:10:15
    但是你看到的，在下方的
  • 00:10:17
    是所有不同强度的小图形 用于重建该图像
  • 00:10:23
    实际上，每个都用上了
  • 00:10:26
    您会发现,如果用低频的
  • 00:10:28
    图像就比较模糊
  • 00:10:32
    而当它们变成高频时
  • 00:10:35
    图像就变得清晰了
  • 00:10:38
    我真的怀疑它的可能性 但这确实有效
  • 00:10:42
    这确实不会节省太多数据
  • 00:10:45
    让我们看一个真实的图像
  • 00:10:46
    这是以前树林的照片
  • 00:10:48
    我选一片草地
  • 00:10:51
    有损编解码器要做的是
  • 00:10:53
    尝试放弃一些数据
  • 00:10:55
    所以您可以看到 它并没有使用所有这些形状
  • 00:10:57
    这就是为什么有这些0
  • 00:10:59
    当我降低画面质量 这里也就是JPEG质量
  • 00:11:05
    我们可以看到越来越多的0出现
  • 00:11:09
    零序列 使其压缩得非常好
  • 00:11:13
    所以剩下的图像并不是100％准确的
  • 00:11:15
    但这是高频数据
  • 00:11:17
    你根本看不出来 节省了大量的数据
  • 00:11:19
    我是说，即使 这两张并排的图
  • 00:11:22
    很难看出哪些像素有问题
  • 00:11:26
    太对了
  • 00:11:28
    让我们举一个不同的例子
  • 00:11:29
    这次是一个弯曲图，可能是 标志或其他东西的一部分
  • 00:11:33
    在这种情况下 即使稍微降低一点儿质量
  • 00:11:36
    白噪音非常的明显
  • 00:11:39
    特别是在该曲线的两边 都是纯色的情况下
  • 00:11:42
    那是低频数据
  • 00:11:44
    少量的白噪音就很明显
  • 00:11:46
    就像那个天空中的圆圈
  • 00:11:48
    很容易分辨出来
  • 00:11:51
    这就是为什么有损压缩
  • 00:11:53
    处理纯色旁边的硬线条不是很好
  • 00:11:57
    现在您看这张图片 它是高度压缩的JPEG
  • 00:12:00
    放大些，您可以看到它的组成
  • 00:12:03
    您可以从二次采样中 看到褪去的颜色
  • 00:12:05
    您可以看到8x8的方块
  • 00:12:07
    您可以看到 用于构建数据的那些波形
  • 00:12:11
    就这样，您现在知道了 有损压缩的工作原理
  • 00:12:13
    对于JPEG和WebP 只有两个损失要素
  • 00:12:18
    就是这样 您现在都已经看到了
  • 00:12:21
    我有个问题 我在想WebP
  • 00:12:25
    也是这种基于频率的转换
  • 00:12:31
    所谓的离散余弦转换
  • 00:12:33
    转换为该频率模式 然后将它们加合
  • 00:12:36
    是的，那就是我们刚刚看到的
  • 00:12:39
    如果是低噪音
  • 00:12:41
    WebP也会用更大的方块
  • 00:12:45
    但是我不确定
  • 00:12:48
    是的，WebP更好些
  • 00:12:50
    这是有几点要注意 就像你所说的
  • 00:12:52
    它可以使用不同大小的正块
  • 00:12:54
    当您开始一个方块时
  • 00:12:56
    可以从附近的方块 开始作为起点
  • 00:13:00
    而且，JPEG必须对给定通道中
  • 00:13:04
    每个8x8方块使用 相同的数学转换方法
  • 00:13:07
    是吗
  • 00:13:08
    而WebP可以用四种
  • 00:13:10
    因此，对于多细节区域 和少细节区域
  • 00:13:14
    它可能有不同的策略
  • 00:13:15
    而且它还有更好的无损压缩功能
  • 00:13:18
    使用算术压缩而不是 Huffman
  • 00:13:21
    而且它的后解码过滤器更好
  • 00:13:23
    所以它更好
  • 00:13:25
    它还支持Alpha透明度 而JPEG不支持
  • 00:13:29
    那我为什么浪费时间 谈论JPEG？
  • 00:13:33
    因为...
  • 00:13:36
    Safari不支持WebP 这是唯一不支持它的浏览器
  • 00:13:41
    因此，这是JPEG的唯一好处
  • 00:13:43
    真的
  • 00:13:45
    我们仍然可以使用WebP 只要浏览器支持它
  • 00:13:48
    这是图片元素 我们支持
  • 00:13:51
    支持WebP的浏览器 也支持使用JPEG的
  • 00:13:53
    Safari和旧版浏览器
  • 00:13:55
    在服务器端也有客户提示
  • 00:13:58
    我不打算讨论它
  • 00:13:59
    如果您感兴趣 我会放一些链接
  • 00:14:03
    因此，让我们压缩一些图像
  • 00:14:08
    现在的压缩工具 诸如Photoshop之类的东西
  • 00:14:11
    不是特别好
  • 00:14:12
    这是我们构建 Squoosh的原因之一-
  • 00:14:15
    不只是我们两个 我们是个团队
  • 00:14:18
    好了，Squoosh.app
  • 00:14:19
    它具有最新的WebP版本 也有MozJPEG
  • 00:14:22
    来自Mozilla的一个 非常好的JPEG编码器
  • 00:14:25
    所以我用之前的F1图片
  • 00:14:29
    因为压缩它有点难度
  • 00:14:31
    我要做的第一件事是将其缩小
  • 00:14:33
    这样它的大小 与网站上显示的大小相同
  • 00:14:37
    如果您的图片为1000 CSS像素
  • 00:14:40
    但您希望它在HD屏幕上看起来不错
  • 00:14:42
    您想要一个2000像素宽的图像
  • 00:14:44
    然后，您想将其缩小
  • 00:14:46
    正好是在屏幕上显示的尺寸
  • 00:14:50
    为了压缩 我开始使用WebP
  • 00:14:53
    我要做的就是 我想之前提到过
  • 00:14:55
    只是降低质量 直到看不清
  • 00:14:59
    尤其是像这种高密度图像
  • 00:15:02
    您会惊讶 它的质量能低到什么程度
  • 00:15:07
    您仍然无法看出
  • 00:15:10
    有件事很诱人
  • 00:15:13
    但是请不要 不要把鼻子贴到屏幕上
  • 00:15:16
    不要放大
  • 00:15:18
    因为如果您这样做了 它会看起来很糟糕
  • 00:15:22
    看起来不会很好
  • 00:15:24
    放大得越多 看起来越糟
  • 00:15:26
    呃，看那个，真恶心
  • 00:15:29
    老实说，考虑到
  • 00:15:32
    我们已经减少了98％的数据
  • 00:15:37
    即使放大后，仍然看起来不错 不是很酷吗
  • 00:15:42
    是的，不可思议
  • 00:15:44
    所以，如果有人对你说
  • 00:15:46
    我从您的网站上下载了一张图片
  • 00:15:48
    我将其放大了1000％ 看起来很糟
  • 00:15:52
    就说“有病”，然后别理他们
  • 00:15:56
    因为那不是真正的用户会做的
  • 00:15:59
    您应该优化一切 为的是实际用户
  • 00:16:02
    因此，请使其大小 保持在网站上的大小
  • 00:16:05
    我研究了一下WebP中的 一些高级设置
  • 00:16:08
    因为当我们第一次构建Squoosh时 我并不知道它们的功能
  • 00:16:11
    我拿了编解码器所做的 制作了UI
  • 00:16:14
    - 很多功能 - 我不知道它们是干什么的
  • 00:16:17
    我还做了一些研究
  • 00:16:19
    有些很有趣的东西： 自动调整过滤器
  • 00:16:22
    这个不错
  • 00:16:23
    这确实减慢了编码时间
  • 00:16:26
    但却大大改善了视觉效果
  • 00:16:29
    该过滤器实际上是 一个解码过滤器
  • 00:16:33
    这可以消除那些模糊的小块块
  • 00:16:35
    但这会增加编码时间
  • 00:16:38
    因为它通过查看图像
  • 00:16:40
    来找出最佳的过滤方式
  • 00:16:45
    是的，它只是个一位标记 或者不是一位，而是两位
  • 00:16:51
    我想如果是八级的滤镜清晰度 应该是三位标记
  • 00:16:54
    对，是这样的 我认为实际上可能还更多
  • 00:16:57
    实际上可能从0到100
  • 00:17:00
    可能是一个字节
  • 00:17:02
    另一个，我一直都知道： 它对图像做了很大的改变
  • 00:17:05
    但是我不知道它在做什么 这就是空间噪声整形
  • 00:17:09
    针对WebP可以有 四种不同的策略
  • 00:17:11
    我们是不是拼错了“空间的”
  • 00:17:17
    哦，也许吧
  • 00:17:19
    [Surma笑]
  • 00:17:21
    哦，这太经典了
  • 00:17:22
    你知道逗的地方
  • 00:17:25
    我在笔记中就拼错了
  • 00:17:28
    好吧，那是一个错误报告
  • 00:17:30
    无论如何，下一个 是空间噪声整形
  • 00:17:35
    因此，WebP可以针对图像的不同部分
  • 00:17:37
    采用这些不同的策略
  • 00:17:39
    SNS所做的是改变了
  • 00:17:42
    这些不同策略之间的极端性
  • 00:17:45
    因此，较高的SNS会将 字节从最不需要它的内容中删除
  • 00:17:48
    并将其提供给最需要的地方
  • 00:17:51
    这就像Robin Hood用于图像压缩
  • 00:17:54
    在某些图像中 将其设置为100可产生积极的效果
  • 00:17:58
    这里没有，对于该图像 实际上50就相当不错了
  • 00:18:02
    会不会太高
  • 00:18:04
    就像设的太高 图像反而变差了
  • 00:18:07
    会的
  • 00:18:09
    对于这个图像 的确会变得更糟
  • 00:18:11
    有趣
  • 00:18:13
    如果我在这里极端些 就会为道路提供更多数据
  • 00:18:18
    因为那是小块块所在之处
  • 00:18:20
    但这会使汽车的轮胎 看起来很糟糕
  • 00:18:25
    我懂了
  • 00:18:26
    您会开始注意到那些块效应
  • 00:18:28
    因为它正在将数据从高频区域移走
  • 00:18:31
    而补充低频区域
  • 00:18:33
    刚才看到的树林那张
  • 00:18:36
    实际上，SNS设为100非常有效
  • 00:18:38
    因为从叶子那里拿走了 很多您看不到的白噪音
  • 00:18:40
    并将其传递到天空区域
  • 00:18:44
    所以它显得很好
  • 00:18:47
    我们也有JPEG
  • 00:18:49
    只是为了好玩
  • 00:18:51
    我使JPEG与WebP的大小相同
  • 00:18:54
    只是为了显示 此处压缩质量的差异
  • 00:18:58
    所以我必须再次用这个
  • 00:19:01
    质量下降到大约40 KB
  • 00:19:04
    我要去做 我说不要做的事
  • 00:19:06
    就我来说 我觉得真的很糟糕
  • 00:19:09
    但是通过视频压缩
  • 00:19:11
    可能不那么明显 所以我将其放大
  • 00:19:15
    JPEG造成了马路上的块状效应 这种后果很可怕
  • 00:19:18
    就像我说的 这是低频数据
  • 00:19:20
    这就像天空中那个圆圈 非常明显
  • 00:19:24
    在黄线周围
  • 00:19:26
    从黄线到马路的过渡
  • 00:19:28
    使得丢失数据的地方非常明显
  • 00:19:31
    您会在那里看到块状效应
  • 00:19:32
    这就是WebP过滤要好得多的地方
  • 00:19:37
    我只需要增加JPEG的大小
  • 00:19:39
    直到这种可怕的小块块消失
  • 00:19:42
    在这个时候 好像是WebP的两倍
  • 00:19:45
    超过了两倍
  • 00:19:49
    如果您愿意花时间 可以做进一步的改善
  • 00:19:53
    更高级的设置
  • 00:19:54
    这里最有趣的高级设置 我认为是色度二次采样
  • 00:19:58
    我们之前讨论过
  • 00:19:59
    就是减少颜色数据
  • 00:20:02
    特别是在高密度屏幕上时 看不太出来
  • 00:20:05
    实际上，大多数时候 您可以将其设到4
  • 00:20:08
    但这张有些特殊
  • 00:20:10
    对减色比较敏感
  • 00:20:13
    所以3比较好 但这敲掉了10K
  • 00:20:16
    但值得
  • 00:20:18
    我也经常将其与 单独的色度质量合用
  • 00:20:21
    这样您就可以只将颜色引入小块块
  • 00:20:25
    而亮度不变 这样数据就少很多
  • 00:20:28
    那很有意思 但我从来没有成功过
  • 00:20:31
    我尝试过 但对结果始终不满意
  • 00:20:35
    但是的，可以数据可以不同
  • 00:20:38
    是另一种可能
  • 00:20:39
    人们可以试一试
  • 00:20:42
    绝对的
  • 00:20:44
    在这种情况下，我认为对于 WebP和JPEG值得一试
  • 00:20:48
    因为它的大小 只有支持它的浏览器的一半
  • 00:20:51
    这就是 我要谈的有损压缩
  • 00:20:55
    您说您对这些选项 进行了大量的研究
  • 00:20:58
    那无意义的规范合规性 到底是什么？
  • 00:21:02
    无意义的规范合规是指
  • 00:21:04
    根据JPEG规范的严格规定 删除了逐行编码和其他一些内容
  • 00:21:11
    而这是不应该做的
  • 00:21:14
    但每个人都支持它 而且对文件大小很有用
  • 00:21:17
    我以为我会让你冷场
  • 00:21:20
    但你知道答案 做得好
  • 00:21:22
    我没研究过JPEG 但从编码器中了解到的信息
  • 00:21:25
    我知道了答案
  • 00:21:28
    无损压缩是一个完全不同的世界
  • 00:21:32
    无损压缩一个个的描述像素
  • 00:21:34
    从上到下，从左到右
  • 00:21:37
    但是与其从头开始描述每种颜色
  • 00:21:40
    它会使用周围的 一些像素进行预测
  • 00:21:44
    然后只是编码差异
  • 00:21:46
    可以使用多种策略 可以对照左侧的像素
  • 00:21:50
    上面的像素
  • 00:21:52
    也可使用其中一些像素的平均值
  • 00:21:55
    但这里有个小陷阱 它无法对每个像素都更改策略
  • 00:21:59
    因为那样会增加太多数据
  • 00:22:01
    相反，它必须坚持某一特定的策略
  • 00:22:04
    直到决定改变策略为止
  • 00:22:06
    PNG只能在一开头更改策略
  • 00:22:11
    WebP可以对2D块定义不同的策略
  • 00:22:15
    这就是为什么无损压缩器很慢的原因
  • 00:22:18
    因为它一直在通过 这些不同的策略
  • 00:22:20
    来找出哪种才是最好
  • 00:22:24
    就像尝试所有组合一样
  • 00:22:26
    如果其旁边的或上方的 像素完全相同
  • 00:22:28
    这意味着这种压缩效果会很好
  • 00:22:31
    因为其间没有区别
  • 00:22:32
    所以很容易压缩
  • 00:22:35
    这也是为什么无损格式 难以处理照片的原因
  • 00:22:37
    因为有很多自然的颜色变化
  • 00:22:41
    哦，无损压缩还有另一招
  • 00:22:44
    如果少于256种颜色
  • 00:22:46
    用颜色表格就行 在表格中，它们有各自的编号
  • 00:22:49
    因此，不用每次 说红色，绿色，蓝色和透明
  • 00:22:52
    只是说：伙计，5号色
  • 00:22:55
    好了，把它放在那里
  • 00:22:56
    压缩效果非常好
  • 00:22:58
    那么格式之间的差异
  • 00:23:01
    WebP-没有多少人知道 无损的WebP格式
  • 00:23:05
    这像一个完全不同的编解码器
  • 00:23:07
    实际上，它是一个完全 不同的编解码器
  • 00:23:10
    两者之间的唯一关系是 当使用Alpha通道进行有损WebP时
  • 00:23:13
    它对Alpha通道使用无损格式
  • 00:23:16
    对大多数人来说毫无意义
  • 00:23:18
    哦，很高兴知道这个
  • 00:23:19
    是的，只是更好
  • 00:23:21
    它有更多的策略 可以对2D进行处理
  • 00:23:24
    压缩效果更好
  • 00:23:26
    但是Safari确实需要PNG 我们提到过
  • 00:23:30
    但永远不要使用GIF
  • 00:23:31
    就是请别用
  • 00:23:33
    永远不要使用它 什么都不好
  • 00:23:35
    真不好
  • 00:23:37
    因此，请停止使用GIF
  • 00:23:41
    让我们将这些内容实践一下
  • 00:23:44
    现在回到Squoosh
  • 00:23:45
    我将使用很多纯色的东西
  • 00:23:49
    我要感谢Stephen Waller
  • 00:23:51
    把他的作品捐给我 在这里使用
  • 00:23:53
    他是个艺术家 我以前的同事
  • 00:23:55
    他制作了这些精美的图画
  • 00:23:57
    其实，这些是他当时 一起工作的队友
  • 00:24:00
    我没有问他那值熊的轶事 那没什么
  • 00:24:05
    要做的第一件事 和以前一样，将其缩小
  • 00:24:08
    保持在网站上相同的大小
  • 00:24:12
    在高密度设备中
  • 00:24:14
    需要使用的缩放比例
  • 00:24:17
    现在我去使用WebP
  • 00:24:20
    因为那是最好的 我选择无损
  • 00:24:23
    是的，完全不同的编解码器
  • 00:24:26
    很少有人知道 但这真的很好
  • 00:24:27
    我们直接降至43K
  • 00:24:30
    有这个“损失一点”的选择 我觉得很有趣
  • 00:24:34
    特棒，是吧
  • 00:24:36
    它将改变像素 使它们更可预测
  • 00:24:40
    我实际上不喜欢它的视觉效果
  • 00:24:44
    所以我不太用它
  • 00:24:45
    但是您的习惯可能有所不同
  • 00:24:47
    尝试一下会很有趣
  • 00:24:49
    但记得我之前说过
  • 00:24:51
    这些格式，如果不超过256色 会表现不错
  • 00:24:54
    我们要这样做 减少调色板的颜色
  • 00:24:57
    这张图像看起来没有太多的颜色
  • 00:25:00
    由于曲线周边的反走样效果
  • 00:25:02
    从一种颜色过度到另一种颜色 有很多细微的变化
  • 00:25:07
    我也将编解码器变成浏览器PNG
  • 00:25:09
    那只是因为压缩特别快
  • 00:25:12
    当我更改颜色号码时 我将得到快速响应
  • 00:25:15
    我还要关掉抖色
  • 00:25:18
    如果减少颜色的数量
  • 00:25:21
    您可以在此处看到 这种条纹效果
  • 00:25:24
    抖色通过点画法
  • 00:25:26
    消除条纹
  • 00:25:29
    或用这些点来重新创建阴影
  • 00:25:32
    超级有效
  • 00:25:33
    但无损压缩 处理单色效果很好
  • 00:25:36
    因此会增加文件大小
  • 00:25:38
    因此，除非确实需要 否则我会避免使用它
  • 00:25:42
    这让我印象深刻
  • 00:25:43
    我通过抖色 将几张照片压缩为PNG
  • 00:25:48
    如果把它们缩小，足够小
  • 00:25:50
    实际上看起来
  • 00:25:52
    和原版几乎一样
  • 00:25:54
    通常让人不可察觉
  • 00:25:57
    是的，有时候 您需要这样做
  • 00:26:00
    所以现在和以前一样 我将尽可能降低色调
  • 00:26:03
    直到看起来不好为止
  • 00:26:07
    这就是我们构建 Squoosh的原因之一
  • 00:26:09
    因为通过视觉响应做到这一点
  • 00:26:12
    比让计算机尝试解决这个问题好得多
  • 00:26:16
    因为它不会做得很好
  • 00:26:19
    重要的建议 和以前一样，不要放大
  • 00:26:22
    因为它看起来会很糟
  • 00:26:24
    你可以看到 这些生硬的边
  • 00:26:27
    但是缩小，您几乎注意不到
  • 00:26:29
    那样就好
  • 00:26:31
    这就是用户能看到的 就可以了
  • 00:26:33
    我们已经能够将颜色减少到68种
  • 00:26:36
    现在我们要切换回WebP
  • 00:26:42
    把效果调高
  • 00:26:43
    让它使用所有迭代来进行压缩
  • 00:26:46
    就这样
  • 00:26:47
    降至13K
  • 00:26:49
    棒极了
  • 00:26:51
    对吧，节省得令人难以置信
  • 00:26:56
    对于Safari，我们需要PNG
  • 00:26:59
    PNG压缩器多种多样
  • 00:27:02
    我们使用OxiPNG 这是一个非常不错的选择
  • 00:27:04
    它将降至17K
  • 00:27:08
    那接近第二，很不错
  • 00:27:10
    很接近
  • 00:27:12
    我要推荐OxiPNG 随附的ImageOptim
  • 00:27:14
    还有很多其他的PNG压缩器
  • 00:27:18
    我们都想随后添加到Squoosh中
  • 00:27:20
    但还没有
  • 00:27:21
    能使文件大小进一步减少
  • 00:27:24
    实际上，仅3K
  • 00:27:27
    所以在这个例子中，我忽略它
  • 00:27:30
    除非页面上有大量图片 这种差异加起来会突显
  • 00:27:33
    否则就关注于PNG
  • 00:27:34
    3K不值得搞得那么复杂
  • 00:27:37
    因此，与其为特定类型的图像
  • 00:27:39
    考虑压缩格式
  • 00:27:42
    我的理解是 考虑压缩的实际工作原理
  • 00:27:46
    并以此作为您的第一个猜测
  • 00:27:47
    但是正如您之前所说
  • 00:27:48
    总是值得尝试其他方法
  • 00:27:50
    因此，我将看一些边的情况 来结束此讲座
  • 00:27:54
    看这个
  • 00:27:56
    太漂亮了
  • 00:27:57
    这是SVG
  • 00:28:00
    我正要说 这看起来像
  • 00:28:02
    CSS美术师仅需十亿个div
  • 00:28:06
    以及渐变和阴影
  • 00:28:07
    然后像照片一样逼真的东西 就是CSS
  • 00:28:11
    差不多就是这么回事 但使用了SVG
  • 00:28:15
    我认为这是人工创建的
  • 00:28:16
    是的，非常相似 如果我在SVG OMG中将其缩小
  • 00:28:19
    这是我制作的GUI 但是基于SVGO
  • 00:28:23
    是一个节点应用
  • 00:28:26
    我可以将其降到37K
  • 00:28:30
    但这太复杂了 并使用了很多过滤器
  • 00:28:32
    调整后就会有问题
  • 00:28:34
    这还是在高端的MacBook上
  • 00:28:36
    占用了大量CPU 来渲染该图像
  • 00:28:41
    而在Squoosh中
  • 00:28:42
    有损WebP真的很棒，大约53K
  • 00:28:46
    它实际上比SVG大
  • 00:28:48
    但是节省CPU其实是个更好的决定
  • 00:28:52
    这很有趣 因为那是Squoosh
  • 00:28:55
    不允许您量化的东西，对吧？
  • 00:28:59
    节省CPU
  • 00:29:01
    是的
  • 00:29:03
    如果我们能找到某种方式 做到这一点就太好了
  • 00:29:06
    是的，是比较棘手
  • 00:29:08
    就这张图片 您会注意到加载多慢
  • 00:29:11
    并且在SVG OMG中 调整大小的速度多慢
  • 00:29:15
    所以这是一个好的提示
  • 00:29:17
    相当于PNG 因为我们不能使用JPEG
  • 00:29:20
    因为它具有alpha透明性 PNG为86K
  • 00:29:24
    而且我不得不减少颜色 因为带来很多条纹
  • 00:29:28
    所以我必须使用抖色 这实际上很明显
  • 00:29:31
    您可以看到这些点
  • 00:29:32
    那不好，但是不 减少色调，将为300K
  • 00:29:36
    在这种情况下，您可能会说
  • 00:29:38
    对不起，Safari用户 您不会获得很好的图像
  • 00:29:42
    是的
  • 00:29:43
    但控制文件大小值得
  • 00:29:45
    我想您也可以使用SVG
  • 00:29:48
    因为在图片元素中 您可以按优先级顺序指定来源
  • 00:29:53
    您可以将WebP放在首位 而将SVG放在第二
  • 00:29:58
    是的，您可以说
  • 00:30:00
    Safari用户很可能使用的是高端设备 因此SVG可能不会太糟
  • 00:30:05
    但这仍然会使页面上的其他内容变糟
  • 00:30:09
    就像在高端MacBook上，会很糟
  • 00:30:11
    但是，是的 您可以做出那样的判断
  • 00:30:13
    你可以说那些糟糕的地方
  • 00:30:16
    比30K，条纹等好
  • 00:30:18
    我再举一个例子
  • 00:30:20
    这是Steve的另一幅画
  • 00:30:23
    有很多纯色
  • 00:30:25
    因此我的直觉是 采用无损格式
  • 00:30:27
    但是也有很多阴影 还有很多渐变
  • 00:30:30
    同样，有损WebP能做到这点
  • 00:30:35
    降低到28K
  • 00:30:37
    如果您选择无损格式 即使减少了色调
  • 00:30:41
    也要118K，还会有许多条纹
  • 00:30:44
    所以，这只是工具 而不是规则
  • 00:30:47
    这就是我的主要收获
  • 00:30:49
    考虑一下编解码器的特长
  • 00:30:52
    想想它们是如何工作的
  • 00:30:54
    这样就可以缩小图像
  • 00:30:58
    请缩小您的图像
  • 00:31:00
    我真的很喜欢这样交流 这就像-
  • 00:31:02
    对于203，我们是不是也这样？
  • 00:31:04
    多些远程教学？
  • 00:31:05
    因为我不知道什么时候 才能回到办公室
  • 00:31:07
    我本来打算的 绝对可以
  • 00:31:09
    我们设备齐全 所以让我们做吧！
  • 00:31:12
    保持快乐，下次见
  • 00:31:14
    保持快乐
  • 00:31:15
    再会
  • 00:31:17
    [音乐]
  • 00:31:19
    web.dev LIVE 还有更多相关视频
タグ
  • compressione immagini
  • Squoosh
  • JPEG
  • WebP
  • PNG
  • GIF
  • ottimizzazione
  • formati immagine
  • tecniche compressione
  • web performance