自动将图像尺寸添加到 <img>答案

【问题标题】：Add image dimensions automatically to <img>自动将图像尺寸添加到 <img>
【发布时间】：2013-04-02 06:02:30
【问题描述】：

我在 gtmetrix.com 上为我的网站评分。

它建议为我的所有图像添加图像尺寸。问题是，我需要一些自动添加这些的方法，所以如果图像发生变化，尺寸也会更新。

我有什么

<img src="bla.png">

我想要什么

<img src="bla.png" width="{width of image}" height="{height of img}">

是否有 php 方式或 jquery 方式来执行此操作？对于 wordpress 网站。

【问题讨论】：

使用 jQuery 计算加载时的图像尺寸实际上可能会降低您的网站速度，而不是那里没有尺寸。我的网站计算上传图像的尺寸并将它们存储到 PHP 在加载时检索它们的数据库，但我的不是 WP 网站。事实上，在加载时做任何事情都可能会损害页面加载速度。
数据库方法在 IMO 上效果很好。

标签： php jquery image frontend dimensions

【解决方案1】：

PHP：

<?php
list($width, $height) = getimagesize("bla.png");
echo "<img src='bla.png' width='$width' height='$height'>";
?>

【讨论】：

【解决方案2】：

您可以使用image onload 事件来计算图像的尺寸。纯 javascript 方法，类似于 ;

var image = new Image();

image.onload = function()
{
  //after load complete you will get the image dimensions here from 
  //image.width and image.height
}

image.src = 'image url';

【讨论】：

IMO 它违背了在标记中指定图像尺寸的全部意义
@Ejay OP 可以在 image.onload 事件的标记中分配维度
是的，但它仍然会等待图像完全加载，因此页面无论如何都会重新渲染。
没有整页不会重新渲染，只有特定的图片宽度和高度属性会在图片加载完成后更新
你是对的 重新渲染 :) 我试图使用的特定术语是 reflow and repaint developers.google.com/speed/docs/best-practices/…

【解决方案3】：

如果您动态输出图像，则在 php 中为 getimagesize($file)。

【讨论】：

【解决方案4】：

您应该使用 PHP 而不是 javascript。如果使用 jQuery / javascript 添加，加载后会添加宽度和高度。指定宽度和高度的主要原因是为了让引擎更快地渲染页面。如果在加载后添加，将没有任何帮助。

你可以直接在图片标签中使用getimagesize()返回数组的索引3。它包含一个带有 height="yyy" width="xxx" 的字符串，可以直接在 IMG 标签中使用。

<?php
    list($width, $height, $type, $attr) = getimagesize("file.png");
    echo "<img src='file.png' $attr />";
?>

您可以访问http://php.net/manual/en/function.getimagesize.php了解有关此功能的更多详细信息。

【讨论】：