您现在的位置是:首页 > 网站制作 > WordpressWordpress
给WordPress网站图片添加缺少的宽度和高度属性教程
杰帅2023-07-07【Wordpress】人已围观
简介现代浏览器根据图片的宽度和高度属性来设置图片的默认长宽比。我们在查看WordPress网站源代码的时候经常看到图片的宽度和高度,比如下面是一个基本的例子:有明确的宽度和高度。
现代浏览器根据图片的宽度和高度属性来设置图片的默认长宽比。我们在查看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插件设置。

步骤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上托管。
Tags:Perfmatters WordPress WordPress优化加速 WordPress优化教程 WordPress教程
很赞哦! ()
相关文章
随机图文
wordpress 上传的图片不显示的问题 base64,data:image/gif
如何将WordPress文章迁移到Shopify:使用WP All Export插件的完整指南
如果您正在将WordPress网站迁移到Shopify,并希望将文章内容一起迁移,WP All Export插件是一个理想的解决方案。通过这款插件,您可以轻松导出WordPress中的文章,并将其转换为适合Shopify的CSV格式。WordPress 页面模板(Page Template)下拉列表不显示的原因及解决方法
WordPress 的自定义页面模板是一个非常强大好用的功能,使用它新建一些静态页面(Page),添加上一些数据调用的函数,再在网页上做一个导航连接到对应的页面就可以实现很多自定义的功wp_reset_postdata 和 wp_reset_query 的作用与区别
什么时候使用wp_reset_query,什么时候用wp_reset_postdata?