EWWW Image Optimizer 图文设置教程【2024年最新】优化网站图片提高加载速度

“EWWW Image Optimizer” 是一款插件,可以压缩图像并加速显示速度。

在网页中,图像占据了大部分数据大小,所以压缩图像对加速网页有很大的帮助。

请问 EWWW Image Optimizer 的设置方法和基本使用方法是什么?

PageSpeed Insights 测速说我需要缩小图像尺寸,我想为此做点什么!

使用 EWWW Image Optimizer图像优化器,您可以优化所有图像!

包括下一代格式的 WebP 交付也很容易。

什么是 EWWW Image Optimizer

EWWW Image Optimizer 是一款 WordPress 插件,

可以帮助优化网站的图像,减小图像的体积以加速网页加载速度。

它可以自动地对上传的图像进行压缩和优化,也可以手动对已有的图像进行优化。

使用这个插件可以节省带宽并提高用户体验。

比方说下图,您可以在保持一定画质的同时,大大缩减图像的文件大小:
如果你用的是 Chrome 浏览器,会自动以 Webp 格式展示

WebP是一种由Google开发的图像格式,

旨在提供与JPEG和PNG格式相似的图像质量,但是更小的文件大小。

这是通过采用不同于JPEG和PNG的压缩算法来实现的。

WebP 支持透明度,并且可以在动画和静态图像中使用。

由于其较小的文件大小,WebP 在网页加载速度上有明显的优势。

EWWW Image Optimizer 设置步骤

安装插件 EWWW Image Optimizer

在wordpress插件→安装插件→搜索:EWWW Image Optimizer
进入初始设置向导
  1. Speed up your site【加快您的网站】勾选
  2. Save storage space【节省存储空间】勾选
  3. Stick with free mode for now【暂时坚持免费模式】选择
  1. Remove Metadata【删除照片原始信息,如拍摄日期】勾选
  2. Lazy Load【延迟加载】勾选
  3. Resize uploaded images to these dimensions【自动调整上传的图像尺寸】
  4. Embedded Help【内嵌帮助】勾选
❷ Lazy Load【延迟加载】

请注意:如果你还安装了其他缓存插件,
如:Autoptimize、WP Super Cache、WP Fastest Cache等,
如果✅勾选,可能会出现缓存冲突导致图片无法正常加载。

❸根据自身情况

例:「1000」Max Width 「0」Max Height
*限制图像的“宽度”为“ 1000 ”,将“高度”的上限设置为“ 0 ”。
*如果你上传“ 2000 像素图片”,它会自动“缩小到 1000 像素”。

完成

转换 WebP 设置操作

点击 Enable Ludicrous Mode 进入更多选项设置框
调整大小设置【Resize】
勾选 Resize 选项卡上的两个设置项

Resize Existing Images【检查调整现有图像的大小】
Resize Other Images【检查调整其他图像的大小】

通过调整设置上限和应用设置,可以使所有图像都调整到合适的尺寸,大大减小图像的容量。
设置完成后,记得点击「保存更改」

转换设置【Convert
勾选 Convert 选项卡上的设置项

Hide Conversion Links【隐藏转换链接】

如果不打勾,图像的扩展名将自动转换。当图像的扩展名转换时,图像会变得粗糙。
设置完成后,记得点击「保存更改」

WebP设置【Basic】
WebP Conversion【WebP 转换】

WebP是最适合提高页面显示速度的图像格式。

但是,仅仅勾选【WebP转换】并不能将图像转换为WebP格式,

需要进一步设置。

【重点】配置 .htaccess 文件
<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
.htaccess 文件在哪?

不同服务器.htaccess 文件的位置都会不一样。

.htaccess 文件通常位于网站根目录下(也就是与index.html或index.php等文件同一目录下),如果没有可以手动创建.htaccess文件。
有些服务器默认情况下并不会显示隐藏文件,需要在FTP或网页管理界面中设置显示隐藏文件才能看到.htaccess文件

【补充项】Cloudflare 用户
EWWW Image Optimizer 插件 针对使用 Cloudflare 用户并不友好

Cloudflare 的用户在设置 WebP 转换的时候,可能会出现以上界面,甚至连复制的 .htaccess 代码也不会显示(需要多刷新几遍或是切换语言),最后的WEBP输出效果并不理解。
如果你不怕麻烦,之后手动调整展示Webp 图片格式倒是可以。

