it-swarm.cn

我该怎么做才能减少图像的文件大小?

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

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

15
Ryan Elkins

Smashing Magazine在 PNG优化JPG优化 上做了两篇很棒的文章。

它们非常深入,非常详细地解释了一些您可能不了解的格式及其实现的内容。例如,JPEG文章:“请记住,当您在Photoshop中将质量设置为低于50时,它会运行一个额外的优化算法,称为颜色下采样,它会平均相邻八像素块中的颜色”。

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

在您保存这些文件后,或者在文件上你没有幸运地在Photoshop中将分层源文件发送到Tweak时,还有更多的压缩来榨取这些文件。

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

ImageOptim优化图像 - 通过查找最佳压缩参数和删除不必要的注释和颜色配置文件,它们占用的磁盘空间更少,加载速度更快。它处理PNG,JPEG和GIF动画。

ImageOptim为各种优化工具提供GUI: 来自AdvanceCOMP的AdvPNGOptiPNGPngCrushJpegOptim ,来自libjpeg的jpegtran, Gifsicle 和可选 PNGOUT

它非常适合在网络上发布图像(在Photoshop中轻松缩小“Saved for Web”图像),也有助于缩小Mac和iPhone应用程序。

小菜一碟。将图像(或图像文件夹)拖到窗口上,它会运行所有这些工具,调整压缩方案并删除不必要的元数据和颜色配置文件信息(无论如何都不会广泛支持 - 您应该在保存之前修复颜色配置文件,不保存和嵌入它们)。

除了PNGOUT之外,该引用中链接的所有工具都有Windows/Linux/Mac版本,但幸运的是有人将 PNGOUT 移植到OS X和Linux,因为它们真是太体贴了。如果您选择使用ImageOptim,它将包含除.app之外的所有PNGOUT,因此请抓取PNGOUT端口,将其放在/ usr/local/bin(或任何地方)并告诉ImageOptim它在哪里。

对于我来说,特别是对于PNG图像,即使在通过Photoshop的“Save For Web&Devices”保存后,文件大小也会下降超过30%,这种情况并不少见。

Protip:运行优化后,按左侧的图标列排序并选择带有(X)图标的所有行 - 未进一步减少的文件。从列表中删除它们,然后重新运行所有带有复选标记图标的图像。我几乎可以向你保证,你的图像仍会丢失文件大小。重复排序,选择,删除,重新运行,直到您获得所有(X)图标并将其称为一天。

14
Bryson

在Photoshop中保存照片时,我建议使用File > Save for Web and Devices。它允许您使用压缩级别并实时查看视觉结果。在照片上,您通常可以将其保存在8级以下,并且仍能获得很好的效果。 alt text

10
jessegavin

你可能想查看Yahoo的 Smush.it 。我发现它工作得很好。

4
Travis Northcutt

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

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

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

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

4
dmsnell

尝试其他格式。

  • PNG用于摄影与alpha和/或阴影
  • 带有小调色板(黑/白或黄色图标或其他东西)的图像的GIF
3
Aaron

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

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

使用PNG你不能这样做,但值得注意的是,有时PNG比JPEG更大,有时甚至小得多。对于黑白图像,PNG要小得多,例如黑白线条图。

这些天给出的建议是使用CSS sprites通过减少请求来加快加载时间,但是你需要实际查看你得到的图像大小。 CSS Sprite图像很可能比组件图像大得多,例如,如果您将几个黑白PNG与一个颜色组合在一起。

2
delete

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

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

正如 jessegavin 指出的,大多数图像应用程序会显示压缩效果的预览 - 使用它们,因为“8”的一揽子设置很少会给你最好的折衷。

最后, 谷歌页面速度 Firefox/ Firebug 插件可以让你很好地了解你可以减少多少图像尺寸(包括允许你查看和保存较小的版本) 。

2
Zhaph - Ben Duguid
1
adamcodes

完成所有其他建议以确保您的图像尽可能小,同时保持所需的质量水平之后,您还需要配置您的网站,以便使用最少的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标头(不是两者),以便之前下载文件的浏览器可以快速测试是否通过比较标题而不是拉下整个图像来获得当前版本。

虽然有很多资源可以讨论这些技术,但雅虎在一个地方带来了很多提示 提高内容交付的性能

1
JasonBirch