SEO 如何优化图片

在网页中图片通常是比较简单的一部分,对一篇文章来说,配上图片,却能够更生动,形象的传达作者的意图。由于图片对搜索引擎跟用户来讲,重要程度不一致,所以我们会从两方面来讲这件事情:

  1. 针对搜索引擎如何优化图片
  2. 针对用户优化图片
  3. 我如何处理大量的图片处理工作

针对搜索引擎如何优化图片

在之前的文章我们大致提过一些图片优化方式,这里面我们会详细的说一下,如何优化图片。

  1. 通过 alt 属性来表达相关的信息。
  2. 简短但是描述性很强的文件名,避免使用类似于 image1.jpg 1.jpg 不清晰的名称。
  3. 如果用图片做为链接,一定要提供 alt 文本,它会起到处链接的锚文本的作用。
  4. 提供一个图片网站地图的文件。
  5. 在图片的周围提供一个描述,搜索引擎会根据这个分析关键词。

为什么 alt 很重要?

  1. 搜索引擎用会 alt 做为图片的索引。
  2. 如果图片无法显示,用显示 alt,至少能表达一部分意思
  3. 有些设备不支持图片,会显示 alt

针对用户如何优化图片

为不同的设备提供不同的图片大小,比如 pc 端用大图,移动端用小图。针对响应式设计(responsive design)可以提供不同的图片大小。例如:

背影图的自适应代码

/* For width smaller than 400px: */
body {
background-image: url('img_smallflower.jpg');
}
/* For width 400px and larger: */
@media only screen and (min-width: 400px) {
body {
background-image: url('img_flowers.jpg');
}
}

页面图片的自适应代码

<picture>
<source srcset="mdn-logo-wide.png" media="(min-width: 600px)">
<img src="mdn-logo-narrow.png" alt="MDN">
</picture>

我如何处理大量的图片处理工作

我的网站是一个静态网站,图片也是放到了服务器上。大部分图片尺寸都比较大,加载的速度也比较慢,所以规范一下图片尺寸,压缩一下。如果每张图片都处理实在是太花费时间,我就写了两个脚本处理图片。如果有条件的话推荐使用 CND,比如七牛,又拍等等,它们都会提供相关的接口来处理,非常方便。

压缩图片,同时生成宽为 720 的 medium 图片跟 360 的 small 图片,不处理 logo, favicon 跟 cover。

#!/bin/sh
for line in $(find -E ./assets -regex ".*\.(jpg|gif|png|jpeg)" | grep -v logo.png | grep -v favicon.png); do
if
[[ $line =~ .*cover.* ]];then
continue
fi
  if [[ $line != .*medium.* ]];then
filename=$(basename $line)
extension="${filename##*.}"
filename="${filename%.*}"
dir=$(dirname $line)
    convert $line -resize 720 "$dir/$filename-medium.$extension"
convert $line -resize 360 "$dir/$filename-small.$extension"
fi
done

批量替换图片切好的图片,不包括 cover.jpg

#!/bin/sh
FILES=_posts/*
for f in $FILES
do
sed -i "" "/cover.jpg/!s/\/\(.*\).jpg/\/\1\-medium.jpg/g" $f
done

优化之后,看 nginx 的输出日志,图片比之前的加载速度平均提高了30%的速度。 cpu 的消耗应该也是减少的,不过因为我的网站访问量太小,并不明显。

总结

本次的图片优化包含了,搜索引擎索引,用户体验,网站加载速度,如何提升生产力。网站的优化不应该仅仅限制于针对搜索引擎的,最终的结果网页面对的是用户,我们的目的是为用户提供更好的体验,有用的内容。

资料来源

[1] https://www.w3schools.com/html/html_images.asp
[2] https://developer.mozilla.org/en/docs/Web/HTML/Element/picture