如何实现ordress网站使用eb格式图片

提升WordPress网站的加载速度的其中一种办法——减少图片体积大小。平均而言,图片约占网页文件大小的一半,因此即使是很小的改进也可以取得很大的效果。

WebP是一种较新的图片格式(相比jpg和png),该格式的最大特点是减小图片体积大小而不影响质量。将图片转换为WebP格式可以将其尺寸缩小约25-35%,而不会造成质量损失。

我们将在此文中深入探讨该主题!

那么……什么是WebP文件?简而言之,WebP是Google开发的一种图片格式。我们更为常见的图片格式是JPEG或JPG和PNG,WebP则算得上后起之秀。

WebP致力于提供相同质量的图片,但文件尺寸较小。通过减少图片文件的大小,而不会“降低图片呈现质量导致糟糕用户体验”,并且有利于网站加载速度提升。

Google PageSpeed Insights建议使用WebP格式图片

那么Google的WebP格式如何实现文件大小减少?WebP支持有损和无损压缩,因此确切的减少取决于您使用的是有损还是无损压缩。

通过有损的WebP压缩,WebP使用一种称为“预测编码”的方法来减小文件大小。预测编码使用图片中相邻像素的值来预测值,然后仅对差异进行编码。它基于VP8关键帧编码。

为了使WebP图片起作用,需要Web浏览器兼容才行。不幸的是,尽管越来越多的浏览器开始兼容WebP,但WebP兼容性仍然不是通用的。

当前主流浏览器一般都支持WebP图片(冥顽不灵的IE依然是不支持的,也可能因为它不是开源的),例如:

Internet Explorer也不兼容WebP(Edge支持WebP,因为它基于Chromium)。

WebP支持

根据Google的测试,WebP图片为:

两项测试均基于超过11,000张图片,包括:

由于并非所有浏览器都支持WebP图片,因此,您不能像JPEG和PNG那样,直接通过媒体库上传WebP图片文件并直接使用。

同样,23%的互联网用户(包括所有Safari用户)使用不支持WebP的浏览器。如果一刀切的方法所有图片格式换成WebP,则此类访客将无法看到您的网站图片,结果可想而知。

但无需担心,有问题自然就有对应的解决方案!

您可以使用WordPress插件,而不是将WebP图片直接上载到WordPress,而是将您的原始图片转换为WebP格式,并在访客浏览器不支持WebP时提供原始图片作为备用。

例如,如果您将JPEG文件上传到您的网站,则该插件:

这样,每个人都可以查看网站图片,并且保证了77%的访客获得更佳的网站加载体验。下面,将介绍一些优秀的WebP图片插件。

WordPress插件-ShortPixel

ShortPixel提供了一个基础的免费计划,每月免费优化约100张图片。在那之后,付费套餐的起步价为4.99美元/月(5,000张图片),或单次付费9.99美元(10,000图片)。

您可以在任意网站上分配ShortPixel图片优化额度-没有站点限制(并且您的所有网站都可以使用相同的ShortPixel帐户)。

在“ General ”选项卡中,您可以设置图片优化工作方式的基本设置。例如,使用哪种压缩级别以及是否调整图片大小:

ShortPixel插件设置

要启用WebP图片,请转到“Advanced ”选项卡,然后:

ShortPixel插件启用WebP图片支持

最后,保存您的更改。

WordPress插件-Imagify

它可以自动压缩和调整您上传到WordPress网站的图片的大小。然后,还可以将图片转换为WebP,并将WebP版本提供使用支持WebP的浏览器的访问者。

在功能方面,ShortPixel和Imagify有许多相似之处。最大的不同是。ShortPixel按图片数量计费,图片大小则无限制;而Imagify会根据文件总大小收费,但无图片数量限制。

因此,如果您需要优化大量大图片,ShortPixel的计费方式可能更合适你。相反,如果您需要优化许多小图片,则Imagify的计费方式可能更划算些。

