现代浏览器根据图片的宽度和高度属性来设置图片的默认长宽比。我们在查看WordPress网站源代码的时候经常看到图片的宽度和高度,比如下面是一个基本的例子:
<img src="image.png" width="340" height="160" alt="my awesome alt" />
如果你的图像缺少这些属性,它可能会导致布局偏移,从而谷歌评测中在Core Web Vitals中触发CLS警告。 图片元素没有明确的宽度和高度。
有不同的方法使用宽度和高度属性来调整图像的大小。但一般来说,最好不要完全使用CSS,因为它可能会在CSS加载时导致页面的布局发生变化。这也就是所谓的CLS。
也有其他方法可以使用,比如利用WordPress开箱即支持的srcset和响应式图像。然而,并不是所有的主题和插件开发商都支持这个。这就是你可能有一些图片缺少基本的宽度和高度属性的地方。这里搬主题就提供一个给WordPress网站图片添加缺少的宽度和高度属性教程。
添加缺失的图片尺寸
按照下面的步骤,使用Perfmatters为你的图片添加缺失的宽度和高度属性。
这里分享搬主题的Perfmatters插件汉化专业版下载
步骤1
点击进入Perfmatters插件设置。
Perfmatters插件设置
步骤2
在 “设置”标签下,点击 “懒加载”子导航菜单。
步骤3
向下滚动到最下面并切换到 “添加缺少的图像尺寸”。
注意:你不需要在Perfmatters中使用懒加载来使用该功能。
步骤4
向下滚动并点击 “保存更改”。
它是如何工作的
当页面被渲染时,任何缺少宽度和高度属性的图像将自动被添加。图片的尺寸是通过一个PHP函数从图片本身提取的。下面是一个基本的例子。
之前
<img src="image.png" alt="my awesome alt" />
之后
<img src="image.png" width="340" height="160" alt="my awesome alt" />
最后总结
缺少图像尺寸的功能对外部图像不起作用。它们必须在本地或你的CDN上托管。
1.本站内容仅供参考,不作为任何法律依据。用户在使用本站内容时,应自行判断其真实性、准确性和完整性,并承担相应风险。
2.本站部分内容来源于互联网,仅用于交流学习研究知识,若侵犯了您的合法权益,请及时邮件或站内私信与本站联系,我们将尽快予以处理。
3.本文采用知识共享 署名4.0国际许可协议 [BY-NC-SA] 进行授权
4.根据《计算机软件保护条例》第十七条规定“为了学习和研究软件内含的设计思想和原理,通过安装、显示、传输或者存储软件等方式使用软件的,可以不经软件著作权人许可,不向其支付报酬。”您需知晓本站所有内容资源均来源于网络,仅供用户交流学习与研究使用,版权归属原版权方所有,版权争议与本站无关,用户本人下载后不能用作商业或非法用途,需在24个小时之内从您的电脑中彻底删除上述内容,否则后果均由用户承担责任;如果您访问和下载此文件,表示您同意只将此文件用于参考、学习而非其他用途,否则一切后果请您自行承担,如果您喜欢该程序,请支持正版软件,购买注册,得到更好的正版服务。
5.本站是非经营性个人站点,所有软件信息均来自网络,所有资源仅供学习参考研究目的,并不贩卖软件,不存在任何商业目的及用途
暂无评论内容