分享笔记:

如何正确调整网站图片分辨率

和转换网站WebP图片牵着手的优化方式

图片的分辨率不光光在平面设计或者摄影上有很重要的位子,在我们的网站上也非常重要,它常常会在我们在上传图片到网站前的图片编辑环节就被一起处理了。

什么是图片分辨率?

图片分辨率是指图像在水平和垂直方向上的像素密度。它通常以像素为单位表示,并决定了图像的清晰度和质量。在WordPress中,图片分辨率是一个关键因素,直接影响着网站的加载速度和用户体验

过大的图片在网站上观看没有什么问题,就是过大的分辨率也意味着图片的文件大小是偏大的,这会影响到我们网站的速度。

过小的图片在网站上会糊,影响用户的观看效果。

网站图片分辨率设置

我们要做的其实在之前的怎么转换webp图片到网站上的教程里就多多少少看到了。如果你有Photoshop可以直接在上面操作,没有的话,可以去找一些线上编辑图片的网站或者用WordPress的一些插件。

怎么调整网站图片的分辨率?

我通常网站最大图片都是Full HD,也就是说 1920 x 1080,当然这个最大指数是根据具体情况的,不过通常都是这个。

这里还要提一下WordPress本身自带的媒体设置:

  1. 缩略图大小:150 x 150
  2. 中等大小:300 x 300
  3. 大尺寸:1024 x 1024

你要上传到WordPress的任何图片,它都会自动生成以上三种尺寸。我个人觉得是比较小的,所以我都会根据网站手动调一下。

网站图片分辨率设置
本站媒体设置

我通常会把缩略图调整到 300 x 300,默认得太小了,其他两个就根据你们自己的情况调整。大尺寸我是直接写0了,因为这网站不会用到大尺寸图片,所以就直接不生成了。

文件上传默认是勾上的,不过我这里是去掉了。图片少的话还好,图片多它会根据你上传的日期生成不同月份的文件夹,过多后会影响到一点速度。

网站图片分辨率设置
开启文件上传图片
网站图片分辨率设置
关闭文件上传图片

还需要强调的就是要根据图片放的位子调整大小

一个缩略图在网站上可能是以 500 x 500 的分辨率出现,那边你上传一个800 x 800 的完全没必要,就算最后裁剪的是 500 x 500 可还是有 300 x 300 的。所以如果你只需要 500 x 500 的那么就上传 500 x 500,要 1920 x 1080 就上传 1920 x 1080

Photoshop调整分辨率

我们可以直接快捷键 Alt + Ctrl + Shift + S 打开导出web图片,右下角我们就可以调整分辨率。你直接用图片大小 Alt + Ctrl + I 调整也是可以的。后面就是转换网站图片最佳格式的操作了。

转换WebP格式图片

通过图片插件调整分辨率

通过插件当我们上传的图片分辨率超过了设置的指后会自动转换,也就说,我设置最大尺寸是2000,我上传一个5000的图片,网站会自动把5000的转换成2000的。这个再配合转换webp图片绝佳。

Imagify

Imagify除了是款很好转换WebP图片的插件以外,可容许我们设置上传图片的最大尺寸。

imagify调整图片分辨率

Resize Image After Upload

都是异曲同工,设置一下大小就可以了。

imagify调整图片分辨率

为笔记评分

平均评分 5 / 5. 摘星者: 1

有疑问?留个言吧!

文章目录

更多结果...

Generic selectors
Exact matches only
Search in title
Search in content
Post Type Selectors