How To Convert img To amp-img Tags In WordPress

You need to start by adding the code snippet below to your WordPress theme’s functions.php file.

• Open your WordPress theme’s function.php file by using the WordPress Theme Editor (Appearance > Editor > Theme Functions);
• Copy and paste the code below;
• Click Update File to save the changes.

function amp_imgs( $atts ) {
     $atts = shortcode_atts(
          array(
               'image' => 'default-image.jpg',
               'alt' => ''
          ),
          $atts,
          'amp-img'
     );
     $sizes = explode( ' ', getimagesize( $atts['image'] )[3] );
     $output = '<amp-img src="' . $atts['image'] . '" alt="' . $atts['alt'] . '" ' . $sizes[0] . ' ' . $sizes[1] . ' layout="responsive"></amp-img>';
     return $output;
}

add_shortcode( 'amp-img', 'amp_imgs' );

Automatically converting img tags to amp-img tags using a shortcode

Once you’ve added the above shortcode function to your WordPress theme’s functions.php file, use the steps below to start converting img tags to amp-img tags automatically.

• Open any page on your WordPress website and call the shortcode;
• Add the attribute image with the image’s URL;
• Add the attribute alt with the image’s alt text for accessibility purposes.

[amp-img image="example.jpg" alt="The alt text example"]