Imagify的免费套餐感觉“在侮辱用户”,每月仅支持25MB的图片优化。之后,付费方式为4.99美元/月(最多1GB)或单次付费9.99美元(最多1GB)。

与ShortPixel一样,Imagify也支持在无限网站使用,反正是按量付费,管你在几个网站上用。

启用插件后,进行插件设置界面选择“General Settings”进行WebP优化设置。

Imagify插件设置

要启用WebP图片,请向下滚动到“Optimization ”部分,然后找到“WebP Format”部分:

Imagify启用WebP图片优化设置

Optimole是这次要介绍的第三个WordPress图片优化插件,其操作与Imagify和ShortPixel略有不同。Optimole可以自动压缩图片并调整其大小。但是,它还提供其他两个显着功能:

这种方法类似于其他实时优化服务,例如Cloudinary,imgix,KeyCDN图片处理等。

作为实时图片优化的一部分,Optimole向支持WebP的浏览器提供WebP图片。

Optimole也提供免费套餐,每月可以处理大约5,000个访问者的图片。之后,付费套餐起步价为19美金/月,支持25,000名访客。

完成后,Optimole将开始自动优化图片并通过其CDN为访客提供图片。WebP支持默认情况下处于启用状态,无需手动启用。

当然你还想执行其他设置,例如压缩级别和缩放,可以转到“媒体→Optimole→Settings”:

激活后,转到Settings » EWWW Image Optimizer页面以配置插件选项。你可以根据安装向导配置插件,但如果你不需要,则可以点击“I know what I am doing”链接以退出向导。

EWWW Optimizer插件安装向导

在下一个界面上,可以看到一些插件选项。向下滚动并选中“WebP Conversion”选项旁边的框。

EWWW Optimizer插件WebP转换选项

之后,单击“Save Changes”按钮保存设置。

接下来,向下滚动到“WebP Conversion”部分。现在,该插件将为您显示一些带有红色预览图像的重写规则。

.htaccess重写规则

如果插件成功添加了这些规则,则红色图像预览将变为带有“WebP”文本的绿色。

.htaccess文件WebP重写规则生效

有时,插件可能无法插入规则。在这种情况下,您需要从插件的设置页面复制重写规则,然后将其手动粘贴到.htaccess文件的底部。

完成后,返回到插件的设置页面,然后再次单击“Save Changes”按钮。如果预览图像变为绿色,则表示您已成功在WordPress网站上启用WebP图像传递。

或者,您可以从JS WebP Rewriting或<picture>这两种WebP重写方法中选择其一作为WebP delivery选项。这些方法比.htaccess方法要慢一些,但可以完成工作。

批量将旧图像转换为WebP版本

EWWW Image Optimizer支持将以前上传的图像文件转换为WebP图像。只需转到媒体»媒体库页面,然后切换到列表视图。

WordPress多媒体库列表显示数量

接下来,您需要单击“显示选项”按钮,并将“每页的项目数”更改为999。如果您有1000幅以上的图像,则这些图像将显示在下一页上。

这样,您将能够快速选择大量图像以进行批量优化。接下来,单击顶部的全选复选框以选择所有图像。

批量优化图片

之后,点击批量操作下拉菜单,然后选择批量优化选项。最后,单击“应用”按钮。

在下一个界面上,该插件将为您提供一个选项,可以跳过图像压缩,仅将其转换为WebP。如果您的图像已经优化,则可以选中此选项。

跳过图片压缩仅转换WebP

之后,单击“Scan for Unoptimized Images”按钮继续。然后,该插件将向您显示找到的图像数量,因此您可以单击“Optimize”按钮继续。

现在将优化您的图像,并且EWWW Image Optimizer将为您的图像生成WebP版本。

批量转换进度

测试WebP图像生效情况

新窗口打开查看图像

这将在新的浏览器选项卡中打开图像,您将能够在地址栏中看到其扩展名为.webp。

WebP格式图片

如果插件无法提供webp图像,则可以返回到插件的设置页面。在这里,您可以将WebP Delivery选项更改为“JS WebP Rewriting”或“<picture> WebP Rewriting”方法。

