网络用户是视觉群体，我们依靠图像来支持网络内容。 与文本一样，图形内容是在网页或应用程序中传达信息的关键组成部分。 各种图像，从图表和图形到图标和箭头，再到面部照片和地图，都可以提供即时数据并提高读者的理解力和记忆力。 但是，与文本不同，图像需要大量时间和带宽来下载和呈现。 图形内容很容易占到典型网站总带宽的 60%-85%。例如，HTTPArchive 指出图像约占网站平均内容的 50%。

显然，获得性能显著提升的主要方法之一，是减少加载图像所需的时间。 让我们来看看解决这个问题的一些方法。

移除不必要的图像

要问的第一个问题是您是否真的需要图像，而这个问题显然没有被问到足够的问题。 太多的各种网站都将大型且大部分无用的图像“放在首位”。 这会减慢页面加载速度，并使读者在获得有意义的内容之前滚动页面的一半。

考虑是否真的需要每个图像，如果需要，是否立即需要。 在更重要的内容之后可以稍后加载吗？ 如果不是，是否可以对其进行优化，使其对页面加载的影响最小？ 请记住，下载内容（尤其是图形内容）所需的时间应该花在换取图像提供的信息上。

是的，图像可以真正支持文本内容，或者只是提供视觉兴趣，但如果图像不能增加信息价值或为用户阐明意义，请将其删除。 最快的图像是您不必下载的； 您删除的每张图片都会加快页面加载时间。

选择合适的图像类型

根据经验，PNG 用于剪贴画、线条图或任何您需要透明度的地方，JPG 用于照片，以及 GIF 当您需要动画时。 如有疑问，请进行简单但明确的测试：以多种格式保存图像并进行比较！

人们经常认为 PNG（一种无损压缩格式）比 JPG（一种有损压缩格式）对摄影图像具有视觉优势，但事实并非如此。 例如，下面的两张图片看起来都很棒； 它们之间没有明显的视觉差异。 兽目明净，皮毛分明，光影平滑。

dog+cat.png -- 232k

dog+cat.jpg -- 42k

但是PNG图像是232k，而JPG只有42k！ 下载时间缩短了 81%，而质量没有明显损失。 判决：JPG FTW。

移除图像的Metadata信息

元数据(metadata)或“有关数据的数据”存在于大多数图像中，并且可能包括（例如在相机照片上）有关相机/手机型号、日期和时间戳、照片应用程序设置、文件格式、高度和宽度的数据， 地理位置坐标等等。 图像编辑器可能在其保存的文件中包含元数据，例如作者姓名、分辨率、色彩空间、版权和关键字。

对于大多数网站图像，元数据并不重要，因此我们最好将其去掉。 您肯定已经猜到了，有很多方法可以做到这一点。 首先，看看您喜欢的图像编辑器； 它可能已经具备查看和编辑元数据的能力。 （例如，Gimp 可以。）如果没有，只需使用在线可用的工具之一，例如 VerExif：http://www.verexif.com/en/。

例如，这张 JPG 图片（最初为 1280 x 720，已调整大小以在此处展示）是 **** 年在澳大利亚用手机相机拍摄的。

bonniedoon.jpg, original, 363k

VerExif 的在线工具用于上传图像并识别要删除的元数据。

VerExif's upload dialog

如下表所示，这张图片有相当多（38k！）的元数据。 （请注意，地理位置数据是空的，可能是因为美国手机在该位置没有服务。）

删除元数据后，文件大小从 363k 下降到 325k，相差 10.5%； 当然不像物理尺寸缩小或压缩那么戏剧性，但百分之十没什么好打喷嚏的，特别是如果你有多张照片。

元数据删除工具非常丰富，在 MakeUseOf 上有一篇关于 Exif 删除的原因和方法的好文章。

http://www.makeuseof.com/tag/3-ways-to-remove-exif-metadata-from-photos-and-why-you-might-want-to/

调整图像尺寸

根据预期用途调整图像大小

大图像比小图像需要更长的时间来下载。 您的所有图像都应根据其预期用途调整大小，并且不应依赖浏览器来调整它们的大小以进行渲染。

通常，从服务器检索大图像，然后在浏览器中使用 CSS 调整大小。 这可能是出于完全合乎逻辑的原因——例如只使用一个图像作为在悬停时展开的缩略图——或者它可能只是粗心的编码。 不管是什么原因，它都会浪费带宽。

例如，您可能有一个 1200 x 600 像素的图像，以 60 x 30（作为 5% 的缩略图）呈现，并在悬停时使用 CSS 过渡将其卷起至全尺寸。 它工作正常并且看起来很棒，但是如果用户实际上从未将鼠标悬停在缩略图上，那么下载图像所花费的 95% 的时间都被浪费了。 您最好花时间制作单独的、适当大小的缩略图，仅在实际请求时才显示完整大小的图像。

