选择页面

对于营销者、写作者、设计师来说,把内容发布到网络的过程中,处理图片是其中一项最为费时费力的事情。图片的处理很多时候其实没有我们想象那么简单:因为对于所有以「流量分发」为核心的内容平台,图片还是SEO非常重要的部分。

什么意思呢?想象一下,你今天在博客上发布了一篇叫做「如何提升访问外网的速度」的文章,里面放了几张截图;而其他的作者也在他们的博客中写了一篇同样的文章,但是在他们的文章图片中:

  1. 图片名称都包含了「外网」关键词;
  2. 图片的尺寸更小;
  3. 图片的加载更快;

因此,当搜索引擎抓取了博客的内容后,当某个用户搜索「如何访问外网」时,他们的文章排在搜索结果前面的可能性就更高一些。而这一点,无论是百度、谷歌、微信内置的搜索,还是知乎等平台搜索,其实都是非常类似的。

因此在写作过程中,图片的优化是非常重要的工作之一。但是你会发现优化图片大多是这样的过程:

  1. 调整分辨率;
  2. 压缩图片大小;
  3. 修改PNG为JPG;
  4. ……

如果每一张都手动这么操作,自然会浪费非常多的时间,既然这些都是机器可以完成的,为什么不交给机器来完成呢?

因此,今天的文章就是分享如何自动化优化网页图像,从而让你的文章对于SEO更加友好。

什么是网页图像优化

首先,先来来交一下「网页优化图像」到底指的是什么。虽然「优化」这个词对于不同的公司,可能包含的意思有所不同,比如有的可能说是设计美观度上的,有的则指的是节省服务器的存储空间等等。但是我们这里所说的「网页图像优化」通常包括两个必要的步骤:缩放图像压缩图像

缩放图像

在优化图像的过程中最耗时的步骤就是缩放。尽管你可能希望图像看起来越清晰越好,但是高分辨率照片会导致文章加速速度变慢。比如你在1个只有200 x 200 空间的屏幕里,放了一张原始大小2000 x 2000 图片,其实最后根本用不上这么高清,你就已经可以看的很清楚了,也就是1800其实很大程度是「被浪费了」,但是浏览器仍然会加载原始文件,所以自然网页的访问速度就慢了。

为了避免这个问题,你需要在上传图片之前做缩放图片。对于部分的网站,可能内部自动会做缩放的处理,比如微信的头图上传的时候会自动压缩,但是对于其他大部分的站点,缩放的工作是需要你自己来完成的。

比如,在半撇私塾的博客上,我们将博客文章内的插图宽度控制在800像素宽度(除了某一些教程类的GIF图片除外),但是对于博客的封面图片则需要设置到1000 x 500像素。

压缩图像

除了缩放图片,把图片上传到网站之前,还需要对图片进行压缩处理。说到图片压缩,我们常常会联想到模糊、质量差,但是其实良好的图像压缩几乎是无损的:它不会降低图像的可见质量

图像压缩很多时候做的工作就是通过去除图像中不相关和冗余的数据来提高图像的效率。使用良好的图像压缩工具,你几乎不会注意到原始图像和优化图像之间的质量差异。

因此,综合了缩放图片和压缩图片这两个步骤,你可以使用一个工作流实现全自动化的草足。以下主要介绍如何在Mac 平台实现这个自动化的过程。

如何在macOSWindows在线上缩放和压缩图像的方法。

自动化图片优化的准备工作

对于 Mac 的系统,你只需要两个免费工具:

  1. Automator :它是Mac上的一款内置工具,可以帮助你处理许多自动化的任务,比如当打开把word保存到某个文件夹以后,就自动导出PDF 保存到另外一个文件夹。所以,你自然也可以使用Automator 来调整图像大小;
  2. ImageOptim:这是一款第三方、免费图片缩放工具,可以在不降低图片质量的情况下快速压缩图像。要使用ImageOptim,你只需将文件拖放到应用程序中,ImageOptim将完成剩下的工作。需要注意的是,一旦工具压缩了图片,图像被新的压缩版本覆盖,因此需要提前做一下备份。

当你下载好了 ImageOptim 后,你就可以开始配置这个自动化的「程序」。记住,在整个自动化处理的过程中,关键的思路就是:当你把某个图片添加都某个文件夹后,所有的图片就会被自动优化

自动化图片优化的工作流

要开始构建图像优化工作流之前,你需要打开 Automator ,并选择「文件夹操作」工作流程,并设置选择用作触发器文件夹的文件夹。

接下来,你将添加3个主要的步骤:

1. 添加「复制访达项目」步骤:这样做的目的是给你的原始文件做一个备份,如果你不需要备份,那么可以跳过这个步骤。

2. 选择图像优化形式:在这个优化过程中,你可以选择「缩放图像」选项或者「裁剪图像」选项。「缩放图像」是一个简单的缩放比例,比如按照百分比还是按照固定的像素。而「裁剪图像」则是当你需要特定尺寸的时候,比如你的博客中需要固定为 1500 x 500 像素的图片。

3. 添加「打开访达项目」步骤:通过这个步骤,你命令 Automator 去打开图片压缩软件 ImageOptim,让ImageOptim 完成图片压缩的工作。

4. 测试工作流:要在 Automator 中测试步骤,你须要在整个工作流的开始处添加「获取指定访达项目」,这个步骤就是告诉Automator说:嘿,测试文件在这里,待会用这个文件来帮我压缩看看。最后,点击应用程序右上角的「运行」,图片就会自动压缩了。

5. 删除「获取指定访达项目」步骤并保存:刚才的步骤是测试而已,现在你已经准备好了!把这个步骤删除后,当你将新图像添加到指定文件夹时,这个优化的程序就会自动自动运行了!

现在有了这个工作流,你就可以节省很多不必要的时间去做重复的事情了,你很开心,你的SEO团队也很开心,当你的网页加载速度很快的时候,读者和客户当然都很开心。

当然,Windows 也是有实现的方法,未来再和你介绍吧。