你不喜欢图像吗？

图片可以在你阅读时将一段文字转化为引人入胜的体验。 图片可以增强一篇博客文章，使其更容易被分享，并为你的整个网站定下基调和品牌。

这就是为什么在你的内容中加入图像是营销你的博客时使用的一个强大工具。

但是，如果你不小心，图片可能占到你的网页总大小的一半以上（或更多）。 就在几年前，一个网页的平均大小是600-700K。 现在，平均是2MB，而且每年都在增加。

那是巨大的!

发生这种情况的主要原因是，在网页上更频繁地使用多张图片，而这些图片没有适当的尺寸和优化。 这意味着它们没有以网络友好的方式保存或编译，反而使你的网页变得臃肿。

不过，我们中的大多数人都把优化图片作为事后的想法，而宁愿享受做一些有趣的事情，如制作一个史诗般的帖子或与你的利基市场中的其他博主建立联系。

但是，页面臃肿意味着你的页面加载速度受到影响。 如果你使用高速连接，你可能不认为这是一个大问题，但你的许多访问者不是。 此外，谷歌不喜欢缓慢加载的页面，它可以对你的SEO产生负面影响。

为什么需要优化图片

你努力创造一流的内容，你花了无数时间推广你的博客，并与其他博主建立联系，所以你最不希望的是潜在的访问者在你的网站还没有加载时就放弃了！你要做的就是让他们知道你的网站在哪里！

研究表明，如果一个网站的加载时间超过三秒，多达40%的访问者会点击返回按钮。

我知道，三秒钟真的不是那么长，但是当你在移动连接上，等待网站加载时，一秒钟可能看起来像永远。

由于你的许多访问者可能使用较慢的移动连接，因此很明显--你需要缩小你的页面尺寸。 我们已经知道页面尺寸膨胀的最大罪魁祸首是什么--是你的图片。

不必要的大图片也会占用你的主机账户的空间。 虽然你们中的一些人可能有 "无限 "存储空间的主机，但许多高级主机供应商在较低级别的计划中限制你有大约10GB的存储空间。 这可能会很快填满，特别是如果你在同一个账户上托管多个图像密集的网站。

那么，你如何判断你的图片是否拖累了你的网站？ 用Google PageSpeed Insights测试你的网站速度。

如果谷歌报告说未优化的图像是一个问题，这里是你需要知道的，以解决它。

图像优化基础知识

当谈到优化你博客上的图片时，你需要注意一些不同的事情：文件类型、图片大小和尺寸、你如何提供你的图片以及图片压缩。

让我们仔细看看这些领域中的每一个。

文件类型

网络上的图像通常以PNG或JPEG文件格式保存--或以GIF格式保存为动画。 谁不喜欢那些漂浮在网络上的热闹的GIF动画呢？

现在在技术上是 好的 如果你以两种格式保存你的图片--你的访问者的浏览器在显示你的网页时不会有任何问题--但为了获得最佳的质量和优化，请坚持以下规则：

• JPEG - 用于照片和设计，其中有人物、地点或事物的特点。
• PNG - 最适合于图形、标志、文字较多的设计、屏幕截图，以及需要透明背景的图像时。
• GIF - 如果你需要动画，否则使用PNG

那么，为什么会有不同的格式？

好吧，PNG传统上用于保存标识和图形，因为它保留了原始图像的质量--没有人想要模糊的文字和像素化的形状。 但是，如果你尝试将一张照片保存为PNG，它看起来会很惊人，但产生的文件大小将是，不那么惊人的。

传统上，JPEG是用来保存照片的。 一些图像数据被丢弃，以创造一个急剧缩小的文件大小，但由于照片包含各种各样的颜色和自然变化，质量上的损失通常是人眼无法察觉的。

我们稍后会更详细地讨论压缩问题，但现在如果你只记得两件事，请记住：JPEG用于照片，PNG用于文本/图形。

图像尺寸

你是否曾经加载过一个网页，并注意到一张小小的图片（也许是一张头像，例如）需要花很长时间来下载？ 比如，慢到你可以看到每一行的到来？ 你对自己说，这么小的图片怎么能花这么长时间来下载？

而当它发生在一个大的标题图片上时，情况就更糟糕了，因为它可能会拖延整个页面的加载。

发生这种情况的原因是博主没有适当调整和优化他们的图片，在我们的头像例子中，可能是直接从他或她的单反相机上传了全分辨率的JPEG。

这是个巨大的文件!

你看，网络浏览器会（通常）将图像从其原始尺寸上进行缩放，以便它能很好地适应网页上的位置。 屏幕上看起来很小的图像，实际上可能是一张巨大的1000万像素的照片，被浏览器实时缩放。

现在，一些网络发布平台会自动创建不同尺寸的全分辨率图像的多个变体，但如果没有，你应该事先在图像编辑器中调整图像的大小，如Photoshop、Lightroom、Pixlr--甚至MS Paint。 这可能意味着50K文件和5MB文件之间的区别。

例如，WordPress会自动为你上传的图片创建三个（或更多，取决于你的主题）副本--都有不同的尺寸--你可以在博客文章中使用，而不是总是使用全尺寸的图片。

如果你有上传巨大图片的习惯，并希望节省你的主机账户的空间，WordPress插件Imsanity会帮助你。

