无情地压缩网络大图像
我有一个非常大的背景图像(大约 940x940 像素),我想知道是否有人有技巧来压缩如此大的文件,使其超出 Photoshop 的处理能力? Photoshop 中不会造成严重质量损失的最佳压缩是 PNG 8 (250 KB); 有谁知道一种比这更进一步压缩图像的方法(也许在保存后压缩PNG)?
我通常不会处理这么大的优化图像,所以我希望有人能提供一些指导。
I have a very large background image (about 940x940 pixels) and I'm wondering if anyone has tips for compressing a file this large further than Photoshop can handle? The best compression without serious loss of quality from Photoshop is PNG 8 (250 KB); does anyone know of a way to compress an image down further than this (maybe compress a PNG after it's been saved)?
I don't normally deal with optimizing images this large, so I was hoping someone would have some pointers.
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(16)
它首先取决于您要压缩的图像类型。 两个基本类别是:
对于图片(例如照片),有损压缩格式如JPEG将是最好的,因为它会删除不属于的细节很容易被人的视觉感知所注意到。 这将允许非常高的质量压缩率。 缺点是过度压缩会导致非常明显的压缩伪影。
对于包含大面积相同颜色的插图,使用无损压缩 格式如 PNG 或 GIF 将是最好的方法。 虽然技术上不正确,但您可以认为 PNG 和 GIF 可以很好地压缩相同颜色的重复,类似于 游程编码 (RLE)。
现在,正如您特别提到的 PNG,我将根据我使用 PNG 的经验来进行讨论。
首先,进一步压缩 PNG 不是一个可行的选择,因为不可能压缩已经压缩的数据。 对于任何数据压缩都是如此。 从源数据中删除熵(基本上,可以用更多形式表示的重复模式)紧凑方式)导致存储信息所需的空间量减少。 PNG 已经采用了以无损方式有效压缩图像的方法。
也就是说,至少有一种可能的方法可以进一步减小 PNG 的大小:通过减少图像中存储的颜色数量。 通过使用“索引颜色”(基本上是在图像本身中嵌入自定义调色板),您可以减小文件的大小。 但是,如果图像一开始就有多种颜色(例如具有颜色渐变或摄影图像),那么您可能无法减少图像中使用的颜色数量而不造成明显的质量损失。
基本上,这将归结为一些尝试和错误,看看对图像的更改是否会导致图像质量和文件大小发生任何变化。
Paul Fisher 的评论提醒我,我也可能不会推荐使用 GIF。 Paul 指出,在几乎所有情况下,PNG 都比 GIF 更好地压缩静态线条艺术。
我还想指出的是,GIF 仅支持 8 位图像,因此如果图像的颜色超过 256 种,则必须减少使用的颜色。
此外,Kent Fredric 关于减少颜色深度的评论在某些情况下会导致文件大小增加。 尽管这是猜测,但抖动可能会导致图像的压缩性降低(因为抖动引入了不同颜色的像素来模拟某种其他颜色,有点像混合不同颜色油漆的颜料最终得到另一种颜色)通过在图像中引入更多的熵。
It will first depend on what kind of image you are trying to compress. The two basic categories are:
For pictures (such as photographs), a lossy compression format like JPEG will be best, as it will remove details that aren't easily noticed by human visual perception. This will allow very high compression rates for the quality. The downside is that excessive compression will result in very noticeable compression artifacts.
For illustrations that contain large areas of the same color, using a lossless compression format like PNG or GIF will be the best approach. Although not technically correct, you can think of PNG and GIF will compress repetitions the same color very well, similar to run-length encoding (RLE).
Now, as you've mentioned PNG specifically, I'll go into that discussion from my experience of using PNGs.
First, compressing a PNG further is not a viable option, as it's not possible to compress data that has already been compressed. This is true with any data compression; removing the entropy from the source data (basically, repeating patterns which can be represented in more compact ways) leads to the decrease in the amount of space needed to store the information. PNG already employs methods to efficiently compress images in a lossless fashion.
That said, there is at least one possible way to drop the size of a PNG further: by reducing the number of colors stored in the image. By using "indexed colors" (basically embedding a custom palette in the image itself), you may be able to reduce the size of the file. However, if the image has many colors to begin with (such as having color gradients or a photographic image) then you may not be able to reduce the number of colors used in a image without perceptible loss of quality.
Basically it will come down to some trial-and-error to see if the changes to the image will cause any change in image quailty and file size.
The comment by Paul Fisher reminded me that I also probably wouldn't recommend using GIF either. Paul points out that PNG compresses static line art better than GIF for nearly every situation.
I'd also point out that GIF only supports 8-bit images, so if an image has more than 256 colors, you'll have to reduce the colors used.
Also, Kent Fredric's comment about reducing the color depth has, in some situtations, caused a increase in file size. Although this is speculation, it may be possible that dithering is causing the image to become less compressible (as dithering introduces pixels with different color to simulate a certain other color, kind of like mixing pigment of different color paint to end up with another color) by introducing more entropy into the image.
看看http://www.irfanview.com/,虽然很旧,但很不错。
发现它能够很好地进行多通道 png 压缩,并且批处理速度比 PS 更快。
这里还提供了 PNGOUT http://advsys.net/ken/utils.htm,显然是非常好的。
Have a look at http://www.irfanview.com/, is an oldy but a goody.
Have found this is able to do multipass png compression pretty well, and does batch processing way faster than PS.
There is also PNGOUT available here http://advsys.net/ken/utils.htm, which is apparently very good.
其他发帖者可能没有注意到我通过实验发现的一点:
在某些安装中,默认行为是随图像一起保存图像颜色配置文件的完整副本。
也就是说,设备校准图(通常是 SRGB 或类似的东西)告诉使用代理如何最好地将颜色映射到真实世界的颜色,而不是独立于设备的颜色。
然而,这个图像配置文件相当大,并且可能会使一些您认为非常小的文件变得非常大,例如,一个 1px x 1px 的图像消耗了 25kb 的巨大空间。 即使是纯 BMP 格式(未压缩)也可以用更少的时间表示 1 个像素。
Web 通常不需要此配置文件,因此,在保存 Photoshop 图像时,请确保不导出它们没有此配置文件,您会注意到尺寸有了显着改善。
您可以使用其他工具(例如 gimp)删除这些数据,但如果文件很多,则可能会花费一些时间。
Heres a point the other posters may not have noticed that I found out experimentally:
On some installations, the default behaviour is to save a full copy of the images colour profile along with the image.
That is, the device calibration map, usually SRGB or something similar, that tells using agents how to best map the colour to real world-colours instead of device independant ones.
This image profile is however quite large, and can make some of the files you would expect to be very small to be very large, for instance, a 1px by 1px image consuming a massive 25kb. Even a pure BMP format ( uncompressed ) can represent 1 pixel in less.
This profile is generally not needed for the web, so, when saving your photoshop images, make sure to export them without this profile, and you'll notice a marked size improvement.
You can strip this data using another tool such as gimp, but it can be a little time consuming if there are many files.
pngcrush 可以进一步压缩 PNG 文件而不丢失任何数据,它应用编码和压缩选项的不同组合看看哪一个效果最好。
pngcrush can further compress PNG files without any data loss, it applies different combinations of the encoding and compression options to see which one works best.
如果图像本质上是摄影图像,则在质量损失相同的情况下,JPEG 的压缩效果比 PNG8 好得多。
If the image is photographic in nature, JPEG will compress it far better than PNG8 for the same loss in quality.
Smush.It 声称“超越了 Photoshop 的限制”。 而且它是免费的并且基于网络。
Smush.It claims to go "beyond the limitations of Photoshop". And it's free and web-based.
这在很大程度上取决于图像的类型。 如果它有很多纯色和图案,那么 PNG 或 GIF 可能是您最好的选择。 但如果它是照片般逼真的图像,那么 JPG 会更好 - 并且您可以降低 JPG 的质量,直到获得您正在寻找的压缩/质量权衡(Photoshop 非常擅长向您显示预览)调整质量时的最终图像)。
It depends a lot on the type of image. If it has a lot of solid colors and patterns, then PNG or GIF are probably your best bet. But if it's a photo-realistic image then JPG will be better - and you can crank down the quality of JPG to the point where you get the compression / quality tradeoff you're looking for (Photoshop is very good at showing you a preview of the final image as you adjust the quality).
“保存后压缩 PNG”部分对我来说似乎是一个很深的误解。 您无法神奇地压缩超过某个点而不丢失信息。
首先要考虑的一点是分辨率是否必须这么大。 将两个方向的分辨率降低 10% 会使文件大小减少 19%。
接下来,尝试几种不同的压缩算法,具有不同的压缩等级与信息/质量损失。 如果图像比较粗略,您可能会采用相当严格的 JPEG 压缩。
The "compress a PNG after it's been saved" part looks like a deep misunderstanding to me. You cannot magically compress beyond a certain point without information loss.
First point to consider is whether the resolution has to be this big. Reducing the resolution by 10% in both directions reduces the file size by 19%.
Next, try several different compression algorithms with different grades of compression versus information/quality loss. If the image is sketchy, you might get away with quite rigorous JPEG compression.
我会平铺它,除非你绝对确定你的观众有带宽。
接下来是jpeg2k。
I would tile it, Unless you are absolutely sure that you audience has bandwidth.
next is jpeg2k.
要充分利用 JPEG 文件,您可以使用“另存为 Web”对话框的“修改质量设置”。
To get more out of a JPEG file you can use the 'Modified Quality Setting' of the "Save as Web" dialog.
http://www.jpegmini.com 是一项新服务,可创建文件大小极小的标准 jpg。 我在这方面取得了很好的成功。
http://www.jpegmini.com is a new service that creates standard jpgs with an impressively small filesize. I've had good success with it.
为了获得最佳质量的单张图像,我强烈推荐 RIOT。 除了更改后的图像之外,您还可以看到原始图像。
该工具是免费的,确实值得尝试。
For best quality single images, I highly recommend RIOT. You can see the original image, aside from the changed one.
The tool is free and really worth trying out.
JPEG2000 提供的摄影质量图像的压缩率明显高于 JPEG(或 PNG)。 此外,JPEG2000 具有“有损”和“无损”压缩选项,可以根据您的个人需求进行很好的调整。
JPEG2000 gives compression ratios on photographic quality images that are significantly higher than JPEG (or PNG). Also, JPEG2000 has both "lossy" and "lossless" compression options that can be tuned quite nicely to your individual needs.
我在 jpeg 方面一直很幸运。 确保将 Photoshop 配置为不自动以 jpeg 格式保存缩略图。 根据我的经验,我通过使用 3 通道渐进压缩获得了最大的效果/降压比,尽管基线优化效果非常好。 选择非常低的质量级别(例如 2 或 3)并进行实验,直到找到一个好的折衷方案。
I've always had great luck with jpeg. Make sure to configure photoshop to not automatically save thumbnails in jpegs. In my experience I get the greatest bang/buck ratio by using 3 pass progressive compression, though baseline optimized works pretty well. Choose very low quality levels (e.g. 2 or 3) and experiment until you've found a good trade off.
PNG 图像已经在内部进行了压缩,这种压缩方式不会从更多压缩中受益(如果您尝试压缩它,实际上可能会扩展)。
您可以:
编辑: 当然,对于 Web 背景来说 250KB 已经很大了。 您可能还想重新考虑需要此的图形设计。
PNG images are already compressed internally, in a manner that doesn't benefit from more compression much (and may actually expand if you try to compress it).
You can:
edit: Of course 250KB is large for a web background. You might also want to rethink the graphic design that requires this.
Caesium 是我见过的最好的工具。
Caesium is the best tool i have ever seen.