在处理某些wordpress主题时,我一直在修改某些图像文件,并注意到我编辑的版本有时比原始版本大3-4倍(使用相同格式保存)。我不想降低质量-有什么方法可以减小文件大小,使其加载得更快?例如,现在我使用Photoshop并设置图像质量滑块到“ 8”(满分10)。

#1 楼

Smashing Magazine撰写了2篇有关PNG优化和JPG优化的出色文章。

它们非常深入,详细解释了一些关于格式及其实现可能不知道的事情。例如,JPEG文章:“请记住,当您在Photoshop中将“质量”设置为50以下时,它将运行另一种称为颜色下采样的优化算法,该算法会将相邻的八个像素块中的颜色平均化。 br />
这两篇文章都介绍了一些特定的技术,您可以在Photoshop中使用它们来准备文件以进行更大的压缩。这比保存文件后使用的技术要有效得多。

保存这些文件或在文件上后,您就没有足够的幸运地拥有分层的源文件以便在Photoshop中进行调整,将这些文件销毁还有更多的压缩方法。

我使用了一个名为ImageOptim的Mac应用程序。在其站点上:

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

ImageOptim为各种优化工具提供GUI:AdvanceCOMP的AdvPNG,OptiPNG,PngCrush,JpegOptim,libjpeg的jpegtran,Gifsicle以及可选的PNGOUT。

它非常适合在网络上发布图像(在Photoshop中轻松缩小图像“为网络保存”),并且对于缩小Mac和iPhone应用程序也很有用。将您的图片(或图片文件夹)拖到窗口中,它会通过所有这些工具来调整压缩方案,并删除不必要的元数据和颜色配置文件信息(无论如何,这些信息并没有得到广泛支持-您应该先修复颜色配置文件,而不保存并嵌入它们。)

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

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

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

评论


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

– jessegavin
2010年7月9日在18:14



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

–布赖森
2010年7月9日在18:18

#2 楼

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


评论


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

–删除
2010年7月9日在1:20

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

–凯文
2010年7月9日,下午5:06

#3 楼

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


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

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



A列表:CSS Sprites:图像切片的死亡之吻
A列表:CSS Sprites2-它是JavaScript时间
CSS Sprites:它们是什么,为什么很酷,以及如何使用它们


#4 楼

尝试其他格式。


照片的JPEG
具有alpha和/或阴影的照片的PNG
具有小调色板(黑色/白色或黑色)的图像的GIF黄色图标或其他内容)


评论


与“保存为网络”结合使用时,这通常是一个很好的解决方案

–詹森
2010年7月8日在20:24

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

– neo
2010年7月9日在7:17

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

–心怀不满的山羊
2010年7月12日21:00

#5 楼

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

如果使用JPEG,则应该能够在诸如paint的图形编辑器中上下调整图像的质量。净。 50%的图像质量通常足以在Web上使用,并且可以使图像小得多。比JPEG。例如,黑白图像的PNG尺寸要小得多,例如黑白线条图。但同样,您需要实际查看获得的图像尺寸。 CSS sprite图像很有可能会比组件图像大很多,例如,如果您将几种黑白PNG与一种颜色组合在一起。

评论


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

–jeffreypriebe
2011-09-29 17:47



#6 楼

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

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

正如jessegavin指出的那样,大多数图像应用程序都会向您显示压缩效果的预览-使用压缩效果,因为“ 8”的总括设置很少会给您最后,最好权衡取舍。

最后,Google Page Speed Firefox / Firebug插件可以使您知道可以减少图像大小的程度(包括查看和保存较小的版本)。

#7 楼

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

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

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

尽管有很多资源可以讨论这些技术,但Yahoo所做的出色工作带来了许多改进内容性能的技巧一起送到一个地方。