启用后,该插件会将新菜单项添加到标有“SG Optimizer”的管理侧边栏中。单击它会带您到插件的设置页面。

SG Optimizer缓存设置

如果您想使用SiteGround的内置缓存系统,则可以在此处打开缓存设置。

之后,您可以切换到“Media Optimization”选项卡,然后打开“Generate WebP Copies of New Images”选项。

为新图片生成WebP副本

在其下,您将看到“Bulk Generate WebP Files”选项。单击它将开始为WordPress媒体库中的所有图像文件生成WebP副本。

批量生成Webp文件

完成后,您的WordPress网站将开始提供WebP图像。

在SG Optimizer中测试WebP图像

要查看您的网站是否正在提供WebP图像,您需要在网站上打开一个包含一些图像的页面。

之后,右键单击并选择检查工具。这将打开开发者控制台,您需要在其中切换到“Network ”选项卡。

浏览器调试检查图片格式

在此处,单击“img”选项卡,然后重新加载页面(在Windows上为CTRL + R,在Mac上为Command + R)。当您的网站重新加载时,您将看到在开发人员控制台中加载的所有图像。

很多时候,WordPress网站中占据页面体积的大比例的,非图片莫属。如果页面图片过多且体积过大,建议应该考虑对图片进一步优化以提升网站页面的加载速度。

WebP作为新一代的图片格式,与较为经典的JPEG或PNG文件相比,可以将文件大小减少约25%。

现在大多数现代浏览器都支持WebP(大约77%互联网用户使用支持WebP的浏览器),但是,某些浏览器(尤其是Safari和IE)仍不提供WebP支持,又不能为所有访问者提供WebP图片。

要解决此问题,建议使用WordPress插件,将图片转换为WebP并向其浏览器支持此格式的访问者提供WebP版本,而对那些不支持该格式的访问者使用原始图片。推荐以下三个插件:

