“EWWW Image Optimizer” 是一款插件,可以压缩图像并加速显示速度。
在网页中,图像占据了大部分数据大小,所以压缩图像对加速网页有很大的帮助。
请问 EWWW Image Optimizer 的设置方法和基本使用方法是什么?
PageSpeed Insights 测速说我需要缩小图像尺寸,我想为此做点什么!
使用 EWWW Image Optimizer图像优化器,您可以优化所有图像!
包括下一代格式的 WebP 交付也很容易。
EWWW Image Optimizer 是一款 WordPress 插件,
可以帮助优化网站的图像,减小图像的体积以加速网页加载速度。
它可以自动地对上传的图像进行压缩和优化,也可以手动对已有的图像进行优化。
使用这个插件可以节省带宽并提高用户体验。
EWWW Image Optimizer 设置步骤
- Speed up your site【加快您的网站】勾选
- Save storage space【节省存储空间】勾选
- Stick with free mode for now【暂时坚持免费模式】选择
- Remove Metadata【删除照片原始信息,如拍摄日期】勾选
- Lazy Load【延迟加载】勾选
- Resize uploaded images to these dimensions【自动调整上传的图像尺寸】
- Embedded Help【内嵌帮助】勾选
Resize Existing Images【检查调整现有图像的大小】
Resize Other Images【检查调整其他图像的大小】
通过调整设置上限和应用设置,可以使所有图像都调整到合适的尺寸,大大减小图像的容量。
设置完成后,记得点击「保存更改」
Hide Conversion Links【隐藏转换链接】
如果不打勾,图像的扩展名将自动转换。当图像的扩展名转换时,图像会变得粗糙。
设置完成后,记得点击「保存更改」
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{HTTP_ACCEPT} image/webp
RewriteCond %{REQUEST_FILENAME} (.*)\.(jpe?g|png|gif)$
RewriteCond %{REQUEST_FILENAME}\.webp -f
RewriteCond %{QUERY_STRING} !type=original
RewriteRule (.+)\.(jpe?g|png|gif)$ %{REQUEST_URI}.webp [T=image/webp,L]
</IfModule>
<IfModule mod_headers.c>
<FilesMatch "\.(jpe?g|png|gif)$">
Header append Vary Accept
</FilesMatch>
</IfModule>
AddType image/webp .webp
将已上传的图像转换为WebP格式
一次性批量转换,一直没结束怎么办?
批量优化可能需要1小时左右的时间。
请不要关闭浏览器,耐心等待。
确认是否成功转换 WebP
保存类型名称显示:.webp 说明成功了
Type列显示:webp 说明成功了
无法转换 WebP 问题排查
解决方法①:清除浏览器缓存
其中一个原因是浏览器的缓存还存在。
请在使用的浏览器的设置菜单中清除浏览器缓存,然后重新加载EWWW Image Optimizer并重新检查。
解决方法②:停用带有图像延迟加载功能的插件
第二个原因是与其他具有「图像延迟加载」功能的插件相互干扰,无法正常工作。
「图像延迟加载」是提高网站速度的重要功能,但 EWWW Image Optimizer 也可以实现「图像停用延迟加载」,因此建议停用干扰插件并仅使用 EWWW Image Optimizer。
解决方法①:清除「优化历史」
之前使用EWWW Image Optimizer优化过的图像将被跳过而无法转换为WebP。
因此,请删除以前的优化历史记录,然后重新进行批量优化转换。
解决方法②:无需一次性转换,而是个别转换
即使进行批量优化,也有可能会出现压缩了但无法转换成 WebP。
在这种情况下,您需要单独转换为WebP 而不是一次性转换。
打开「媒体」中的「媒体库」,确认上面图片中的「Image Optimizer 图像优化」项目。
点击「Optimize now! 立即优化!」或「Re-optimize 重新优化!」,可以手动单独转换为 WebP。
解决方法①:旧的IE 是不会显示WebP的
第一个原因是使用IE浏览器检查。
由于IE尚未支持WebP,因此请使用其他浏览器检查。
解决方法②:清除浏览器缓存
其次的原因是缓存仍然存在,导致未加载新转换的WebP图像。
清除浏览器缓存,如果使用缓存插件,请在WordPress中清除缓存,然后再次加载页面,应该能看到WebP图像。
解决方法③:在EWWW Image Optimizer设置中选中“Picture WebP Rewriting”。
参照图片,在“Picture WebP Rewriting 重写 ”中选中复选框,保存设置后检查页面,应该能看到WebP显示。
【WebP图像支持的陷阱】Safari Mac版支持与iOS版有所不同
迄今为止,Webp的主要缺点是支持的浏览器很少。
然而,截至2020年9月,支持Webp的浏览器包括:
Chrome
Firefox
Edge
Safari
除IE之外的主要浏览器。
因此,Webp的缺点已经得到了缓解。
尽管2020年9月推出的Safari 14已经支持Webp,
但是Mac版(电脑版)的Safari还不支持。
然而, macOS 11 Big Sur的Safari终于支持了Webp。
Big Sur是苹果公司在2020年11月发布的最新的macOS。
从macOS Big Sur开始支持Webp,之前在Safari中无法显示的Webp图像现在可以在Big Sur的Safari中显示。
由于使用Big Sur的人数较少,即使支持,在2021年仍然会有很多图像格式(如JPG、PNG)将会被显示。
请不要忘记,Safari支持Webp并不意味着所有东西都被支持了! 然而,这是一个逐渐普及的未来。
想要再压缩,让网页浏览速度更快的方法
总结
因此,这次是EWWW Image Optimizer的设置方法和如何使用WebP图像。
在不久的将来,可能不需要这样的设置,而是直接以WebP格式上传。
在此之前,使用EWWW Image Optimizer并按照这种设置方法应该可以解决问题。
尽管如此,最上面的风景图片,
上传的压缩图片(JPEG)为436KB,而WebP图像仅为68KB左右。
WebP真是不可小觑。