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

Question

I scored my website on gtmetrix.com.

It recommends adding image dimensions to all my images. The thing is, I need some way of adding these automatically, so if the image changes, the dimentions are updated.

What I have

<img src="bla.png">

What I'd like to have

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

Is there a php way or a jquery way to do this? For a wordpress site.

Answer 1

You can use image onload event to calculate the dimensions of image. Pure javascript approach, something like ;

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';