分享价值
提升价值

WordPress网站png,jpg图片改为webp格式图片,压缩图片大小加快网页加载速度

网站优化是网站运营中一个长期的且必不可少的任务,网站优化是包含很多个方面的,这里讲一讲图片优化。文章加上配图会增加文章的可读性,但是往往一个图片的大小就超过了整片文章内容的大小了,图片越多,页面需要加载的时间也就越长,太长加载时间的话就会严重影响网页浏览体验,所以说如何压缩图片大小提高网页加载速度,是网站优化中非常重要的一个环节。

WebP格式是由谷歌开发的一种旨在加快图片加载速度的图片格式,特点是图片占存储空间更小,其图片压缩的体积大约只有JPEG格式的三分之二,并能节省大量的服务器带宽资源和数据空间,也就意味着在质量相同的情况下,WebP格式图像的体积要比JPEG格式图像小40%。我们可以将网站上的图片改为webp格式,这样就可以加快网页加载速度,提高网站浏览体验。下面以WordPress插件EWWW Image Optimizer为例讲述一下操作步骤。

首先在插件中心搜素EWWW Image Optimizer并安装插件。然后启用插件,启用的时候选择免费模式就可以,设置启用转换为webp格式,插件启用后新上传的图片会自动转换图片为webp格式。这时网页上的图片还不是webp格式的,需要手动配置一下服务器规则,Apache服务器的话后台插件里有显示配置规则代码。我是nginx服务器,下面以nginx为例说一下配置步骤。

首先打开网站服务器的nginx配置文件,一般路径为/etc/nginx/nginx.conf,打开nginx.conf文件,在http{ }模块内添加如下代码:

map $http_accept $webp_suffix {
  default "";
  "~*webp" ".webp";
}

注意是在http{ }这个大括号里面添加代码,不要加到http括号外了

然后再打开/etc/nginx/sites-enabled/default文件,在default文件里server { }模块内添加如下代码:

location ~* ^.+\.(png|jpe?g|gif)$ {
  add_header Vary Accept;
  try_files $uri$webp_suffix $uri =404;
}

保存,关闭文件。

然后运行如下命令重启nginx服务:

sudo systemctl restart nginx

这样服务器就配置完了,你再打开EWWW Image Optimizer插件设置WebP Delivery Method选项后面已经出现绿色WEBP图标。

这时你网站上的webp格式图片已经生效。你重新打开一篇文章,打开文章中的图片链接发现还是原来的png或是jpg格式,因为webp格式图片不是这样生效的。你按F12打开调试界面,找到网络,刷新页面,如果下面没有指定图片的话,你就滚动一下鼠标,让图片加载下来,找到这个图片可以看到后面【类型】是webp格式的了。因为你在服务器里已经配置好了规则,所以虽然网页代码里是jpg图片,但是服务器发送给你的实际上是webp图片,这样就节省了带宽提高了页面加载速度。

WordPress网站png,jpg图片改为webp格式图片,压缩图片大小加快网页加载速度
1V1答疑支持
爱发电:点击前往
赞(0) 打赏
文章名称:《WordPress网站png,jpg图片改为webp格式图片,压缩图片大小加快网页加载速度》
文章链接:https://nuowa.net/1176
本站原创文章未经允许不得转载,分享资源仅供个人学习研究,不可用于违法违规用途,否则法律问题自行承担。

觉得文章对你有帮助就打赏一下作者

非常感谢你的打赏,我将有更多的动力继续提供优质内容,让我们一起创建更加美好的世界!

支付宝扫一扫

微信扫一扫