裁剪图像以仅显示重要的内容

一种非常有效的减少各种图像文件大小的技术是简单的裁剪：省略对信息传递不重要的图像部分。

额外的背景和空白、不必要的边框和非预期对象不仅在视觉上而且在物理上使图像混乱，影响图像大小及其下载效率。

坦率地说，上面显示的澳大利亚旅行者的照片在水平和垂直方向上都太大了。 它可以被裁剪以更有效地关注人、栅栏上的标志和房子的主要部分。

bonniedoon.jpg, cropped, 115k

在这里，我们从已经调整大小的版本开始，从 220k 开始，然后裁剪它，将其保存到上面看到的 115k 版本。 这减少了 52%，而且照片现在以文件大小的一半集中在重要部分（是的，狗窝很重要！）。 所有必需的信息都在那里，只是更有效地呈现。

降低图像质量

当然，我们希望我们的图像在合理范围内看起来尽可能好，这意味着以 100% 的质量保存 JPG，对吗？不必要。在大多数（也就是说几乎所有）情况下，您可以降低 JPG 质量，从而降低文件大小，而不会出现任何明显的质量差异。

一旦您确定了图像的实际大小，您如何将其设置为该大小，但仍保留所需的质量和特征？您需要的第一件事是一个好的图像处理工具。对于这些修改，我们使用了流行的 Windows 桌面产品 paint.net。

查看以下照片类型的 JPG，其质量逐渐降低，并注意文件大小的减小。快速计算显示，100% 质量图像和 25% 质量图像之间的尺寸差异为 90%！但你真的能看出区别吗？也许更重要的是，即使您可以看到任何差异，是否足以保证更大的文件并因此降低下载速度？

burger100.jpg -- 原始图像 100% 质量, 227k

 通过 paint.net 保存为低质量图像

burger80.jpg -- 80%, 60k

burger50.jpg -- 50%, 34k

burger25.jpg -- 25%, 20k

 

要点很明显：一定要尝试使用质量较低的 JPG，看看在看到差异之前你可以走多低，然后使用保持照片清晰度的最小的。 不那么明显的是，文件大小可以是一个诱人的简单修复，但并非没有缺点。 同样，在将质量降低作为一种包罗万象的解决方案之前，需要进行一些实验。 有关更多详细信息，请参阅这篇出色的文章，How to Compare Images Fairly。

其他图像操作工具:

• XNConvert: 这个免费的跨平台工具可以处理批量图像，并执行调整大小、优化和其他转换。
• ImageOptim: 这个免费工具可用于 Mac 和在线服务，专门用于优化图像以提高速度，包括元数据删除（如上所述）。
• ResizeIt: 一款仅适用于 Mac 的桌面产品，可让您同时更改多个图像的大小，并可以同时转换文件格式。
• PicResize: 几个优秀的基于浏览器的工具之一，它为您提供了许多用于裁剪、旋转、调整大小、添加效果和转换图像的选项。
• Gimp: 这个广受欢迎的跨平台工具会随着年龄的增长而变得更好。 Gimp 功能强大且灵活，可让您执行各种图像处理任务，当然包括调整大小。

这只是可用工具的一小部分。 尽管 CrazyEgg 在这里有一篇全面的文章，但我们不在这里对图像编辑器进行比较审查：

https://www.crazyegg.com/blog/image-editing-tools/

压缩图像

使用压缩工具可以进一步压缩 PNG 和 JPG 图像，从而减小文件大小而不影响图像尺寸或视觉质量。 例如，这是一个使用免费在线压缩工具 TinyPng 完成的图像压缩。

https://tinypng.com/

您可以在下面的屏幕截图中看到图像 resizeitscreenshot.png 的巨大压缩结果（TinyPng 上传但不显示它正在压缩的图像）。 TinyPng 报告说图像大小从 551k 下降到 133k，提高了 76%。

TinyPng

是的，TinyPng 用于 TinyPng 屏幕截图本身，节省了 57%。

不要假设因为 PNG 是无损的，所以它们不能被进一步压缩； 他们能。 TinyPng 当然不是唯一可用的工具。 这是一堆图像压缩产品的简要介绍。

http://enviragallery.com/9-best-free-image-optimization-tools-for-image-compression/

小结

虽然本节中的技术并非包罗万象，但它们代表了一组很好的过程，您可以使用它们来减小图像大小，从而减小它们的传输速度。 图形内容大小是一个很容易解决的主要领域，但它可以让您的网站在您寻求更快加载页面的过程中显着提高速度。