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 SWFmr.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 回答