网络的有损图像压缩和透明度？

Question

PNG的一个优点是完整的Alpha透明度，可让您在网页设计中获得平滑的边缘和阴影。主要缺点是它只支持无损压缩，对于复杂的图像来说意味着非常大的文件大小。

另一方面，JPEG为复杂图像提供了很好的压缩性，但没有透明度。

最后，我看到Flash元素（example here）具有高度压缩的图像，这些图像也具有平滑的边缘和阴影。我对Flash知之甚少，也不知道如何实现。这基本上就是我希望能够做到的效果 - 一个带有透明和/或阴影边缘的大而复杂的图像。

我的问题是：

具有透明度的有损压缩如何在Flash中起作用？

这里是否使用了闪存特定的分层技巧？是否像使用PNG一样将阴影生成或栅格化为图像。

是否有任何SWF或SWF生成脚本可以用丢失压缩版本替换PNG图像？

我正在考虑逐步增强以提高某些设计元素的加载速度。如果这不存在，编写它是否可行？

是否存在允许带透明度的有损压缩的格式

我很难找到具体的信息。 DjVu可能是候选人吗？我们应该推动浏览器制造商支持另一种格式吗？

此问题还有其他解决方案吗？

在Flash中执行所有操作或接受大量文件大小是当前选项。其他一些可能性：

• SVG和canvas可能能够应用边缘，但IE不支持。
• 您可以沿扫描线剪切PNG并使用JPEG压缩这些PNG，将边缘保留为PNG。这在源代码中会很讨厌，但它适用于所有浏览器。听起来像一个有趣的项目，我会在早上写下来。 ：）
• 您可以编写一个有损图像滤镜，可以降低PNG算法扫描线的颜色复杂度，从而改善PNG格式的压缩效果。我只是知道这必须存在，但我找不到它。有人知道吗？

感谢您的帮助！

Answer 1

  

PNG的一个优点是完整的Alpha透明度，可让您在网页设计中获得平滑的边缘和阴影。主要缺点是它只支持无损压缩，对于复杂的图像来说意味着非常大的文件大小。

你错了。您可以使用带有损压缩（8位索引颜色）和Alpha透明度的PNG。

Answer 2

  

这里是否使用了闪存特定的分层技巧？

可能。可以在ActionScript中操作位图，因此您可以从没有颜色数据的简单透明PNG中获取Alpha图层，并将其与JPEG中的像素数据相结合。

  

是否存在允许带透明度的有损压缩的格式

是，JPEG 2000和Microsoft的HD Photo。不要屏住呼吸以获得浏览器支持！

Answer 3

我正在开发pngquant，它会使用完整的alpha 生成调色板PNG 。

转换为调色板非常接近于有损压缩并且提供了类似的良好效果 - 您通常可以将图像尺寸缩小60-70％而质量损失很小。

我还创建了Mac GUI for it，其中包括PNG的有损过滤器（具有适当选择级别的分色）。该技术可将图像缩小约30％，但可与24位图像配合使用。

Answer 4

您可以使用ming并在后端动态创建Flash，以下是PHP中显示masking jpgs

的示例

Answer 5

如果您是指通过屏蔽在网站上弹出的学生。要制作复杂的蒙版，您必须自己在Flash中绘制它，或者如果您有Illustrator，您可以实时跟踪图像以获得轮廓的非常好的矢量近似。 Flash也具有跟踪位图功能，但Illustrator版本功能更强大。

Flash CS4允许您将投影效果（如阴影和模糊）应用于MovieClip和在运行时渲染的文本。

基本上是这样的：

1. 获取图片
2. 获取图像的矢量轮廓
3. 将矢量轮廓放在图像上方的图层上并应用蒙版。现在，您应该只删除所有空白区域的图像。
4. 如果要将阴影复制矢量轮廓到JPEG下面的图层上，请将其与蒙版对齐，然后在“属性”＆gt;“滤镜”中对该底部图层应用投影。确保它是一个MovieClip，否则你将无法在其上放置阴影。

如果您需要更多说明或想要样本文件，请发送电子邮件至jcullinan（at）pinnaclegfx（dot）com

Answer 6

我看到一些有趣的答案。也许我可以补充一点，因为我遇到了同样的问题。

  

带有透明度的有损压缩如何在Flash中运行？

效果很好，就像一个透明的jpg：）

  

是否有任何SWF或SWF生成脚本可以用丢失压缩版本替换PNG图像？

是的，有：

结帐Durej's Images 2 SWFs 和mr.doob's png2swf

希望它有所帮助。 祝你好运！

Answer 7

此外，还有这项研究

http://membled.com/work/apps/lossy_png/

和

http://www.theopavlidis.com/software/pack4png/expages/exindex.htm

Answer 8

您可以使用JPEG和蒙版。掩码可以是位图（应该无损压缩，如PNG或GIF）或矢量。

对于大多数网络用户，请将这些包装在一起作为SVG - http://peterhrynkow.com/how-to-compress-a-png-like-a-jpeg/

对于某些应用程序，您可以单独使用它们。当您具有相同的形状但具有不同的纹理时，它允许您重复使用蒙版。它也可能对您的工作流程或选择框架更好。

Answer 9

PNG 确实支持有损压缩，但与 JPEG 相比它很糟糕。例如，以下是已使用 PNG 和 JPEG 压缩为 100kb 的图像的一部分：

因此您可以看到 PNG 文件不能很好地处理细微的渐变。它们的设计初衷并非如此。

看来近期最好的选择是等待 WebP support，它实际上已在所有主要浏览器中可用，但仅在最近版本的 Safari 中可用（截至撰写本文时）。

新的 AVIF 也是有损透明领域的竞争者，但在撰写本文时它是 only supported in Chrome, Opera and Firefox（Firefox 86 及更高版本）。希望其他浏览器尽快添加对此的支持，因为它对高压缩比具有非常好的感知特性。