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.
PNG的一个优点是完整的Alpha透明度,可让您在网页设计中获得平滑的边缘和阴影。主要缺点是它只支持无损压缩,对于复杂图像而言,这意味着文件非常大。
JPEG on the other hand offers great compressibility for complex images, but no transparency.
另一方面,JPEG为复杂图像提供了很好的压缩性,但没有透明度。
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.
最后,我看到Flash元素(这里的例子)具有高度压缩的图像,也具有平滑的边缘和阴影。我对Flash知之甚少,也不知道如何实现。这基本上是我希望能够做到的效果 - 具有透明和/或阴影边缘的大型复杂图像。
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.
这里是否使用了闪存特定的分层技巧?是否像使用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?
我很难找到具体的信息。 DjVu可能是候选人吗?我们是否应该推动浏览器制造商支持其他格式?
Are there other solutions to this problem?
Doing everything in Flash or accepting enormous file sizes are the current options. Some other possibilities:
在Flash中执行所有操作或接受巨大的文件大小是当前的选项。其他一些可能性:
- 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?
SVG和canvas可能能够应用边缘,但IE不支持。
您可以沿扫描线切割PNG并使用JPEG压缩PNG,将边缘保留为PNG。这在源代码中会很讨厌,但它适用于所有浏览器。听起来像一个有趣的项目,我会在早上写下来。 :)
您可以编写一个有损图像滤镜,它可以降低PNG算法扫描线的颜色复杂度,从而改善PNG格式的压缩效果。我只知道这必须存在,但我找不到它。谁知道这个?
Thanks for your help!
谢谢你的帮助!
8 个解决方案
#1
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.
PNG的一个优点是完整的Alpha透明度,可让您在网页设计中获得平滑的边缘和阴影。主要缺点是它只支持无损压缩,对于复杂图像而言,这意味着文件非常大。
You are wrong. You can use PNG with lossy compression (8-bit indexed colors) and alpha transparency.
你错了。您可以使用带有损压缩(8位索引颜色)和Alpha透明度的PNG。
#2
Are there flash specific layering tricks being used here?
这里是否使用了闪存特定的分层技巧?
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.
可能。可以在ActionScript中操作位图,因此您可以从没有颜色数据的简单透明PNG中获取Alpha图层,并将其与JPEG中的像素数据相结合。
Are there any formats that allow lossy compression with transparency
是否有任何格式允许有透明度的有损压缩
Yes, JPEG 2000 and Microsoft's HD Photo. Don't hold your breath for browser support though!
是的,JPEG 2000和微软的高清照片。不要屏住呼吸以获得浏览器支持!
#3
You can use ming and create the flash on the fly at your backend, here is a sample in PHP that shows masking jpgs
您可以使用ming并在后端动态创建闪存,这是一个PHP示例,显示屏蔽jpgs
#4
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中绘制它,或者如果您有Illustrator,您可以实时跟踪图像以获得轮廓的非常好的矢量近似。 Flash也具有跟踪位图功能,但Illustrator版本功能更强大。
Flash CS4 allows you to apply filter effects like drop shadow and blur to MovieClips and text that are rendered at runtime.
Flash CS4允许您将过滤效果(如投影和模糊)应用于MovieClip和在运行时呈现的文本。
So basically:
- Get image
- Get vector outline of image
- Place the vector outline on the layer above the image and apply the mask. You should now be left with just your image with all the white space removed.
- If you want a drop shadow copy the vector outline onto a layer below the JPEG, line it up with the mask and apply the drop shadow on that bottom layer in Properties>Filters. Make sure it's a MovieClip or you wont be able to place a shadow on it.
获取图像的矢量轮廓
将矢量轮廓放在图像上方的图层上并应用蒙版。现在,您应该只删除所有空白区域的图像。
如果要将阴影复制矢量轮廓到JPEG下面的图层上,请将其与蒙版对齐,然后在“属性”>“滤镜”中的底部图层上应用投影。确保它是一个MovieClip,否则你将无法在其上放置阴影。
If you need more clarification or you want an sample file then drop me an email at jcullinan (at) pinnaclegfx (dot) com
如果您需要更多说明或想要样本文件,请在jcullinan(at)pinnaclegfx(dot)com给我发电子邮件
#5
I see some interesting answers. Maybe I can add to that because I ran into the same issue.
我看到一些有趣的答案。也许我可以添加,因为我遇到了同样的问题。
How does lossy compression with transparency work in Flash?
Flash中的有损压缩如何在Flash中运行?
It works well, it's like a transparent jpg :)
它运作良好,就像一个透明的jpg :)
Are there any SWFs or SWF generating scripts that could replace a PNG image with a lossily compressed version?
是否有任何SWF或SWF生成脚本可以用丢失压缩版本替换PNG图像?
Yes there are:
是的有:
Check out Durej's Images 2 SWFs and mr.doob's png2swf
查看Durej的Images 2 SWF和mr.doob的png2swf
Hope it helps. Good luck!
希望能帮助到你。祝好运!
#6
I'm developing pngquant, which generates paletted PNGs with full alpha.
我正在开发pngquant,它生成具有完整alpha的调色板PNG。
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.
转换为调色板非常接近有损压缩并提供类似的良好效果 - 您通常可以将图像尺寸缩小60-70%,而质量损失很小。
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.
我还为它创建了Mac GUI,其中包括PNG的有损过滤器(具有适当选择级别的分色)。该技术可将图像缩小约30%,但适用于24位图像。
#7
Also, there is this research
此外,还有这项研究
http://membled.com/work/apps/lossy_png/
and
http://www.theopavlidis.com/software/pack4png/expages/exindex.htm
#8
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.
您可以使用JPEG和蒙版。掩码可以是位图(应该无损压缩,如PNG或GIF),或矢量。
For most web use, package these together as an SVG - http://peterhrynkow.com/how-to-compress-a-png-like-a-jpeg/
对于大多数Web使用,将这些包装在一起作为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.
对于某些应用程序,您可以单独使用它们。当您具有相同的形状但不同的纹理时,它允许您重复使用蒙版。它也可能对您的工作流程或选择框架更好。
#1
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.
PNG的一个优点是完整的Alpha透明度,可让您在网页设计中获得平滑的边缘和阴影。主要缺点是它只支持无损压缩,对于复杂图像而言,这意味着文件非常大。
You are wrong. You can use PNG with lossy compression (8-bit indexed colors) and alpha transparency.
你错了。您可以使用带有损压缩(8位索引颜色)和Alpha透明度的PNG。
#2
Are there flash specific layering tricks being used here?
这里是否使用了闪存特定的分层技巧?
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.
可能。可以在ActionScript中操作位图,因此您可以从没有颜色数据的简单透明PNG中获取Alpha图层,并将其与JPEG中的像素数据相结合。
Are there any formats that allow lossy compression with transparency
是否有任何格式允许有透明度的有损压缩
Yes, JPEG 2000 and Microsoft's HD Photo. Don't hold your breath for browser support though!
是的,JPEG 2000和微软的高清照片。不要屏住呼吸以获得浏览器支持!
#3
You can use ming and create the flash on the fly at your backend, here is a sample in PHP that shows masking jpgs
您可以使用ming并在后端动态创建闪存,这是一个PHP示例,显示屏蔽jpgs
#4
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中绘制它,或者如果您有Illustrator,您可以实时跟踪图像以获得轮廓的非常好的矢量近似。 Flash也具有跟踪位图功能,但Illustrator版本功能更强大。
Flash CS4 allows you to apply filter effects like drop shadow and blur to MovieClips and text that are rendered at runtime.
Flash CS4允许您将过滤效果(如投影和模糊)应用于MovieClip和在运行时呈现的文本。
So basically:
- Get image
- Get vector outline of image
- Place the vector outline on the layer above the image and apply the mask. You should now be left with just your image with all the white space removed.
- If you want a drop shadow copy the vector outline onto a layer below the JPEG, line it up with the mask and apply the drop shadow on that bottom layer in Properties>Filters. Make sure it's a MovieClip or you wont be able to place a shadow on it.
获取图像的矢量轮廓
将矢量轮廓放在图像上方的图层上并应用蒙版。现在,您应该只删除所有空白区域的图像。
如果要将阴影复制矢量轮廓到JPEG下面的图层上,请将其与蒙版对齐,然后在“属性”>“滤镜”中的底部图层上应用投影。确保它是一个MovieClip,否则你将无法在其上放置阴影。
If you need more clarification or you want an sample file then drop me an email at jcullinan (at) pinnaclegfx (dot) com
如果您需要更多说明或想要样本文件,请在jcullinan(at)pinnaclegfx(dot)com给我发电子邮件
#5
I see some interesting answers. Maybe I can add to that because I ran into the same issue.
我看到一些有趣的答案。也许我可以添加,因为我遇到了同样的问题。
How does lossy compression with transparency work in Flash?
Flash中的有损压缩如何在Flash中运行?
It works well, it's like a transparent jpg :)
它运作良好,就像一个透明的jpg :)
Are there any SWFs or SWF generating scripts that could replace a PNG image with a lossily compressed version?
是否有任何SWF或SWF生成脚本可以用丢失压缩版本替换PNG图像?
Yes there are:
是的有:
Check out Durej's Images 2 SWFs and mr.doob's png2swf
查看Durej的Images 2 SWF和mr.doob的png2swf
Hope it helps. Good luck!
希望能帮助到你。祝好运!
#6
I'm developing pngquant, which generates paletted PNGs with full alpha.
我正在开发pngquant,它生成具有完整alpha的调色板PNG。
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.
转换为调色板非常接近有损压缩并提供类似的良好效果 - 您通常可以将图像尺寸缩小60-70%,而质量损失很小。
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.
我还为它创建了Mac GUI,其中包括PNG的有损过滤器(具有适当选择级别的分色)。该技术可将图像缩小约30%,但适用于24位图像。
#7
Also, there is this research
此外,还有这项研究
http://membled.com/work/apps/lossy_png/
and
http://www.theopavlidis.com/software/pack4png/expages/exindex.htm
#8
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.
您可以使用JPEG和蒙版。掩码可以是位图(应该无损压缩,如PNG或GIF),或矢量。
For most web use, package these together as an SVG - http://peterhrynkow.com/how-to-compress-a-png-like-a-jpeg/
对于大多数Web使用,将这些包装在一起作为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.
对于某些应用程序,您可以单独使用它们。当您具有相同的形状但不同的纹理时,它允许您重复使用蒙版。它也可能对您的工作流程或选择框架更好。