AI软件下载
有趣网站推荐及实用软件下载

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图片,这样就节省了带宽提高了页面加载速度。

可灵AI限时福利速度领取>>


软件催更及1对1人工答疑支持: https://nuowa.net/1806
赞(0) 打赏
软件无法使用?点击查看常见问题说明>>

最近更新

支付宝发现金红包了!支付宝的羊毛快来薅💰️💰️-诺瓦小站

支付宝发现金红包了!支付宝的羊毛快来薅💰️💰️

支付宝小荷包搞活动啦,新用户加入立得2元无门槛现金红包。 支付宝小荷包是支付宝推出的一款便捷的零钱管理工具,适合日常小额支付和理财。 什么是支付宝小荷包? 支付宝小荷包,简单来说,就像是你在支付宝里的“私人金库”。它不仅支持快速转账、收款,...

美团官方发福利,吃喝玩乐外卖神券天天领-诺瓦小站

美团官方发福利,吃喝玩乐外卖神券天天领

美团官方发福利了,加美团企业微信,每天免费领各种吃喝玩乐神券,领取福利流程如下: 1、微信扫码登录↓↓↓ 2、长按添加美团企业微信 3、天天领券 每日签到领取更多红包 更有超多促销活动,限时活动,低价爆品等,让你放肆嗨吃嗨喝!

可灵AI会员专属优惠邀请码,限时福利领取-诺瓦小站

可灵AI会员专属优惠邀请码,限时福利领取

可灵AI发福利了,通过专属优惠邀请码 6BZPEJK83JZ9 可额外获得50%灵感值。 现在图片、音乐、视频等等,啥都可以用AI生成,可灵AI就是快手旗下非常强大的一个AI内容创作平台,功能多样,效果强大。我最近半年几乎每周都会使用多次,...

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

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

支付宝扫一扫

微信扫一扫