How to Include Image in AMP

Most HTML tags can be used directly in AMP HTML, but certain tags, such as the <img> tag, are replaced with equivalent or slightly enhanced custom AMP HTML tags.

You can include an image in your AMP page using the amp-img element. At minimum, you need to set the width and height of the image.

For example,

<amp-img src="sunset.jpg" width="250" height="150"></amp-img>

The image will display with the specified fixed height and width.

To create fully responsive images, add layout="responsive".

Animated Images

The amp-anim element is very similar to the amp-img element, and provides additional functionality to manage loading and playing of animated images such as GIFs.

Get Image Size in PHP

As height and width of the image are required for AMP, you can use the getimagesize() function in PHP to get the size of an image. This function accepts the filename as a parameter and determines the image size and returns the dimensions with the file type and height/width of image.

For example,

$image_info = getimagesize("sunset.png"); // Returns array

To get the width of image, $image_info[0]

To get the height of image, $image_info[1]