如何为Web优化图像
你不喜欢图像吗？
当你阅读时，他们可以将一段文字转化为引人入胜的体验。图像增强了博客文章，使其更具共享性，并为整个网站设置了基调和品牌。
你知道吗？我们天生就对图像做出反应。这就是为什么在营销博客时，将图像整合到内容中是一个强大的工具。
但是，如果你不小心，图像可能占到网页总大小的一半以上（或更多）。就在几年前，网页的平均大小为600–700K。现在，平均容量为2MB，并且每年都在增加。
太棒了！
发生这种情况的主要原因是网页上使用多个图像的频率越来越高，而这些图像的大小和优化都不正确。这意味着它们没有以web友好的方式保存或编译，反而会使页面膨胀。
不过，我们大多数人都会把优化图片作为事后考虑的事情，而更喜欢做一些有趣的事情，比如写一篇史诗般的文章，或者与你所在领域的其他博主建立联系。
但是，页面膨胀意味着您的页面加载速度受到影响。如果您使用的是高速连接，您可能不会认为这有什么大不了的，但您的许多访问者并非如此。此外，谷歌不喜欢页面加载速度慢，这会对你的搜索引擎优化产生负面影响。
为什么需要优化图像
你努力创造一流的内容，你花了无数个小时推广你的博客，并与其他博客作者建立联系，因此你最不希望的就是潜在访问者在你的网站加载之前就放弃它！
研究表明，如果网站加载时间超过三秒，多达40%的访问者会单击后退按钮。
我知道，三秒钟真的没那么长，但当你在移动连接上等待网站加载时，一秒钟似乎是永远的。
而且，由于您的许多访问者可能使用较慢的移动连接，很明显，您需要减小页面大小。我们已经知道页面大小膨胀的最大罪魁祸首是什么——是你的图片。
不必要的大图像也会占用您托管帐户的空间。虽然有些主机可能有“无限”的存储空间，但许多高级托管提供商将较低层计划的存储容量限制在10GB左右。这可能会很快被填满，特别是如果你在同一个帐户上托管多个图片密集的网站。
那么，你如何判断你的图片是否让你的网站变慢了呢？使用测试网站速度谷歌PageSpeed Insights.
如果谷歌报告未优化的图像是一个问题，下面是您需要知道的来修复它。
图像优化基础知识
在优化博客上的图像时，需要注意以下几点：文件类型、图像大小和尺寸、图像的服务方式以及图像压缩。
让我们仔细看看这些方面。
文件类型
网络上的图像通常以PNG或JPEG文件格式保存，或以GIF格式保存动画。谁不喜欢那些飘荡在网络上的搞笑动画礼物！
现在技术上可以如果您以任何一种格式保存图像，您的访客浏览器将不会有问题显示您的网页，但为了获得最佳质量和优化，请遵循以下规则：
- JPEG–用于显示人物、地点或事物的照片和设计
- PNG–最适用于图形、徽标、文本密集型设计、屏幕截图，以及需要透明背景的图像时
- GIF–如果需要动画，则使用PNG
那么，为什么会有不同的格式呢？
嗯，PNG传统上用于保存徽标和图形，因为它保留了原始图像质量——没有人想要模糊的文本和像素化的形状。但是，如果您尝试将照片保存为PNG，它看起来会很神奇，但生成的文件大小不会太惊人。
JPEG通常用于保存照片。为了创建更小的文件大小，一些图像数据被丢弃，但由于照片包含各种各样的颜色和自然变化，质量损失通常是人眼无法察觉的。
稍后我们将更详细地介绍压缩，但现在如果您只记住两件事，请记住：JPEG用于照片，PNG用于文本/图形。
图像尺寸
你有没有在加载网页时注意到一张很小的图片（比如头像）需要f-o-r-e-v-e-r才能下载？比如说，你能看到每一行都进来了吗？你在想，这么小的图片怎么能下载这么长时间？
当它发生在大标题图像上时，情况会更糟，因为它会暂停整个页面的加载。
之所以会出现这种情况，是因为博主没有正确调整和优化他们的图像，在我们的头像示例中，可能直接从他或她的DSLR相机上传了全分辨率JPEG。
这是一个巨大的文件！
您知道，web浏览器（通常）会从原始尺寸缩放图像，使其与网页上的位置很好地匹配。屏幕上看起来很小的图像实际上可能是一张巨大的1000万像素的照片，通过浏览器实时缩小。
现在，一些web发布平台将自动创建不同大小的多个全分辨率图像变体，但如果没有，则应事先在Photoshop、Lightroom、Pixlr甚至MS Paint等图像编辑器中调整图像大小。这可能意味着50K文件和5MB文件之间的差异。
例如，WordPress会自动创建三个（或更多，取决于主题）上传图像的副本，所有这些副本都具有不同的尺寸，您可以在博客帖子中使用，而不是总是使用全尺寸图像。
如果你习惯于上传巨大的库存照片图像，并希望在您的托管帐户WordPress插件中节省空间不健全有你的支持。
它会调整原始图像的大小并将其替换为更易于管理的图像，因此即使您将全尺寸图像插入到帖子中，也不会太糟糕。
一旦激活，Imsanity还可以搜索现有图像并相应调整大小。
为您的图像提供服务
如何为访问者提供图像并不是严格地优化图像本身，但它会对页面加载时间产生巨大影响。
大多数博主直接从他们的托管帐户提供他们的图像，这通常很好，但如果你真的想挤出网站的每一点性能，那么在内容交付网络（CDN）上托管你的图像会有很大的不同。
CDN由位于世界各地数据中心的战略性web服务器组成。这些服务器托管您的图像的副本，当访问者的浏览器从您的网站请求图像时，CDN会自动将浏览器定向到地理位置最接近它们的服务器。
例如，这意味着来自欧洲的游客将收到来自欧洲本地服务器的图像，而不是来自美国或其他地方的图像。由于响应时间和网络延迟减少，图像下载速度大大加快，减少了页面加载时间。
新万博手机网页版博客向导使用苏库里（它包括一个安全防火墙和一个CDN），但也有其他高质量的提供商，如亚马逊的Cloudfront或KeyCDN。即使是流行的CloudFlare（严格来说它不是CDN）也免费提供CDN，并且在大多数共享主机包中都很容易设置。
图像压缩
说到优化图像，没有什么比高级有损图像压缩更能减少文件大小了。
最图像编辑工具喜欢Visme公司或者Photoshop将使用有损JPEG压缩保存文件，因为它具有最佳的文件大小缩减。因此，虽然图像质量略有下降，但使用有损图像压缩可以将巨大的图像缩小到网络友好的大小。
我相信许多使用Photoshop的人可能会看到为Web保存功能是图像优化的最终目标。甚至像PicMonkey或Visme这样的在线图像编辑工具也会优化你的图像。
但你知道吗，有一些工具可以从Photoshop或其他编辑工具中获取你的“优化”图像，再压缩40%（或更多），然后还它看起来和人眼几乎一样吗？
这里有一些免费和付费的工具，可以帮助您将图像压缩到网络友好状态。
桌面工具
ImageAlpha/ImageOptim
对于Mac用户，ImageOptim是一个免费的桌面工具，我每天在上传PNG图像之前都会使用它来优化PNG图像，主要是屏幕截图。这些工具很容易使用，您只需拖放文件，但您必须一次处理一个图像。
专业提示：对于精通技术的人来说ImageOptim–CLI，您可以在其中一次优化整个文件夹中的图像。
ImageAlpha是一个有损PNG压缩器，可以在收缩PNG文件方面发挥奇效，而ImageOptim则执行高级无损（有损）压缩，并从PNG、JPEG和GIF文件中去除不必要的元数据。
对于我的PNG图像，我首先通过ImageAlpha运行它们：
在这里，它将我的屏幕截图从103K减少到28K。
然后我通过ImageOptim运行了它，额外节省了10%。
JPEGmini
对于JPEG文件，我使用桌面对其进行优化JPEGmini应用程序，可用于Mac和Windows。
Lite版本允许您每天免费优化多达20幅图像，取消该限制需要花费19.99美元。
专业提示：想要通过插件将JPEGmini集成到Photoshop或Lightroom中的高级用户可以以99.99美元的价格购买Pro版本。
在线/云/SaaS工具
TinyPNG公司
如果您正在寻找高质量的在线图像压缩工具，TinyPNG（尽管名称不同，它也会优化JPEG文件）是一款web应用程序，它允许您将多达20个5MB或更小的图像拖动到浏览器中，并立即对其进行优化。
他们还有一个开发人员API，并制作WordPress插件可在上传时自动优化图像。
TinyPNG每月为您提供500次免费的图像优化，之后根据数量的不同，每幅图像收费从0.002美元到0.009美元不等。
现在每月500张图片听起来可能很多，但当你考虑到WordPress通常会为每张图片创建三到五种不同大小的变化时，500张图片看起来不像那么多对于多产的博主来说。幸运的是，每张图像的成本是预算友好的。
EWW图像优化器
如果你还没有准备好花钱，又不想为手动优化图像而烦恼，那么免费的EWW图像优化器WordPress插件可以自动优化您上传的图像。
您可以选择执行有损压缩的高级订阅，但免费版本只执行无损压缩，因此节省的费用不多。不过，这会节省你的时间，总比什么都没有好。
把它包起来
一些人预测，到2017年，平均网页大小将接近3MB，现在是开始优化图像的时候了。
记住，并不是所有的访问者都会使用高速连接，页面膨胀和页面加载速度慢可能会影响你在谷歌的排名。可以说，为了帮助你减轻负担，今天就要养成优化图像的习惯。
请注意您的图像尺寸，并将任何超大库存照片或数码相机中的图像调整到适当的大小。
接下来，利用JPEGmini等桌面应用程序或TinyPNG或Kraken等云工具进行现代图像压缩，如果可能的话，通过插件将其集成到WordPress中。
最后，如果您的发布平台自动创建原始图像的大小变化，请为您的博客文章选择其中一个，而不是原始的全尺寸图像。
相关阅读：减少PDF文件大小的7种方法.
披露：这篇文章包含附属链接。这意味着，如果你购买，我们可以给你一小笔佣金。
