如何为 WordPress 优化图像,完整指南
网络上的人们没有太多时间来消费数据——因为后者太多了。 数据太多,我们根本没有时间阅读所有内容! 作为现代网络的内容管理者,您的任务是最大化吞吐量。 你用更少的话表达得越多,你的工作就越好。
为什么图像(如此非常)重要?
您会(并且应该)在帖子和文章中使用图片的原因有很多:
- 图像用作号召性用语 (CTA) 的视觉刺激。 CTA 可以是您希望访问者执行的任何任务。 常见的 CTA 包括订阅您的时事通讯、在社交媒体上分享您的文章或购买您的产品。
- 图像增强了作者试图与读者建立的联系。
- 图像通过更少传达更多。
因此,我们在演示文稿(博客文章、非正式报告、实际 PowerPoint 演示文稿等)中使用正确的图像非常重要,以便在读者心中留下印记!
可是等等! 有问题!
图片占用了现代网站使用的带宽的 63% 左右,因此对它们进行适当的速度优化变得越来越重要。
页面加载时间延迟一秒可将转化率降低 7%
我们已经确定人们的注意力持续时间很短(现代内容生产速度的缺点之一)。 即使您使用正确的图像,如果它们没有在可接受的时间范围内加载,也会失去兴趣。
大多数网站都有同样的问题——他们使用优秀的图片,但向访问者提供图片的方式很差。 大尺寸、糟糕的优化、不正确的格式、不必要的大尺寸(尺寸)、无响应的图像和粗心的 SEO 错误,是现代网络面临的一些最常见的问题。 在今天的文章中,我们将为您提供 10 个简单的图像优化技巧,您可以使用它们来避免这些问题。
1.调整大尺寸图像

“额外的薯条”并不总是好的
这个很经典假设您需要在您网站的“团队”页面中使用 150×150 像素的照片。 通常,您会使用 5MP 的头像,稍微编辑一下,最后上传。
你发现问题了吗? 有些人直接上传实际的 5MP 图像! WordPress 主题将加载整个 5MP 图像(即 5 x 10^6 像素)并要求浏览器将其缩小到所需的 150×150 像素尺寸。 本质上,浏览器只显示原始图像的 0.0045%!
您最终会浪费您和访问者的带宽(即使您通过 Stackpath CDN 之类的内容交付网络提供图像),消耗更多硬盘空间并增加加载时间。 您的站点中没有任何功能是您想要的。
始终将图像调整大小(我的意思是缩小)图像到所需的尺寸,然后上传!
你不需要花哨的软件来做到这一点——有免费的在线工具,比如 ImageResize.org 您可以使用它来快速调整和优化图像。 只需上传并调整您的照片设置。 完成后,下载优化的图像以在您的网站上使用。 他们还提供快速 图像压缩器 如果你只是想减少文件大小。
有用的工具:
- IrfanView 是一款出色的免费软件,可通过优化、水印和边框等高级选项批量调整图像大小。
- ImageMagick 是一种先进的开源工具,可用于多种编程语言和操作系统。 您可以编写自己的应用程序或简单地通过命令行使用它。
- 图像优化 (Mac) 允许您拖动整个文件夹并快速优化多个图像。
- 小PNG 是一个带有 API 的在线图像压缩工具。
2.使用正确的图像格式
用于图像的格式起着至关重要的作用。 作为一般经验法则,使用 PNG 用于矢量图形和计算机生成的图像,如剪贴画等。使用 JPEG 适用于各种颜色的照片或图像。 有关详细说明,请查看此 很棒的 StackOverflow 答案.
3. 使用渐进式 JPEG

基线(正常)JPG 与渐进式 JPG
对于普通人来说,JPEG 有两种类型——基线和渐进式。 从视觉上看,两者都是一样的。 不同之处在于它们的加载方式:
- 基线 JPEG 只有一层——包含整个图像。 请求时,会一次性加载整个图像。
- 渐进式 JPEG 由多个图层组成图像。 逐层加载渐进式 JPEG 图像,质量逐渐提高,最终为您提供无损视图。