THE END
0.Image及其属性image支持哪些类型的图片格式在这个示例中,我们创建了一个Image组件,并设置了其宽度、高度和填充方式。objectFit属性用于设置图片的填充效果,常见的值有cover、contain、fill等。 支持的图片格式 ArkUI的Image组件支持多种图片格式,包括PNG、JPG、BMP、SVG、GIF和HEIF。开发者可以根据实际需求选择合适的图片格式。需要注意的是,不同格式的图片在加jvzquC41dnuh0lxfp0tfv8mwcpmzwjsazwgo1jwvkerf1mjvckrt1:9:27796<
1.组件的使用鸿蒙image支持哪些类型的图片格式设置图片缩放类型 图片插值 设置图片重复样式 设置图片渲染模式 设置图片解码尺寸 为图片添加滤镜效果 同步加载图片 事件调用 开发者经常需要在应用中显示一些图片,例如:按钮中的icon、网络图片、本地图片等。在应用中显示图片需要使用Image组件实现,Image支持多种图片格式,包括png、jpg、bmp、svg、gif和heif,不支持apngjvzquC41dnuh0lxfp0tfv8~g|workwlzkp5bt}neng5eg}fknu526B<8;:;1
2.图片编解码支持的格式有哪些图片处理(Image)拍照和图片Image或者ImageSpan传入一个string类型的路径时无法加载图片 Image组件如何读入沙箱内的图片 如何实现事件透传 Text组件设置maxLines后如何确定文本是否被隐藏 如何实现类似keyframes的效果 外部容器Stack能否满足适应内部容器组件的圆角等样式 Stack布局设置Alignment.Bottom没有生效 布局是否支持css里的calc(100vh -jvzquC41fg|fnxugt0nvc€jk0eun1ltpuwsft8hp1fud1qftoqtzq|2hcsy0hjvu/ksbin27
3.ps支持哪些格式?ps中jpg/jpeg/jpeg2000的区别介绍photoshop教程大型文档格式(PSB) PSD的进阶版本,PSD虽然厉害,但不能存储2GB以上的图片,而且它的色深也被局限在了8位/通道,如果你的图片超过上述限制,可以选择PSB格式文件,它支持4GB以上图片和8位以上色深,其他功能与PSD一致。 PSB格式是Photoshop的大型文档格式,可支持最高达到300000像素的超大图像文件。他支持photoshop所有功能,可jvzquC41yy}/lk:30pku1ymqvqyiqy49:9=447mvon
4.Image组件使用详解Image 组件用于添加图片; 支持的图片格式:png、jpg,别的不太了解,没做做过多测试; 不支持图片格式:android 环境下不支持gif格式图片,显示一个空白,这点值得注意,所以在模拟数据加载动画的时候,android 环境下是不能实现的,目前解决办法是把一个gif格式的图片切割成很多分,间隔时间替换图片路径实现这么一个动态的效jvzquC41dnuh0lxfp0tfv8qqxgekunw1ctzjeuj1fgzbkux17493997;
5.Image(基础组件)image支持哪些类型的图片格式Image为图片组件,常用于在应用中显示图片。Image支持加载PixelMap、ResourceStr和DrawableDescriptor类型的数据源,支持png、jpg、jpeg、bmp、svg、webp、gif和heif类型的图片格式。 说明: 该组件从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。 jvzquC41dnuh0lxfp0tfv8xjwfgpuqfpDDW0c{ykenk0fnyckny03=644:943
6.又拍云文档中心如上列表可以看出,当 Accept 请求头里面如果有image/webp字段,则说明客户端支持 WebP 解码。 2.CDN 如何实现实时图片格式转换? 针对用户源站并非 WebP 格式图片的时,CDN 层需要支持将原图图片的实时转换为 WebP 格式副本,这个在 CDN 层面是无缝支持的。流程是这样的: jvzq<84fqey/wy~wp0ipo8hfp1ipponi1
7.IMAGE函数=IMAGE(source, [alt_text], [sizing], [height], [width]) IMAGE 函数采用以下参数: source图像文件的 URL 路径(使用“https”协议)。 必需。 支持的文件格式包括 BMP、JPG/JPEG、GIF、TIFF、PNG、ICO 和 WEBP(Web 和 Android 上不支持 WEBP)。 jvzquC41uwvqq{y0okisq|thv0ipo8j/et0qokkeg5jojlg/'K6'A<'DF+F8.>7'D6.9n634;=6/>j74/:g4j2d;fg.3m>35f;2h>i7
8.百度人脸识别使用指南私有化部署接口文档image是string图片信息(总数据大小应小于10M),图片上传方式根据image_type来判断。两张图片通过json格式上传,格式参考表格下方示例 image_type是string图片类型 BASE64:图片的base64值,base64编码后的图片数据,编码后的图片大小不超过2M; FACE_TOKEN: 人脸图片的唯一标识,调用人脸检测接口时,会为每个人脸图片赋予一个唯jvzquC41vqvzww3xkr5jpmjz0rnq1qjnr1gsvrhng1823@3jvor
9.关于cv::imread读取图片类型的初探[通俗易懂]cv::imread支持哪些常见的图片格式? 如何判断cv::imread是否成功读取了图片? cv::imread读取图片时如何指定读取模式? 大家好,又见面了,我是你们的朋友全栈君。 关于cv::imread读取图片类型的初探 问题来源 环境 首先生成单通道和三通道的png图片 cv::imread函数及其参数 不同参数读取rgb图像 不同参数读取单通道图jvzquC41enuvf7ygpekov7hqo1jfxnqqrgx0c{ykenk04:;;27:
10.Python技巧之实现批量统一图片格式和尺寸python编辑能力:不同的图片格式支持不同的编辑功能。通过将图片转换为支持所需编辑功能的格式,可以更轻松地进行编辑工作。 如果我们需要把图片转换成文件,用Python学习的知识是不是能实现呢? Python模块之Image的应用示例 1.首先需要导入需要的图像库: 1 importImage jvzquC41yy}/lk:30pku1jwvkerf1;=565=/j}r