它调整原始图片的大小并将其替换为更容易处理的图片，所以即使你将全尺寸的图片插入你的文章，也不会那么糟糕。

一旦激活，Imsanity还可以搜索你现有的图片并相应地调整大小。

为您的图像提供服务

你如何将你的图片提供给你的访客，严格说来并不是为了优化它们本身，但它可以对你的页面加载时间产生巨大的影响。

大多数博主直接从他们的主机账户中提供图片，这通常是好的，但如果你真的想从你的网站中榨取每一点性能，那么在内容交付网络（CDN）上托管你的图片会有很大不同。

CDN由位于世界各地数据中心的战略性网络服务器组成。 这些服务器存放着你的图像的副本，当访问者的浏览器从你的网站请求图像时，CDN会自动将浏览器引导到地理上离他们最近的服务器。

这意味着来自欧洲的访问者，例如，将收到由欧洲本地服务器提供的图像，而不是来自美国或其他地方的服务器。 由于响应时间和网络延迟减少，图像下载速度更快，减少了页面加载时间。

博客精灵使用Sucuri（它包括一个用于安全的防火墙以及一个CDN），但也有其他高质量的供应商，如亚马逊的Cloudfront或KeyCDN。 即使是流行的CloudFlare，严格来说也不是一个CDN，它提供一个免费的CDN，并且很容易在大多数共享主机套餐中进行设置。

图像压缩

当谈到优化你的图像时，没有什么比先进的有损图像压缩更能减少你的文件大小。

大多数图像编辑工具，如Visme或Photoshop将使用有损JPEG压缩来保存文件，因为它有最好的文件大小减少。 因此，虽然图像质量略有下降，但使用有损图像压缩将巨大的图像减少到网络友好的大小。

我相信许多使用Photoshop的人可能会认为其 保存为网络版 甚至像PicMonkey或Visme这样的在线图像编辑工具也会优化你的图像。

但你知道吗，有一些工具可以从Photoshop或其他编辑工具中获取你的 "优化 "图像，将其再压缩40%（或更多），并且 仍然 让它看起来与人眼几乎相同？

这里有一些免费和付费的工具，可以帮助你把你的图片压缩到网络友好的状态。

桌面工具

ImageAlpha / ImageOptim

对于Mac用户来说，ImageOptim是一个免费的桌面工具，我每天都用它来优化PNG图片--主要是屏幕截图--然后再上传。 这些工具很容易使用，你只需拖放文件，但你必须一次做一张图片。

专业提示 ：对于精通技术的人来说，有一个ImageOptim-CLI，在那里你可以一次性优化整个文件夹的图像。

ImageAlpha是一个有损的PNG压缩器，对缩小PNG文件有奇效，而ImageOptim则进行高级无损（可选择有损）压缩--而且它能从PNG、JPEG和GIF文件中剥离不必要的元数据。

对于我的PNG图像，我首先通过ImageAlpha运行它们：

在这里，它将我的屏幕截图图像从103K减少到28K。

然后我通过ImageOptim运行它，并额外节省了10%。

录像带

对于我的JPEG文件，我用桌面上的JPEGmini应用程序对其进行优化，该应用程序可用于Mac和Windows。

精简版允许你每天免费优化多达20张图片，取消限制的费用为19.99美元。

专业提示 : 想通过插件的方式将JPEGmini整合到Photoshop或Lightroom中的高级用户可以购买99.99美元的专业版本。

在线/云/SaaS工具

TinyPNG

如果你正在寻找一个高质量的在线图像压缩工具，TinyPNG（尽管它的名字也能优化JPEG文件）是一个网络应用，它允许你拖动多达20张5MB或更小的图像到你的浏览器，并让它们一次性得到优化。

他们还有一个开发者API，并提供了一个WordPress插件，可以在上传时自动优化你的图片。

TinyPNG每月给你500张免费的图片优化，之后每张图片收费0.002-0.009美元，视数量而定。

现在每个月500张图片听起来很多，但是当你考虑到WordPress经常为每张图片创建三到五种不同尺寸的变化时，500张图片看起来并不像 那许多 幸运的是，每张图片的费用是预算友好的。

EWWW图像优化器

如果你不准备花钱，也不想为手动优化图片而烦恼，WordPress的免费EWWW图片优化插件可以自动优化你上传的图片。

你可以选择进行有损压缩的高级订阅，但免费版本只进行无损压缩，所以节省的费用几乎没有那么多。 不过，这将节省你的时间，聊胜于无。

请注意： 要了解完整的情况，请查看我们关于图像压缩工具的文章。

收尾工作

有些人预测，到2017年，平均网页大小将接近3MB，现在是开始优化你的图像的时候了。

记住，并不是所有的访问者都会使用高速连接，页面臃肿和缓慢的页面加载时间可能会影响你在谷歌的排名。 为了帮助你减轻负担，可以这么说，今天就养成优化图片的习惯。

注意你的图片尺寸，将任何过大的图片或数码相机中的图片调整到合适的尺寸。

接下来，利用现代图像压缩的优势，如JPEGmini等桌面应用程序，或TinyPNG或Kraken等云工具--如果可能的话，用一个插件将它们整合到WordPress中。

最后，如果你的发布平台自动创建了原始图片的大小变化，那么就为你的博客文章选择其中的一个，而不是原始的、全尺寸的图片。

相关阅读： 减少PDF文件大小的7种方法。