它们可以在你阅读时将一段文字转化为一种吸引人的体验。图片可以增强一篇博客文章,使其更容易被分享,并为整个网站定下基调和品牌。而且你知道吗?我们对图像的反应是硬性的。这就是在你的内容中加入图像是在营销你的博客时使用的一个强大工具的原因。hostease香港虚拟主机商分享如何为网站优化图片
但是,如果你不小心,图像可能占到你的网页总大小的一半以上(或更多)。就在几年前,一个网页的平均大小是600-700K。现在,平均为2MB,而且每年都在增加。那是巨大的!
发生这种情况的主要原因是,在网页上更频繁地使用多张图片,而这些图片没有适当的尺寸和优化。这意味着它们没有以网络友好的方式保存或编译,而是使你的网页变得臃肿。
不过,我们中的大多数人都把优化图片作为事后的想法,而宁愿享受做一些有趣的事情,如制作一个史诗般的帖子或与你的利基的其他博主建立联系。
但是,页面臃肿意味着你的页面加载速度会受到影响。如果你使用高速连接,你可能不认为这是一个大问题,但你的许多访问者不是这样。此外,谷歌不喜欢缓慢的加载页面,它可以对你的搜索引擎优化产生负面影响。
为什么你需要优化图片
你努力创造一流的内容,你花了无数的时间来推广你的博客,并与其他博主建立联系,所以你最不希望的就是潜在的访问者在你的网站还没有加载时就放弃了。推荐阅读:《apache中使用.htaccess设置网页内容缓存(js,css,图片)》
研究表明,如果一个网站的加载时间超过三秒,多达40%的访问者会点击返回按钮。
我知道,三秒钟真的不长,但当你在移动连接上等待一个网站加载时,一秒钟可能看起来像永远。
由于你的许多访问者可能使用较慢的移动连接,因此很明显–你需要缩小你的页面大小。我们已经知道页面臃肿的最大罪魁祸首是什么,那就是你的图片。
不必要的大图片也会占用你的主机账户的空间。虽然你们中的一些人可能拥有 “无限 “存储空间的主机,但许多高级主机供应商在较低级别的计划中限制你的存储空间为10GB左右。这可能很快就会填满,特别是如果你在同一个账户上托管多个图像密集的网站。
那么,你如何判断你的图像是否拖累了你的网站?用谷歌PageSpeed Insights测试你网站的速度。
如果谷歌报告说未经优化的图像是一个问题,这里是你需要知道的解决方案。
图片优化基础知识
当涉及到优化你的博客上的图片时,你需要注意一些不同的方面:文件类型、图片大小和尺寸、你提供图片的方式以及图片压缩。
让我们仔细看看这些方面:
文件类型
网络上的图像通常以PNG或JPEG文件格式保存–或以GIF格式保存动画。谁不喜欢那些漂浮在网络上的热闹的GIF动画呢?
现在,如果你用两种格式保存你的图像,在技术上是没有问题的–你的访问者的浏览器在显示你的网页时不会有问题–但为了获得最佳的质量和优化,请坚持以下规则。
- JPEG – 用于有人物、地点或事物特征的照片和设计
- PNG–最适合于图形、标志、文字较多的设计、屏幕截图,以及需要透明背景的图像时。
- GIF – 如果你需要动画,否则使用PNG。
那么,为什么会有不同的格式?
好吧,PNG传统上用于保存标志和图形,因为它保留了原始图像的质量–没有人想要模糊的文字和像素化的形状。但是,如果你尝试将一张照片保存为PNG格式,它看起来会很神奇,但产生的文件大小将不那么神奇。
传统上,JPEG是用来保存照片的。一些图像数据被丢弃,用来创造一个急剧缩小的文件大小,但由于照片包含各种各样的颜色和自然变化,质量的损失通常对人眼来说是无法察觉的。
我们稍后会更详细地介绍压缩技术,但现在如果你只记得两件事,请记住。JPEG用于照片,PNG用于文本或图形。
图像尺寸
你是否曾经加载过一个网页,并注意到一张很小的图片(也许是一张头像,例如)需要f-o-r-e-v-e-r来下载?比如说,慢到你可以看到每一行的到来?你心想,这么小的图片怎么会花这么长时间下载?
而当它发生在一个大的标题图片上时,情况就更糟糕了,因为它可以拖延整个页面的加载。
发生这种情况的原因是博主没有适当调整和优化他们的图片,在我们的头像例子中,可能是直接从他或她的单反相机上传了全分辨率的JPEG。
而这是一个巨大的文件!
你看,网络浏览器会(通常)将图像从其原始尺寸上进行缩放,以便它能很好地适应网页上的位置。屏幕上看起来很小的图片,实际上可能是一张巨大的1000万像素的照片,被浏览器实时缩小。
现在,一些网络发布平台会自动创建不同尺寸的全分辨率图像的多种变化,但如果没有,你应该事先在图像编辑器中调整图像的大小。这可能意味着一个50K的文件和5MB的文件之间的区别。
比如:WordPress可以自动为你上传的图片创建三个(或更多,取决于你的主题)副本–都有不同的尺寸–你可以在博客文章中使用,而不是总是使用全尺寸的图片。
如果你有上传巨大图片的习惯,并想节省你的主机账户的空间,WordPress插件Imsanity会帮助你。
它可以调整原始图片的大小,并将其替换为更容易处理的图片,因此,即使你将全尺寸的图片插入到你的文章中,也不会那么糟糕。
一旦激活,Imsanity还可以搜索你现有的图片并相应地调整大小。推荐阅读:《Python3:图片转字符画》
提供你的图片
你如何向你的访问者提供你的图片并不是严格意义上的优化它们本身,但它可以对你的页面加载时间产生巨大的影响。
大多数博主直接从他们的主机账户中提供图片,这通常是好的,但如果你真的想从你的网站中挤出每一点性能,那么在内容交付网络(CDN)上对你的图片进行托管会有很大不同。
CDN由位于世界各地数据中心的战略性放置的网络服务器组成。这些服务器承载着你的图像的副本,当访问者的浏览器从你的网站上请求一个图像时,CDN会自动将浏览器引导到地理上离他们最近的服务器。
这意味着,例如,来自欧洲的访问者将收到由欧洲本地服务器提供的图像,而不是来自美国或其他地方的服务器。由于响应时间和网络延迟的减少,图片的下载速度会更快,从而减少页面加载时间。
Blogging Wizard 使用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%。
JPEGmini
对于我的JPEG文件,我用桌面上的JPEGmini应用程序对其进行优化,该应用程序可用于Mac和Windows。
精简版允许你每天免费优化20张图片,如果要取消限制则需要19.99美元。
专业提示:想要通过插件的方式将JPEGmini整合到Photoshop或Lightroom中的高级用户可以购买99.99美元的专业版本。
在线工具/云工具/SaaS工具
TinyPNG
如果你正在寻找一个高质量的在线图像压缩工具,TinyPNG(尽管它的名字也能优化JPEG文件)是一个网络应用,它允许你拖动多达20张5MB或更小的图像到你的浏览器,并使它们一次得到优化。
a WordPress plugin available that can automatically optimize your images upon upload.
他们还有一个开发者API,并提供了一个WordPress插件,可以在上传时自动优化你的图片。
TinyPNG每个月给你500张免费的图片优化,之后每张图片收费0.002-0.009美元,取决于数量。
现在每月500张图片听起来很多,但是当你考虑到WordPress经常为每张图片创建三到五种不同尺寸的变化时,500张图片对于多产的博客来说似乎并不多。幸运的是,每张图片的费用是预算友好型的。
EWWW图像优化器
如果你不准备花钱,也不想为手动优化图片而烦恼,WordPress的免费EWWW图片优化插件可以自动优化你上传的图片。
你可以选择进行有损压缩的高级订阅,但免费版本只进行无损压缩,所以节省的费用几乎没有那么多。不过,这将节省你的时间,不过这总比没有好。
收尾工作
有些人预测,到2017年,平均网页大小将接近3MB,现在是开始优化你的图像的时候了。
请记住,不是所有的访问者都会使用高速连接,页面臃肿和缓慢的页面加载时间有可能影响你在谷歌的排名。为了帮助你减轻负担,可以这么说,今天就养成优化图片的习惯。
注意你的图片尺寸,将任何过大的图片或数码相机中的图片调整到合适的尺寸。
接下来,利用现代图像压缩的桌面应用程序,如JPEGmini,或云工具,如TinyPNG或Kraken–如果可能的话,用一个插件将它们整合到WordPress中。
最后,如果你的发布平台自动创建了原始图片的大小变化,那么就选择其中的一个用于你的博客文章,而不是原始的、全尺寸的图片。推荐相关阅读:《nginx系统真正有效的图片防盗链完整设置详解》