8

PNG 的一个优点是完全 alpha 透明度，它允许您在网页设计中拥有平滑的边缘和阴影。主要缺点是它只支持无损压缩，这对于复杂的图像意味着非常大的文件大小。

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

最后，我看到 Flash 元素（此处为示例）具有高度压缩的图像，这些图像也具有平滑的边缘和阴影。我对 Flash 了解不多，也不知道这是如何实现的。这基本上是我希望能够做到的效果 - 具有透明和/或阴影边缘的大型复杂图像。

我的问题是：

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

这里是否使用了 Flash 特定的分层技巧？阴影是否像我对 PNG 所做的那样生成或光栅化到图像中。

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

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

是否有任何格式允许透明的有损压缩

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

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

在 Flash 中做所有事情或接受巨大的文件大小是当前的选择。其他一些可能性：

  • SVG 和画布可能能够应用边缘，但 IE 不支持。
  • 您可以沿扫描线切割 PNG 并使用 JPEG 压缩它们，将边缘保留为 PNG。这在源代码上会很讨厌，但它适用于所有浏览器。听起来像一个有趣的项目，我会在早上写。:)
  • 您可以编写一个有损图像过滤器，它可以降低 PNG 算法扫描线的颜色复杂性，以提高 PNG 格式的压缩率。我只知道它必须存在，但我找不到它。有人知道吗？

谢谢你的帮助！

4

9 回答 9

6

PNG 的一个优点是完全 alpha 透明度，它允许您在网页设计中拥有平滑的边缘和阴影。主要缺点是它只支持无损压缩，这对于复杂的图像意味着非常大的文件大小。

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

于 2009-03-31T16:15:13.460 回答
5

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

向调色板的转换非常接近于有损压缩，并且提供了类似的良好结果——您通常可以将图像尺寸减小 60-70%，而几乎没有质量损失。

I've also created Mac GUI for it which includes lossy filter for PNGs (posterization with appropriately selected levels). 该技术将图像减少了大约 30%，但适用于 24 位图像。

于 2012-03-19T16:50:13.980 回答
2

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

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

是否有任何格式允许透明的有损压缩

是的，JPEG 2000和 Microsoft 的高清照片。不过，不要屏住呼吸以获得浏览器支持！

于 2009-03-31T16:43:19.117 回答
1

您可以在后端使用ming并动态创建闪存，这是一个 PHP 示例，显示了屏蔽 jpgs

于 2009-03-31T16:41:09.950 回答
1

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

Flash CS4 允许您将阴影和模糊等滤镜效果应用于在运行时呈现的 MovieClip 和文本。

所以基本上：

  1. 获取图像
  2. 获取图像的矢量轮廓
  3. 将矢量轮廓放在图像上方的图层上并应用蒙版。你现在应该只剩下你的图像，所有的空白都被删除了。
  4. 如果您想要阴影将矢量轮廓复制到 JPEG 下方的图层上，请将其与蒙版对齐，然后在“属性”>“过滤器”中将阴影应用到该底层。确保它是一个影片剪辑，否则您将无法在其上放置阴影。

如果您需要更多说明或需要示例文件，请发送电子邮件至 jcullinan (at) pinnaclegfx (dot) com

于 2009-03-31T18:03:26.600 回答
1

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

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

效果很好，就像一个透明的 jpg :)

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

是的，有：

查看Durej 的 Images 2 SWF 和mr.doob 的 png2swf

希望能帮助到你。祝你好运！

于 2009-04-12T21:01:58.833 回答
0

还有这个研究

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

和

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

于 2009-07-10T00:37:35.963 回答
0

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

对于大多数网络使用，将它们打包为 SVG - http://peterhrynkow.com/how-to-compress-a-png-like-a-jpeg/

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

于 2015-06-18T14:08:53.380 回答
0

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

PNG 与 JPEG 有损压缩到 100kb

所以你可以看到PNG文件不能很好地处理细微的渐变。他们不是为此而设计的。

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

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

于 2021-01-05T08:28:38.757 回答