php - 画像の寸法を自動的に追加

Question

gtmetrix.com で自分のウェブサイトを採点しました。

すべての画像に画像の寸法を追加することをお勧めします。問題は、これらを自動的に追加する方法が必要であるため、画像が変更された場合、寸法が更新されることです。

私が持っているもの

<img src="bla.png">

欲しいもの

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

これを行うためのphpの方法またはjqueryの方法はありますか? ワードプレスサイト用。

Answer 1

PHP:

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

Answer 2

JavaScript ではなく PHP で行う必要があります。jQuery/javascriptで追加すると、読み込み後に幅と高さが追加されます。幅と高さを指定する主な理由は、エンジンがページをより速くレンダリングできるようにすることです。ロード後に追加しても役に立ちません。

返された配列のインデックス 3 をgetimagesize()イメージ タグで直接使用できます。これには、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にアクセスしてください。

Answer 3

イベントを使用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';

Answer 4

PHPではgetimagesize($file)、画像を動的に出力している場合です。