插件介绍
Optimole作为后起之秀,知道的人还不是很多,目前只有10万+安装量。经过一段时间使用后发现Optimole真香,是老默目前为止使用过最好的图片优化插件!
它还带有CDN功能可以把图片、CSS、JS放到亚马逊CDN加速,用了这个插件甚至可以不使用其它CDN服务!还有云端存储图片功能,如果你的图片特别多服务器硬盘容量不够就可以把图片全部移到云端(媒体库不存放图片)。
Optimole功能优点
延迟加载背景图片,可以排除延迟加载选定图片;
移动端自动调整图片尺寸提升加载速度;
把图片转换成WebP/AVIF格式;
免费!不限制图片压缩/转换次数!
根据访问者屏幕尺寸自动调整图片尺寸;
检测到较慢的网络时自动降低图像质量;
使用亚马逊CloudFront CDN;
支持Retina,智能裁剪;
没有 jQuery 的图片延迟加载(更好);
图片水印功能;
这么多超前、强大的功能+免费+不限制压缩/转换次数 + CloudFront CDN(全球450多个节点,速度不比Cloudfalre慢)+ SVG、GIF压缩 + 图片排除功能。我就问一句:还有谁!!!
特别值得说明的是Optimole支持移动端自动调整图片大小,这是其它图片优化插件没有的。电脑端banner图一般尺寸是1920px,体积通常100kb以上,而移动端通常显示尺寸不超过500px,体积50kb以内。
移动端能自动根据屏幕尺寸调整图片大小的话,单是banner图的体积至少能降低60kb这样,一整个页面体积至少能降低120kb以上。这对提升手机端速度非常有帮助,也能提高谷歌测速手机端分数!
天底下没有这么好的免费午餐,免费账户只对网站每个月前5,000个访问者(按ip/浏览设备算,重复访客只计算一次)有加速效果,第5,001个访客开始会显示未压缩的原始格式图片(相当于这个插件被禁用),下个月恢复额度,另外在网站页脚推广该插件还可以每月多送20000访问额度,对于小网站博客来说足够了。
另外CloudFront CDN在中国有这些节点:上海 (1);深圳 (1);中卫 (1);北京 (1);香港 (4)。
使用过程发现这5千额度很耐用,不会计算已知爬虫/机器人浏览次数,重复访问不计算次数,绝大多数B2B外贸独立站和小型博客不会超额。
Optimole设置教程
进入设置界面:
输入邮箱↓,点击“Creat & conect your account”即可。它会发送一封邮件给你激活邮箱,其实不用管也行,插件照常使用。
进入“设置”>“通用”版块。
注意:同样功能只能在一个插件/主题里启用,如果在Optimole启用了延迟加载等功能,就不要在其它插件启用!
启用图片替换:打开,启用后才会压缩转WebP等。
缩放图片和延迟加载:打开,可以延迟加载图片以及在小尺寸屏幕(手机+平板端)会根据屏幕显示相应尺寸图片,大大减小图片体积、提升页面加载速度。
Enable error diagnosis tool:关闭。提供故障排除机制,可帮助使用Optimole识别站点可能存在的问题。启用会增加服务器负担,如果网站出问题再打开这个选项查看原因。
Enable Optimole badge:打开后会在前端页面右下角显示下图图标,为Optimole做广告。作为回报免费套餐的访问额度会从5千增加到2万5,非常香!
请根据个人情况选择是否打开。从营销角度来说等用户数达到一定数量,官方应该会取消该活动,迫使一部分用户购买套餐,既能引流又能增加销售额。
接下来点击进入“高级”>“压缩”设置版块↓,看清楚功能解释,按需开启。
Enable network based optimizations:打开,检测到较慢的网络时自动降低图像质量,缩短加载时间。
通过Optimole服务CSS和JS:关闭,使用Cloudflare之类CDN比较好。毕竟超过5000访客Optimole会失效,CSS和JS CDN加速就芭比Q了,而且它不支持HTML、字体加速。
开启Gif到视频的转换:打开,视频体积至少比Gif小1/3,而且视频可以延迟加载缩短加载时间。如果gif是类似于表情包那种尺寸小,时间又短(体积小)的,本身体积小,不要建议转成视频,关闭此功能。
Enable avif conversion:打开,大大减小图片体积,清晰度基本不变。
Enable Auto Quality powered by ML(Machine Learning):建议打开,会根据每张图片的情况调整压缩等级。这是个趋势,不同相片需要不同的压缩等级才能显示最好效果,统一压缩等级反而对某些相片不好。
如果不打开的话可以手动选择所有图片统一压缩等级,一般选中档最合适。如果是摄影类网站需要图片显示超级清晰,选高档。
提示:经测试有些网站启用“Enable Auto Quality powered by ML”后某些图片压缩太厉害变模糊,遇到这种情况请关闭这个模式,改用手动选择压缩等级,选高档。如果还是不行就排除该图片被压缩。
进入“调整大小”版块↓,按图设置。
启用智能裁剪:打开,这个功能会在图片超出显示框后自动调整以显示图像主体部分,而不是固定显示图片上部分。此功能用到的地方不多,而且可能和其它插件的图片功能(例如延迟加载,自动缩放等)冲突。
启用视网膜图像:打开后如果访客使用Retina高清视网膜设备,会向访客提供视网膜清晰度图像。Retina要求图片尺寸比实际显示出来的尺寸大2倍,如果你的图片是按照显示出来的尺寸制作的,关闭这个功能。
如果你的图片尺寸比实际显示出来尺寸大2倍以上(例如显示出来600*600,图片尺寸至少要1200*1200),又想在高清设备显示清晰图片,打开这个功能。注意:启用这个功能会增加图片体积减从而慢网站速度。
Limit Image Dimensions with max width/height:打开,为Optimole提供的图像设置自定义最大宽度或高度。启用此设置后,视网膜图像选项将被禁用,以确保图像之间的一致性。
Resize large images original source:设置可以上传到媒体库的最大相片尺寸,超过尺寸会自动裁剪。建议设置为设置为1920 x 1200,绝大多数网站页面的最大尺寸是1920px,不会超过这个尺寸。
可以利用这个功能自动裁剪图片,如果你有很多不同尺寸的正方形产品图片,想统一上传800*800px的尺寸。可以在这里设置成800*800px,上传的图片就会自动裁剪。上传完后再设置成1920*1200px。打开这个功能可以极大减少大尺寸相片体积。
“延迟加载”版块设置↓。
启用通用的延迟加载占位符:打开后被延迟加载的图片一开始会显示模糊版本,从而提升页面加载速度,可能会降低一点客户体验。建议打开后测试下显示效果,不满意再关闭这个功能。
Exclude the first X images from lazyload:打开,从延迟加载中排除每个页面前 X 个图像,根据页面首屏图片内容设置,一般设置为3或4。
使用本机延迟加载:使用浏览器的延迟下载功能,如果启用会禁用智能裁剪功能,建议关闭。
缩放图像:在延迟加载时缩放图像。
为背景图像启用延迟加载:打开。默认情况下,延迟加载不适用于背景图像。启用后通过添加图片CSS可以实现背景图片延迟加载。
Enable lazyload for embedded videos and iframes:打开,为嵌入式视频和 iframe启用延迟加载。
启用 noscript 标记:打开。默认情况下,此选项对于新用户将关闭,而对于已连接的用户将打开。这将帮助无法处理基于 Optimole 的功能的浏览器加载后备图像。
选择器的延迟加载背景图像:输入需要延迟加载的背景图片的ID或者Class。
“排除”版块设置↓。
如果有些相片压缩后你觉得变模糊了,在这里输入相片名字可以排除掉,不压缩。只要输入图片名字中包含的部分文字/英文单词就可以,也可以输入完整图片名字。还可以排除具体某个页面的所有相片或者某种后缀(png, svg)的图片被压缩。
注意:被排除压缩的相片也会取消延迟加载等。
Enable cloud library browsing:不建议启用。启用无需登录网站后台媒体库。可以直接在线上访问存放在云端的媒体里面的相片。这个功能对绝大多数人来说没用。
Cloud Integration:不建议启用。启用后媒体库里面的所有相片会被移动到Optimole云端,并且从网站媒体库里删除。这个功能可以利用Optimole云端存放相片从而减轻服务器负担以及释放硬盘容量。
除非是有非常多的图片并且购买Optimole会员套餐,不然不建议使用这个功能。把图片存放在自己服务器才最安全、有保障。这个对提升速度没帮助,只是管理相片。容易操作失误出错,还是别开启。
到此插件设置完毕,之前以及之后上传的相片会自动压缩处理,无需其它操作。 如果还有不懂可以查看官方设置教程,查漏补缺。
如果安装了Wp Rocket,可能会提醒禁用掉Wp Rocket的图片延迟加载避免冲突。如果你在Optimole没有开启延迟加载图片,就不需要管这个提示。使用Wp Rocket清除缓存后提示应该会消失。
如果在其它插件启用了跟Optimole相同的功能,请关掉,不然会有冲突。设置好后可能网站一开始图片显示错误,那是因为图片还在压缩转化格式中。大概等20分钟后刷新页面图片正常显示,如果图片特别多等待的时间会更长。
现在用谷歌浏览器打开页面,按F12进入开发者工具可以看到图片的网址已经替换成Optimole.com网址,代表图片压缩和CDN加速已经生效。现在可以使用GTmetrix之类测试工具查看页面体积和加载速度的变化。
暂无评论内容