在 Pagelines Pro Wordpress 主题中指定 <img> 的图像尺寸

Posted 2023-03-05

【中文标题】在 Pagelines Pro Wordpress 主题中指定 <img> 的图像尺寸

【英文标题】：Specify image dimensions of an <img> within Pagelines Pro Wordpress theme

【发布时间】：2012-10-02 20:20:30

【问题描述】：

我正在尝试指定我网站上某些图片的尺寸以优化页面速度。我正在使用 Wordpress 的 Pagelines Pro 主题，并尝试添加此自定义 CSS 来定义 img 大小，但 Google 的页面速度似乎没有考虑到这一点。我可以自己设置 img 标签的宽度和高度，但我不确定如何（或在哪里）执行此操作，因为我使用 CloudFront 作为我的 CDN。

任何指导将不胜感激。

对于我的具体示例，这里是详细信息。

我的网站：http://www.mybringback.com

我正在尝试指定左上角品牌徽标的 img 大小。

我通过添加这个自定义 css 来尝试这个：

.navbar .plbrand img height:27px;width:160px;

但是，PageSpeed 无法识别此更改： http://gtmetrix.com/reports/www.mybringback.com/BI93pLK1

【参考方案1】：

CSS 图像大小仍会抓取完整大小的图像，它只是将完整大小缩小到您设置的大小，因此 Google 显然不会看到页面速度增加。

你必须看看使用 WordPress 内置的 image cropping/resizing functions

编辑：

对于您的情况，我认为它正在寻找内联属性。 `

【讨论】：

感谢您回复亚历克斯。但是，我不是要调整图像大小，我只是想指定尺寸。还需要使用 add_image_size() 方法吗？

如果你只定义尺寸，那只是缩放大图像。 5megabyte 图像仍然是5mb，无论它是 10,000px 宽还是 100px 宽，因为它只是一个大图像，但被压缩到一个更小的空间中。您必须使用 add_image_size() 或上传较小的尺寸才能看到页面速度的任何性能提升。如果您想要 100 像素 x 100 像素，但图像的宽度为 10,000 像素，最好将其（为了页面速度）缩小到 100 像素，而不是将尺寸修改为 100 像素（将 10,000 塞进 100 像素）

是的，我明白这一点，但我不想调整图像大小。原图是160px，27px，我想在img标签内指定这些属性，但是不知道在哪里可以找到这段代码的生成位置。

啊。嗯，它可能正在寻找内联属性。 `

不，不幸的是不会。你必须围绕自己扎根。奇怪的是它在“header.php”中。如果不是，您可以下载您的主题并在dreamweaver 中打开它。如果你按 ctrl+f，你可以使用查找工具，搜索“in folder”并选择你的主题，然后搜索“logo”