并不建议 EWWW Image Optimizer 和 Cloudflare 同时使用。

设置完成

将已上传的图像转换为WebP格式

媒体→Bulk Optimize

一次性批量转换,一直没结束怎么办?

批量优化可能需要1小时左右的时间。
请不要关闭浏览器,耐心等待。

确认是否成功转换 WebP

检查保存的图片

找到图片点击鼠标右键 图片另存为

保存类型名称显示:.webp 说明成功了

使用开发者工具

浏览器页面启动开发者工具

Type列显示:webp 说明成功了

无法转换 WebP 问题排查

设置选项红色【PNG】未能变成绿色【WEBP】的情况

这是关于在「.htaccess」中粘贴代码但设置未生效的解决办法

解决方法①:清除浏览器缓存

其中一个原因是浏览器的缓存还存在。
请在使用的浏览器的设置菜单中清除浏览器缓存,然后重新加载EWWW Image Optimizer并重新检查。

解决方法②:停用带有图像延迟加载功能的插件

第二个原因是与其他具有「图像延迟加载」功能的插件相互干扰,无法正常工作。

「图像延迟加载」是提高网站速度的重要功能,但 EWWW Image Optimizer 也可以实现「图像停用延迟加载」,因此建议停用干扰插件并仅使用 EWWW Image Optimizer。

图片未能转换成Webp格式的情况

在进行优化处理后无法转换为WebP的解决办法

解决方法①:清除「优化历史」

之前使用EWWW Image Optimizer优化过的图像将被跳过而无法转换为WebP。

因此,请删除以前的优化历史记录,然后重新进行批量优化转换。

解决方法②:无需一次性转换,而是个别转换

即使进行批量优化,也有可能会出现压缩了但无法转换成 WebP。

在这种情况下,您需要单独转换为WebP 而不是一次性转换。

打开「媒体」中的「媒体库」,确认上面图片中的「Image Optimizer 图像优化」项目。
点击「Optimize now! 立即优化!」「Re-optimize 重新优化!」,可以手动单独转换为 WebP。

页面上的图片显示的不是Webp格式的情况

当您检查网站时,如果不能显示WebP图像的解决办法

解决方法①:旧的IE 是不会显示WebP的

第一个原因是使用IE浏览器检查。

由于IE尚未支持WebP,因此请使用其他浏览器检查。

解决方法②:清除浏览器缓存

其次的原因是缓存仍然存在,导致未加载新转换的WebP图像。

清除浏览器缓存,如果使用缓存插件,请在WordPress中清除缓存,然后再次加载页面,应该能看到WebP图像。

浏览器怎么强制刷新

在Windows系统中,使用F5键刷新浏览器,使用Ctrl + F5键进行强制刷新。


而在苹果系统macOS中,默认的浏览器Safari普通刷新使用Command + R,强制刷新使用Command + Option + R


对比下苹果系统下的Chrome浏览器,普通刷新使用Command + R,强制刷新使用Command + Shift + R

解决方法③:在EWWW Image Optimizer设置中选中“Picture WebP Rewriting”。

参照图片,在“Picture WebP Rewriting 重写 ”中选中复选框,保存设置后检查页面,应该能看到WebP显示。

【WebP图像支持的陷阱】Safari Mac版支持与iOS版有所不同

Google开发的图像格式Webp,对于是否采用,还有很多人在犹豫。

迄今为止,Webp的主要缺点是支持的浏览器很少。

然而,截至2020年9月,支持Webp的浏览器包括:
Chrome
Firefox
Edge
Safari
除IE之外的主要浏览器。
因此,Webp的缺点已经得到了缓解。

注意

iOS版Safari:支持Webp
Mac版Safari:不支持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 插件不建议与 TinyPNG 插件 同时使用

它们两个都有相同功能,如果你是新手不建议同时使用,比如你同时上传图片的时候,两款插件无法区分应该由谁处理。

总结

因此,这次是EWWW Image Optimizer的设置方法和如何使用WebP图像。

在不久的将来,可能不需要这样的设置,而是直接以WebP格式上传。

在此之前,使用EWWW Image Optimizer并按照这种设置方法应该可以解决问题。

尽管如此,最上面的风景图片,

上传的压缩图片(JPEG)为436KB,而WebP图像仅为68KB左右。

WebP真是不可小觑。