给WordPress网站图片添加缺少的宽度和高度属性教程

现代浏览器根据图片的宽度和高度属性来设置图片的默认长宽比。我们在查看WordPress网站源代码的时候经常看到图片的宽度和高度,比如下面是一个基本的例子:

<img src="image.png" width="340" height="160" alt="my awesome alt" />

如果你的图像缺少这些属性,它可能会导致布局偏移,从而谷歌评测中在Core Web Vitals中触发CLS警告。 图片元素没有明确的宽度和高度。

给WordPress网站图片添加缺少的宽度和高度属性教程插图

有不同的方法使用宽度和高度属性来调整图像的大小。但一般来说,最好不要完全使用CSS,因为它可能会在CSS加载时导致页面的布局发生变化。这也就是所谓的CLS。

也有其他方法可以使用,比如利用WordPress开箱即支持的srcset和响应式图像。然而,并不是所有的主题和插件开发商都支持这个。这就是你可能有一些图片缺少基本的宽度和高度属性的地方。这里搬主题就提供一个给WordPress网站图片添加缺少的宽度和高度属性教程。

添加缺失的图片尺寸

按照下面的步骤,使用Perfmatters为你的图片添加缺失的宽度和高度属性。

这里分享搬主题的Perfmatters插件汉化专业版下载

前往下载插件汉化中文最新版

步骤1

点击进入Perfmatters插件设置。

给WordPress网站图片添加缺少的宽度和高度属性教程插图1
Perfmatters插件设置

步骤2

在 “设置”标签下,点击 “懒加载”子导航菜单。

给WordPress网站图片添加缺少的宽度和高度属性教程插图2

步骤3

向下滚动到最下面并切换到 “添加缺少的图像尺寸”。

给WordPress网站图片添加缺少的宽度和高度属性教程插图2

注意:你不需要在Perfmatters中使用懒加载来使用该功能。

步骤4

向下滚动并点击 “保存更改”。

它是如何工作的

当页面被渲染时,任何缺少宽度和高度属性的图像将自动被添加。图片的尺寸是通过一个PHP函数从图片本身提取的。下面是一个基本的例子。

之前

<img src="image.png" alt="my awesome alt" />

之后

<img src="image.png" width="340" height="160" alt="my awesome alt" />

最后总结

缺少图像尺寸的功能对外部图像不起作用。它们必须在本地或你的CDN上托管。

 收藏 (0) 更新不易,打赏吧

您可以选择一种方式赞助本站

支付宝扫一扫赞助

微信钱包扫描赞助

除特别注明外,本站所有文章均基于CC-BY-NC-SA 4.0原创,转载请注明出处。
文章名称:《给WordPress网站图片添加缺少的宽度和高度属性教程》
文章链接:https://www.banzhuti.com/wordpress-add-missing-width-height-images.html
分享到: 生成海报
版权免责声明

① 本站提供的资源(插件或主题)均为网上搜集,如有涉及或侵害到您的版权请立即通知我们。
② 本站所有下载文件,仅用作学习研究使用,请下载后24小时内删除,支持正版,勿用作商业用途。
③ 因代码可变性,不保证兼容所有浏览器、不保证兼容所有版本的WP、不保证兼容您安装的其他插件。
④ 本站保证所提供资源(插件或主题)的完整性,但不含授权许可、帮助文档、XML文件、PSD、后续升级等。
⑤ 由本站提供的资源对您的网站或计算机造成严重后果的本站概不负责。
⑥ 使用该资源(插件或主题)需要用户有一定代码基础知识!另本站提供汉化使用安装教程,仅供参考。
⑦ 有时可能会遇到部分字段无法汉化,同时请保留作者汉化宣传信息,谢谢!
⑧ 本站资源售价只是赞助和汉化辛苦费,收取费用仅维持本站的日常运营所需。
⑨ 如果喜欢本站资源,欢迎捐助本站开通会员享受优惠折扣,谢谢支持!
⑩ 如果网盘地址失效,请在相应资源页面下留言,我们会尽快修复下载地址。

热门文章

评论 抢沙发

评论前必须登录!

立即登录   注册

WordPress主题 插件 建站 汉化

定制服务联系我们
切换注册

登录

点击按钮进行验证

忘记密码 ?

您也可以使用第三方帐号快捷登录

切换登录

注册

我们将发送一封验证邮件至你的邮箱, 请正确填写以完成账号注册和激活