所有分类
  • 所有分类
  • WP插件Pro
  • HTML模板
  • 微信小程序模板
  • 源码

上传 WordPress 图片前,需要知道的 7 个优化流程(提升网站速度)

这是一篇「WordPress图片压缩+优化流程 」教程,我们将分为 7 个步骤,教大家如何正确上传图片至 WordPress 网站,大幅 提升网站速度。

相信站长们在搭建网站时,都会在网站中使用到图片。

不过将图片上传至网站前,如果没有先进行编辑、压缩,可能会占用到主机空间,导致网页加载速度变慢。

这篇文章,会教大家使用免费图库,找到可商业使用的图片,并使用Photoshop工具,裁切图片大小&选择图片储存质量, 最后使用TinyPNG工具,压缩图片文档。

只要跟着步骤,就可顺利优化图片,大幅提升网站速度啦~

备注:如果你想要在优化图片完之后,再多一道防线帮助你自动压缩图片,可参考 Smush 插件教程 唷!

那麽就开始教程吧:)

  • 为什么需进行图片优化?
  • 1. 前往CC0图库,寻找图片
  • 2. 使用 Photoshop,裁切图片
  • 3. 调整图像尺寸
  • 4. 选择储存质量
  • 5. 使用 TinyPNG 压缩图片
  • 6. 确认图片体积(文档大小)
  • 7. 上传图片(WordPress 示例)
  • 常见问题
  • WordPress 学习资源

为什么需进行图片优化?

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

这是因为有些图片,很常比 HTML、JavaScript 或是 CSS 等 .. 网站程序码,体积还要更大些。 根据 HTTP Archive 研究,图片平均占网页文档总重量的 21%

图片平均占网页文档总重量的 21%(来源:Kinsta)

所以只要能在上传图片至网站前,将图片先进行优化,就能有效减少网页加载时间,提升网站速度,这也是SEO策略,重要的一环。 更多SEO是什么。

优化图片并不是要站长完全舍弃图片质量,而是在最小的文档容量,和站长可接受的图片质量之间,找到平衡,进而提升 WordPress SEO 分数。


1. 前往CC0图库,寻找图片

CC0 授权是什么? 可免费商用吗?
确认图片CC0授权,以及是否可商用,非常重要

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

跟全球,都有通用的创用CC常规授权条款,目前使用上最无争议的,就是可商用免标记的CC0授权(免费用在商业用途,免标记作者名称),所以站长们在搜索素材时,可多往这方向寻找。

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

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

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

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

WordPress图片压缩:选择适合的图片尺寸,再下载图片
WordPress图片压缩:选择适合的图片尺寸,再下载图片

别忘记再次确认CC0标记唷! 使用 Pexels 的话,往下滑就可以看见图片的详细信息。

WordPress图片压缩:可再进一步确认图片的信息&创用 CC 规则
WordPress图片压缩:可再进一步确认图片的信息&创用 CC 规则

其他的图库,也会有各自的图片信息可检视,站长们可再自行查询看看唷!


2. 使用 Photoshop,裁切图片

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

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

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

WordPress图片压缩:进入 Photoshop,点击裁切工具,调整比例,移动想保留的区块
WordPress图片压缩:进入 Photoshop,点击裁切工具,调整比例,移动想保留的区块

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


3. 调整图像尺寸

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

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

在上方列表,找到“ 图像 ”,点击“ 图像尺寸 ”,进行长宽的调整。

找到图像,点击图像尺寸,进行长宽的调整

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

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

在这里输入 800 x 600 后,点击“ 确定 ”保存调整后的图像大小。

WordPress图片压缩:锁住比例,输入欲变更的图像尺寸数值
锁住比例,输入欲变更的图像尺寸数值

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


4. 选择储存质量

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

点击上方列表,选择“ 文档 ”,点击“ 另存新文件 ”,输入文档名称,点击“ 保存 ”,进行下一步。

WordPress图片压缩:储存影像
WordPress图片压缩:储存影像

小备注:影像格式建议使用 PNG、JPG,这两个格式,不论在哪里使用图片,都有很好的兼容性,也更好被读取。

接着,就可以调整要储存的影像质量啰。

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

如果站长希望图片呈现效果更精致,可以调整数值,但这样也会让文档跟着变大,如下图所示。

WordPress图片压缩:提升图片质量,文档大小也会跟着提升
WordPress图片压缩:提升图片质量,文档大小也会跟着提升

调整好想输出的质量,点击“ 确定 ”,即可保存文档。

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


5. 使用 TinyPNG 压缩图片

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

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

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

将图片拖曳进指定区域,然后点击 Download 下载自动压缩后的图片

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


6. 确认图片体积(文档大小)

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

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

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

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

最后,站长在上传图片至网站时,也可以检查看看图片的文档容量,确定上传的是正确版本!


7. 上传图片(WordPress 示例)

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

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

这边我们是使用 Elementor 进行设计。

前往编辑页面,点击想更改的图片区块,点击“ 选中图片 ” 。

WordPress图片压缩:使用 Elementor 上传图片
WordPress图片压缩:使用 Elementor 上传图片

即可顺利打开媒体库,将压缩好的图片丢上去。

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

WordPress图片压缩:选取该图片,新增替代文本等 .. 图片描述文字
WordPress图片压缩:选取该图片,新增替代文本等 .. 图片描述文字

如果不是使用 Elementor,可以前往 WordPress 媒体库,选择「 新增媒体 」,将图片上传。

WordPress图片压缩:前往 WordPress 媒体库,上传图片
WordPress图片压缩:前往 WordPress 媒体库,上传图片

这样就可以在编辑文章、编辑页面时,使用刚上传的图片啦。

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

如果你是使用 WordPress 搭建网站,想要在优化图片完之后,再多一道防线帮助你自动压缩图片,可参考Smush 插件。


常见问题

为什么在上传图片到网站前,要先优化图片?

这是因为图片通常比 HTML、JavaScript 或是 CSS 等 .. 文档还大。 根据 HTTP Archive 研究,图片平均占网页文档总重量的 21%

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

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

如果想知道优化图片的流程,可以查看本文唷:)

除了优化图片外,还可以如何提升网站SEO分数?

在进行网站SEO优化之前,可先了解SEO是什么。

写作文章,或是设计网页时,可参考:标题 SEO 教程、WordPress Blog 文章 SEO 教程,来进行单一页面 SEO 优化。

接着,以 WordPress 软件做范例,可参考 WordPress SEO 全面指南,对 WordPress 网站进行更全面的 SEO 优化。

除此之外,还可以使用 WordPress SEO 插件,来帮助我们进行关键词排名!

可以用什么工具编辑图片?

基本上,站长可依自身喜好&习惯,选择图片编辑工具。

除了本文使用的 Photoshop 外,也可以使用 Adobe 其他的产品,像是 Illustrator 等 .. 。

或者如果想进行在线编辑,Canva 也是一个不错的选择

原文链接:https://www.itaoda.cn/blog/12391.html,转载请注明出处。

0
使用和安装有任何问题
请加客服QQ:1442071397 或wechat:pufei889


免责声明

本站所发布的部分内容自网络,该部分内容限用于学习和研究目,有版权问题的,下载后的24个小时之内,从您的电脑中彻底删除。且不得将用于商业或者非法用途,否则,一切后果请用户自负,与本站无关。

评论0

请先
没有账号?注册  忘记密码?

社交账号快速登录

温性提示

演示站服务器在国外,网站打开速度有点慢,请耐心等待

多功能、多行业外贸商城 wordpress商城WOOCOMMERCE

23+
行业模板