如何减少图像的文件大小?


15

在处理某些wordpress主题时,我一直在修改一些图像文件,并注意到我编辑的版本有时比原始版本大3-4倍(使用相同格式保存)。我不想降低质量-有什么方法可以减小文件大小,以便更快地加载?

例如,现在,我使用Photoshop并将图像质量滑块设置为“ 8”(满分10)。

Answers:


14

Smashing Magazine在PNG优化JPG优化方面做了2篇很棒的文章。

他们非常深入,详细解释了一些关于格式及其实现的一些您可能不知道的事情。例如,JPEG文章:“请记住,当您在Photoshop中将“质量”设置为50以下时,它将运行另一种称为颜色下采样的优化算法,该算法将相邻八像素块中的颜色平均化。”

这两篇文章都介绍了可在Photoshop中使用的特定技术,以准备文件以进行更大的压缩。这比保存文件后使用的技术有效得多。

保存完这些文件后,或者在文件上没有足够的幸运之处,无法在Photoshop中对源文件进行分层调整之后,仍然需要更多的压缩操作。

我使用一个名为ImageOptim的Mac应用程序。从他们的网站:

通过找到最佳压缩参数并删除不必要的注释和颜色配置文件,ImageOptim可以优化图像-从而节省磁盘空间并加快加载速度。它处理PNG,JPEG和GIF动画。

:ImageOptim GUI提供各种优化工具AdvPNG从AdvanceCOMP,使用OptiPNGPngCrushJpegOptim,从libjpeg的jpegtran,Gifsicle和可选PNGOUT

它非常适合在网络上发布图像(在Photoshop中轻松缩小“为网络保存”的图像),并且对于缩小Mac和iPhone应用程序也很有用。

小菜一碟。将您的图片(或图片文件夹)拖到窗口中,它会通过所有这些工具来调整压缩方案并删除不必要的元数据和颜色配置文件信息(无论如何,这些信息并没有得到广泛支持-您应该先修复颜色配置文件,然后再保存,而不保存并嵌入它们)。

引号中链接的所有工具均具有Windows / Linux / Mac版本(PNGOUT除外),但值得庆幸的是,有人将PNGOUT移植到OS X和linux,因为它们非常周到。如果选择使用ImageOptim,它将在.app中包括除PNGOUT之外的所有内容,因此请抓住PNGOUT端口,将其放在/ usr / local / bin(或任意位置)中,然后告诉ImageOptim它在哪里。

对于我来说,尤其是对于PNG图像,这并不罕见,即使通过Photoshop的“为网络和设备保存”进行保存后,文件大小也下降了30%以上。

提示:运行优化后,按左侧的图标列进行排序,并选择带有(X)图标的所有行-不再减少的文件。从列表中将其删除,然后在所有带有复选标记图标的图像上重新运行。我几乎可以向您保证,您的图像仍然会丢失文件大小。重复排序,选择,删除,重新运行,直到获得所有(X)图标并开始命名。


+1哇!这些都是很棒的文章。很高兴您发布了这些内容。
jessegavin 2010年

是的,它们比我更先进的Photoshop,但我已经向他们展示了给他们的设计师,他们总是学到一两个东西。
布赖森

10

在Photoshop中保存照片时,我建议使用File > Save for Web and Devices。它将允许您播放压缩级别并实时查看视觉效果。在照片上,您通常可以将其保存到低于8级的水平,但仍可获得出色的效果。 替代文字


1
请您缩小图片的大小?加载需要几秒钟。

1
对于大型的多彩色图像,JPEG通常是较小的文件大小。
凯文


4

对于PNG图像,您可以减少颜色图中的颜色数量,并另存为索引PNG。例如,考虑一个128x128像素(未压缩)的徽标。想象一下,它实际上只使用16种颜色。

  • PNG-32,每个像素四个字节-65 KB
  • PNG-8,每个像素一个字节-16 kB
  • PNG-4,每个像素四位-8 KB

您会看到,在不降低图像质量的情况下(这仅适用于某些类型的图像),您可以大幅减小尺寸。

对于按钮和站点图标,您还可以考虑将它们聚合到一个图像中,并使用CSS或JavaScript来控制其显示(精灵)。这节省了每个图像发出的HTTP请求的数量。


3

尝试其他格式。

  • JPEG照片
  • 具有Alpha和/或阴影的照片的PNG
  • 带有小调色板(黑色/白色或黄色图标等)的图像的GIF

结合“为网络保存”通常是一个很好的解决方案
Jason 2010年

2
PNG-8通常比相应的GIF小得多。

1
除了动画之外,GIF几乎已过时,甚至被APNG取代。
DisgruntledGoat 2010年

2

基本上,尝试以其他格式保存图像,然后查看文件大小。

如果使用的是JPEG,则应该能够在paint.net等图形编辑器中上下调整图像的质量。50%的图像质量通常足以满足网络需求,并使图像小得多。

使用PNG,您无法做到这一点,但值得注意的是,有时PNG比JPEG大得多,有时小得多。例如,对于黑白图像(例如,黑白线条图),PNG小得多。

这些天的建议是使用CSS Sprite通过减少请求来加快加载时间,但同样,您实际上需要查看获得的图像大小。例如,如果您将几个黑白PNG与一个彩色PNG结合在一起,CSS精灵图像很有可能会比组件图像大得多。


我将把EXIF数据放在第二位-如果您不需要它,请将其转储。我以为会很小(只是文字,对不对?),但是在某些网站上,我看到了30KB的差异,其中在相同的质量设置下,50KB的图像(用户上传-但调整大小保持EXIF)减少到20KB或更小-只是通过删除EXIF数据..
jeffreypriebe

2

您还想确保剥离所有EXIF数据-几乎所有这些都与网络上的用户无关,他们是否真的需要知道您使用佳能5D拍照,以及F-Stop为2.8,曝光时间为0.5秒,ISO为160,无曝光偏差和9mm焦距?

所有这些元数据都会增加图像的重量,通常应将其删除。

正如jessegavin指出的那样,大多数图像应用程序都会向您显示压缩效果的预览-使用它们,因为总括设置为“ 8”很少会给您带来最大的折衷。

最后,Google Page Speed Firefox / Firebug插件可以为您提供减少图像大小的好方法(包括允许您查看和保存较小的版本)。



1

完成所有其他建议以确保图像尽可能小并保持所需的质量水平之后,您还需要配置网站,以便它以最少的HTTP标头提供图像,并确保您提供的标头允许通过缓存代理服务器和Web浏览器来适当地存储图像。

为了减少请求的大小,请确保将Web服务器配置为不发送无用的标头,例如X-Powered-By。另外,请确保您正在从未设置cookie的主机(例如static.example.com)提供图像,CSS和其他静态组件之类的东西。

对于静态图像,请将其Expires标头设置为较远的日期。这样可以确保Web浏览器和中间的任何缓存代理都将尽可能长地保留在图像上。唯一的缺点是,如果要显示其他图像,则需要使用其他文件名并链接到该文件名。文件名中的版本编号(例如myimage_1.png或/images/3/logo.png)可能是一种有效的方法。对于静态性较低的页面,请设置逼真的Expires标头(访问权限加上X小时),并确保您设置的是Last-Modified标头或eTag标头(不是两者都设置),以便先前下载文件的浏览器可以快速测试通过比较标头而不是下拉整个图像来确定它们是否具有当前版本。

尽管有很多资源可以讨论这些技术,但Yahoo所做的出色工作将许多技巧结合在一起,可以改善内容交付的性能

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.