PNG 的优点之一是完全 Alpha 透明度，这使您可以在网页设计中拥有平滑的边缘和阴影。 主要缺点是它只支持无损压缩，这对于复杂的图像意味着非常大的文件大小。
另一方面，JPEG 为复杂图像提供了很好的压缩性，但没有透明度。
最后，我看到了具有高度压缩图像且边缘平滑的 Flash 元素（示例）和阴影。 我对Flash了解不多，也不知道这是如何实现的。 这基本上就是我想要实现的效果 - 具有透明和/或阴影边缘的大型复杂图像。
我的问题是：
带有透明度的有损压缩在 Flash 中如何工作？
这里是否使用了 Flash 特定的分层技巧？ 阴影是否生成或光栅化到图像中，就像我对 PNG 所做的那样。
是否有任何 SWF 或 SWF 生成脚本可以用有损压缩版本替换 PNG 图像？
我正在考虑逐步增强以提高某些设计元素的加载速度。 如果不存在，是否可以写它？
是否有任何格式允许透明有损压缩
我很难找到这方面的具体信息。 DjVu 可能是候选人？ 我们是否应该敦促浏览器制造商支持另一种格式？
这个问题还有其他解决方案吗？
当前的选择是在 Flash 中完成所有操作或接受巨大的文件大小。 其他一些可能性：
- SVG 和 canvas 可能能够应用边缘，但 IE 不支持。
- 您可以沿着扫描线剪切 PNG 并使用 JPEG 压缩它们，将边缘保留为 PNG。 这在源代码中会很糟糕，但它可以在所有浏览器中工作。 听起来是一个有趣的项目，我会在早上之前写出来。 :)
- 您可以编写一个有损图像过滤器，它可以降低 PNG 算法扫描线的颜色复杂性，从而提高 PNG 格式的压缩率。 我只是知道它必须存在，但我找不到它。 有人知道这个吗？
感谢您的帮助！
One advantage of PNG is full alpha transparency, which allows you to have smooth edges and shadows in in web designs. The main disadvantage is that it only supports lossless compression, which for complex images means a very large file size.
JPEG on the other hand offers great compressibility for complex images, but no transparency.
And finally, I've seen Flash elements (example here) with highly compressed images that also have smoothed edges and shadows. I don't know much about Flash and have no idea how this is accomplished. This is basically the effect I would like to be able to do - a large, complex image with transparent and/or shadowed edges.
My questions are:
How does lossy compression with transparency work in Flash?
Are there flash specific layering tricks being used here? Are the shadows generated or rasterized into the image as I would do with a PNG.
Are there any SWFs or SWF generating scripts that could replace a PNG image with a lossily compressed version?
I'm thinking progressive enhancement to improve loading speed of certain design elements. If this doesn't exist, would it be feasible to write it?
Are there any formats that allow lossy compression with transparency
It's been hard for me to find specific info on this. DjVu might be a candidate? Should we be pushing browser makers to support another format?
Are there other solutions to this problem?
Doing everything in Flash or accepting enormous file sizes are the current options. Some other possibilities:
- SVG and canvas may be able to apply edges, but aren't supported by IE.
- You could cut up a PNG along scan lines and compress those with JPEG, leaving the edges as PNG. This would be nasty in source, but it would work in all browsers. Sounds like a fun project, I'll write it by the morning. :)
- You could write a lossy image filter that can decrease color complexity along the PNG algorithm's scan lines to improve compression within the PNG format. I just knew this had to exist, but I couldn't find it. Anyone know of this?
Thanks for your help!
发布评论
评论（9）
您错了。 您可以使用具有有损压缩（8 位索引颜色）和 Alpha 透明度的 PNG。
You are wrong. You can use PNG with lossy compression (8-bit indexed colors) and alpha transparency.
我正在开发 pngquant，它可以生成带有完整 Alpha 的调色板 PNG。
转换为调色板非常接近有损压缩，并提供类似的良好结果 - 您通常可以将图像尺寸缩小 60-70%，而质量损失很小。
我还为其创建了 Mac GUI，其中包括 PNG 有损过滤器（使用适当选择的级别进行色调分离）。 该技术将图像减少了约 30%，但适用于 24 位图像。
I'm developing pngquant, which generates paletted PNGs with full alpha.
The conversion to palette is pretty close to being lossy compression and gives similarly good results — you can often reduce image sizes by 60-70% with little quality loss.
I've also created Mac GUI for it which includes lossy filter for PNGs (posterization with appropriately selected levels). That technique reduces images by about 30%, but works with 24-bit images.
可能。 可以在 ActionScript 中操作位图，因此您可以从没有颜色数据的简单透明 PNG 中获取 Alpha 图层，并将其与 JPEG 中的像素数据组合。
的，JPEG 2000 和 Microsoft 的 高清照片。 不过，不要对浏览器支持屏住呼吸！
Could be. It's possible to manipulate bitmaps in ActionScript, so you could take the Alpha layer from a simple transparent PNG with no colour data, and combine it with the pixel data from a JPEG.
Yes, JPEG 2000 and Microsoft's HD Photo. Don't hold your breath for browser support though!
您可以使用 ming 并在后端动态创建 Flash，这里是一个 PHP 示例，显示了屏蔽 jpg
You can use ming and create the flash on the fly at your backend, here is a sample in PHP that shows masking jpgs
如果您指的是通过屏蔽完成的网站上突然出现的学生。 要制作复杂的蒙版，您必须自己在 Flash 中绘制，或者如果您有 Illustrator，则可以实时跟踪图像以获得轮廓的相当好的矢量近似值。 Flash也有跟踪位图功能，但Illustrator版本更强大。
Flash CS4 允许您将阴影和模糊等滤镜效果应用于运行时渲染的影片剪辑和文本。
所以基本上：
如果您需要更多说明或想要示例文件，请给我发送电子邮件至 jcullinan (at) pinnaclegfx (dot) com
If you're refering to the students popping up on the site that's done by masking. To make a complex mask you'll either have to draw it yourself in Flash, or if you have Illustrator you can Live Trace your image to get a pretty good vector approximation of the outline. Flash has a trace bitmap function as well, but the Illustrator version is much more powerful.
Flash CS4 allows you to apply filter effects like drop shadow and blur to MovieClips and text that are rendered at runtime.
So basically:
If you need more clarification or you want an sample file then drop me an email at jcullinan (at) pinnaclegfx (dot) com
我看到一些有趣的答案。 也许我可以补充一下，因为我遇到了同样的问题。
效果很好，就像透明的 jpg :)
是的，有：
查看 Durej 的图像 2 SWF
和 mr.doob 的 png2swf
希望有帮助。
祝你好运！
I see some interesting answers. Maybe I can add to that because I ran into the same issue.
It works well, it's like a transparent jpg :)
Yes there are:
Check out Durej's Images 2 SWFs
and mr.doob's png2swf
Hope it helps.
Good luck!
另外，还有一项研究
http://membled.com/work/apps/lossy_png/
和
http://www.theopavlidis.com/software/pack4png/expages/ exindex.htm
Also, there is this research
http://membled.com/work/apps/lossy_png/
and
http://www.theopavlidis.com/software/pack4png/expages/exindex.htm
您可以使用 JPEG 和蒙版。 蒙版可以是位图（应该可以很好地无损压缩为 PNG 或 GIF），也可以是矢量。
对于大多数 Web 使用，将它们打包为 SVG - http: //peterhrynkow.com/how-to-compress-a-png-like-a-jpeg/
对于某些应用程序，您可以单独使用它们。 当您具有相同的形状但不同的纹理时，它允许您重复使用蒙版。 它也可能更适合您选择的工作流程或框架。
You can use a JPEG and a mask. The mask could be bitmap (should compress losslessly as PNG or GIF quite well), or a vector.
For most web use, package these together as an SVG - http://peterhrynkow.com/how-to-compress-a-png-like-a-jpeg/
For some applications, you might use them separately. It allows you to re-use masks, when you have the same shape but a different texture. It also might just be better for your workflow or framework of choice.
PNG确实支持有损压缩，但与JPEG相比就很糟糕了。 例如，下面是使用 PNG 和 JPEG 压缩为 100kb 的图像的一部分：
因此您可以看到 PNG 文件不能很好地处理细微的渐变。 它们的设计目的不是为了这样做。
看来近期最好的选择是等待 WebP 支持，实际上所有版本都提供该支持已在主流浏览器中使用，但仅在最新版本的 Safari 中（截至撰写本文时）。
新的 AVIF 也是有损透明领域的竞争者，但它是截至撰写时，仅在 Chrome、Opera 和 Firefox 中受支持（Firefox 86 及更高版本）。 希望其他浏览器尽快添加对此的支持，因为它对于高压缩比具有非常好的感知特性。
PNG does support lossy compression, but it's terrible compared to JPEG. For example, here's a section of an image that has been compressed to 100kb with both PNG and JPEG:
So you can see that PNG files don't handle subtle gradients well. They're not designed to do that.
It looks like the best bet in the near-term is to wait for WebP support, which is actually available in all major browsers already, but only in recent versions of Safari (as of writing).
The new AVIF is also a contender in the lossy-transparency space, but it is only supported in Chrome, Opera and Firefox as of writing (Firefox 86 and later). Hopefully other browsers add support for this soon, because it has very good perceptual characteristics for high compression ratios.