几乎没有人理解 jpeg 、 png 和 gif 等图片格式实际上是如何工作的,大多数 web 开发人员只有通过试验, 学习使用哪个格式。在本文中, 我们将看到每个格式的高阶的压缩演算法, 以了解他们的不同策略让他们或多或少适合不同类型的影像。看看我们如何使用智慧 WooCommerce 服务器利用这些强大的 (但尚未普遍支持的) 格式。本文为大家介绍 WooCommerce 独立站网页设计师如何在 WooCommerce 独立站网页设计中选择一个完美的影像格式?
JPEG
那么, 它是如何工作的呢? 它有什么好处呢?
JPEG 压缩或雕刻成 8×8-pixel-blocks, 然后做一点疯狂, 和一大堆的数学。它转换每个块的 pixels-lists R,G,B 值, 对映到连续点空间分成一组系数, 用于方程描述的块的能量波动。在技术术语,JPEG 压缩演算法将影像从空间域的信息到频域。
实际上, 这意味著 JPEG 非常擅长连续色调影像压缩: 影像与一个巨大的数量的颜色, 以及它们之间的平滑过渡。换句话说,JPEG 假定您的影像看起来或多或少像照片。相反,JPEG 格式在压缩影像清晰边缘或高能是可怕的。
为了压缩这些图片, 我们采用不同的压缩演算法。进入我们的下一个格式:GIF
在 web 的早期, 如果不是一个 JPEG 影像, 这是一个 GIF 。 GIF 格式采用 LZW 压缩演算法, 这远比 JPEG 的 mathemagic 简单。从本质上讲,LZW 演算法扫描您的影像资料并生成短代码重复的部分;LZW 缩短重复。这意味著 GIF 格式影像压缩, 大量相同或重复的资料。只有几个颜色的影像, 在广泛的范围, 与夏普之间的转换可以储存高效、无损的 gif 。但在压缩…GIF 是可怕的东西, 有常用的格式, 硬,256 颜色限制。转换影像超过这一数字的颜色变成一个 GIF 导致损耗多色调分色法, 看起来糟透了。
简而言之,GIF 和 JPEG 相反, 互补优势。但未解决专利问题周围的 LZW 演算法启发一些非常聪明的人, 第二次裂纹无损影像格式的 WooCommerce 独立站网页设计。
PNG
PNG 擅长相同类型的影像, 带来了一些好处: 没有 256 的颜色限制。阿尔法通道透明度 (因此一个画素可以部分透明, 而不是简单的通透或完全不透明) 在压缩时,PNG 是如何击败 GIF 的?首先,PNG 演算法试图减少它将需要储存的资料量。格式特性五个不同的预测策略, 但基本上,PNG 假设相邻画素将是相似的。如果这种假设证明是真的,PNG 储存资料只储存其预测和实际值之间的差别, 少数比大公司占据更少的空间。
第二, 通过允许引用之前的图片 PNG 削减了重复, 相同的画素序列储存相同的资料 (而不是两次) 使用一种叫做 LZ77 演算法。如果斜视,PNG LZ77 和 GIF 的 LZW 实现同一 ends-cutting repetition-but 那里通过意味著足够明显的逃避专利律师。每个人都赢了!
最后, 做完这一切,PNG 使用这一过程被称为 “霍夫曼编码” 将剩余的价值归结进一步通过生成最常见的最小的码值 (顺便说一句,JPEG 格式使用霍夫曼编码作为最后一步) 。
结合以上三种 (无损) 技术在 GIF 的单一策略提供了巨大的好处。通过改变原始影像资料有损贯穿这个挑战之前,复杂的工具可以提供更大的压缩比, 为了使它更 compression-friendly 。
退一步, 所有您需要知道的是:PNG 时将执行比 JPEG 照片, 比 GIF 是更好的。所以,任何设计中可以用它来作为清爽的边缘影像和广泛范围的纯色或精确的重复模式。