WordPress上传图片前,需要知道的7个优化流程


为什么需进行图片优化?

在加载网页时,通常载入图片是最消耗主机资源的。

这是因为有些图片,比大部分HTML、JavaScript 或CSS 等其他静态文件,体积要更大些。根据HTTP Archive研究,图片平均占网页总大小的21%

所以只要能在上传图片至网站前,将图片先进行优化,就能有效减少网页加载时间,提升网站速度,这也会帮助站长提升WordPress SEO 分数。

优化图片并不是要站长完全舍弃图片品质,而是在最小的图片压缩质量和可接受的图片品质之间,找到平衡

以下的优化流程,同时也是 我 在上传图片前,会先进行的动作,这边分享给站长们

1. 前往在线图库,寻找图片

现今网络上有许多图片素材库可使用。

但放在网站上的图片,必须保证没有版权疑虑,否则因为一张图片引发争议,是很得不偿失的。最坏的情况,可能还会吃上官司。

如果不知道哪边可以找到合法版权的图片,帮大家整理好3个好用的免费图库,有需要的站长,可前往查找图片:

  • Pexels摄影照分享图库,于2014 年成立,目前拥有免授权图片已超过320 万张。
  • Unsplash免费的相片共享网站。摄影师可自由上传相片到Unsplash,授权给Unsplash作为免版权图片使用。
  • Pixabay是一个照片、插图、像素图、电影片段和音乐分享网站,需注意不是所有都是免费授权。

我们以Pexels为范例,前往Pexels 图库寻找喜欢的图片,选择适合的尺寸,点击下载。

通常网站上使用的图片不会太大,建议使用长宽不超过2000 像素左右的图片,就足以呈现图片的视觉效果,也更方便站长裁切&编辑图片。

所以这边我们选择下载「 中型尺寸」的图片。

别忘记再次确认版权 使用Pexels的话,往下滑就可以看见图片的详细资讯。

其他的图库,也会有各自的图片资料,站长们可再自行查阅。

2. 使用Photoshop,裁切图片

下载好图片,就可以进行下一步,将图片裁切成适合大小,这样放在网站上才不会跑版。

关于要切成多大的大小,和使用哪款裁切图片工具,站长依照自身需求&习惯选择就可以了。

以下示范使用Photoshop,选择左侧列的「 裁切」工具,将图片裁切成800 x 600 像素,也就是4:3 的图片比例(上方列可直接调整比例,或直接输入实际尺寸大小也行)。

移动白色框,框住想保留的图片区域,点击「 Enter 」或打勾图示,就可以顺利裁切。


3. 调整影像尺寸

裁切成适应网页设计的比例后,我们可以进一步缩小图像的尺寸,并维持长宽比。

缩小图片的原因,是因为有时网页上是不需要太大尺寸的图片,也能够呈现好的视觉效果的,所以可以进一步缩小图片。

在上方列表,找到「 图像」,点击「 图像大小」,进行长宽的调整。

跳出影像调整的弹跳视窗,这边先点击「锁链」图示,可维持原本的长宽比,站长就不用担心调整图片时,比例跑掉的问题啦(如下图)。

同样若是有个别调整影像比例的需求,就将「 锁链」打开就OK 啰!

这边输入800 x 600 后,点击「 确定」保存调整后的影像大小。

这样我们就完成影像尺寸的调整

4. 选择储存品质

确认完成图片编辑后,我们就可以进行保存。

点击上方列表,选择「 档案」,点击「 另存新档」,输入档案名称,点击「 储存」,进行下一步。

小备注:影像格式建议使用PNG、 JPG,这两个格式,不论在哪里使用图片,都有很好的相容性,也更好被读取。图片需要背景透明就用PNG,否则就JPG.因为JPG是有损压缩,质量相对小。

接着,就可以调整要储存的影像品质

这边若没有特殊需求,维持原预设的8 是最好的,可以适度压缩,又不会让画质失真。

如果站长希望图片呈现效果更精致,可以调整数值,但这样也会让图片质量变得更大。

调整好想输出的品质,点击「 确定」,即可储存图片。

这样图片体积又缩小了一些了!

5. 使用TinyPNG压缩图片

调整好图片后,我们可以使用线上压图工具,进一步减少图片体积,这样会更节省网站资源空间。

这边要推荐大家使用一款好用的工具TinyPNG,它的压缩相当有感,图片也能保有优质的品质,也不用额外安装插件,这边推荐给站长们来做使用~

进入TinyPNG,将图片拖曳进「 箭头1 」指向的区域,接着图片便会自动开始压缩,然后点击「 Download 」下载压缩后的图片。

上图也能看见压缩过后的档案大小差别,是不是帮助站长压缩了很多档案容量呢


6. 确认图片体积

以上的图片编辑和压缩结束之后,相信站长们可能不会分别检查档案容量,所以对于节省多少空间,可能比较无感一些。

我们整理了三个不同时期的图片大小,让站长检视压缩图片后的成效,结果得出一个惊人的结论。

从「 原本图片」603 KB,经过Photoshop 编辑& TinyPNG 压缩,竟变为56 KB,整整差了10 倍之多!

积少成多,每张图片的档案都是最佳大小时,自然就能帮主机节省许多空间。另外,网页的读取总体积缩小,自然就能提升网站速度,从而帮助站长 提升WordPress SEO 分数。

最后,站长在上传图片至网站时,也可以检查看看图片的大小,确定上传的是正确版本。

7. 上传图片

图片编辑完成,最后就可以将图片上传到WordPress 网站啦!

小提醒:别忘记在上传前,将图片文件名更改成「英文名称」,这是为了避免在资料传输过程中,系统无法将中文字顺利转码,导致图片死掉的问题

前往编辑页面,点击想变更的图片区块,点击「选取图片」。 即可顺利打开媒体库,将压缩好的图片丢上去。

丢上去后,我们可以选取该图片,并新增替代文本等.. 图片描述文字,这可以有效帮助我们优化SEO 分数。

好啰,以上就是「 WordPress图片压缩」的相关教学,就算不是使用WordPress 软体,这个方法也都是通用的,希望对大家有帮助

AD: 稳定便宜的云服务器推荐

评论
还没有评论
    发表评论 说点什么