IrfanView 支持使用 Progressive JPEG 进行批量转换
所有主要的图像缩放器都允许您将图像保存为渐进式 JPEG。
4.启用延迟加载
延迟加载 是一个优秀的 资源节约 仅当访问者向下滚动到图像的视图框架时才加载图像的技术。 考虑一篇文章——“2014 年最省油的 15 辆汽车”。 当然,这篇文章将包含至少 15 张图片。 无论显示设备(显示器、平板电脑或智能手机)的高度如何,您都无法将所有 15 张图像都放入视图框架中。 您必须向下滚动才能查看所有图像。
启用延迟加载后,仅当访问者在图像附近时才会加载图像。 换句话说,图像在您向下滚动查看时开始加载。 但是,前几张图像会立即加载,因为您已经在视图框架中。 延迟加载节省了两端的带宽并提高了加载时间! 您可以在 WordPress 中使用延迟加载 BJ 延迟加载插件.
5.添加CDN
使用内容交付网络 (CDN) 将从物理上距离访问者位置最近的服务器提供图像。 如果来自印度的访问者请求图像,并且 CDN 在东京和纽约有一个 POP(入网点,或简称为服务器),则该图像将从位于东京的服务器提供。
当您有大量流量时,您应该使用 WordPress 设置 CDN,以降低加载时间并获得整体性能。
在 WPExplorer,我们使用 Cloudflare,并且我们添加了一个推荐的免费 CDN 服务列表,您可能想要结账。 但是自己设置 CDN 可能会很复杂,这就是插件可以派上用场的地方。
Publitio 卸载媒体
一个不错的选择是 Publitio Offload Media 插件,它允许您将媒体文件存储在 Publitio 基于云的媒体管理器. 安装插件后,您可以轻松地将整个媒体库移出服务器,甚至可以优化图像和视频质量。 移动后,图像会迅速从 Publitio CDN 提供。 这可以释放大量的服务器空间,并且可以真正加快您的网站速度(特别是如果您采用的是空间有限的预算托管计划)。 甚至还有一个简单的“立即同步”按钮,可以在您编辑新帖子时自动将新媒体添加到云中。 高级 Publitio 计划包括自定义 CNAME、多个水印甚至视频加密的额外功能。
6.声明’alt’属性
‘alt’ 属性描述搜索引擎的图像。 如果无法加载图像,您在此字段中输入的文本将显示给用户。 很多人倾向于将这些字段留空。 这对 SEO 非常不利,并且您会失去流量。 您应该始终尝试在图片的 alt 标签中包含您网站的关键字。
7.优化压缩图像
优化后的图像比普通图像轻 40%。 这改善了加载时间并节省了带宽。 从 Freddy 的最佳 WordPress 图像优化插件列表中,我们会推荐 WPSmush.it 优化您的图像。 Kraken.io 也是一个很好的在线压缩图像的选项。 我们在 WPExplorer 一直使用它来优化特色图像,然后再将它们上传到帖子和主题演示。
8. 响应式图像

响应式网页设计就在这里
即使您的网站是响应式的,也不意味着您的图像是响应式的。 这意味着您用于 22 英寸桌面屏幕的标题图像也适用于 5 英寸 iPhone。 当您上传图片时,WordPress 会将其调整为多个版本——缩略图、中号、全尺寸等。开发人员可以更改此设置。 编码良好的主题将为图像的“中等”大小版本提供服务,从而节省带宽。
这 图片填充.WP 插件将用一个新的
9. 图片说明
字幕并不总是必需的,但在某些情况下,它是必需的——例如教程中的屏幕截图。 字幕图像可以帮助读者更好地理解主题,同时提升您的 SEO。
10. 图像文件名
从搜索引擎的角度考虑文件名。 使用与图像的“标题”标签中相同的文本。 此外,请尝试包含与您的网站最相关的关键字。
结论
图像搜索引擎优化对于任何新旧网站都至关重要。 实施图像搜索引擎优化的人 适当地 (有时可能很平凡),在 长跑。
有很棒的优化技术吗? 开火!