# How to Use amp-img in Your AMP Emails

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "WebPage",
  "headline": "Amp-img: Features, Application, and Examples",
  "description": "Features and applications of amp-img, one of the AMP email components. With amp-img you can add interactive images in emails to engage your subscribers.",
  "image": "https://res.cloudinary.com/mailmodo/image/upload/v1652870720/strapi/Featured_image_Amp_image_eb6ad1a89b.png",
  "datePublished": "2022-02-11T18:54:13.602Z",
  "dateModified": "2025-01-08T18:18:59.912Z",
  "publisher": {
    "@type": "Organization",
    "name": "Mailmodo",
    "url": "https://www.mailmodo.com/",
    "sameAs": [
      "https://www.linkedin.com/company/mailmodo/",
      "https://www.facebook.com/mailmodo/",
      "https://www.instagram.com/mailmodohq/",
      "https://www.youtube.com/@mailmodo"
    ],
    "logo": "https://www.mailmodo.com/static/images/logo/logo-full.svg",
    "description": "Mailmodo is a complete email marketing platform that helps email marketers to create and send interactive emails to drive growth and engagement.",
    "address": {
      "@type": "PostalAddress",
      "addressLocality": "Lewes",
      "addressRegion": "DE",
      "postalCode": "19958",
      "streetAddress": "Mailmodo Technologies Inc. 16192, Coastal Highway",
      "addressCountry": {
        "@type": "Country",
        "name": "US"
      }
    },
    "contactPoint": {
      "@type": "ContactPoint",
      "email": "enquiries@mailmodo.com",
      "contactType": "customer service"
    }
  }
}
</script>

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "Amp-img: Features, Application, and Examples",
  "description": "Features and applications of amp-img, one of the AMP email components. With amp-img you can add interactive images in emails to engage your subscribers.",
  "image": "https://res.cloudinary.com/mailmodo/image/upload/v1652870720/strapi/Featured_image_Amp_image_eb6ad1a89b.png",
  "datePublished": "2022-02-11T18:54:13.602Z",
  "dateModified": "2025-01-08T18:18:59.912Z",
  "author": {
    "@type": "Person",
    "name": "Suryanarayan Pal",
    "url": "https://www.mailmodo.com/guides/author/suryanarayan-pal/"
  },
  "publisher": {
    "@type": "Organization",
    "name": "Mailmodo",
    "logo": {
      "@type": "ImageObject",
      "url": "https://www.mailmodo.com/static/images/logo/logo-full.svg"
    }
  },
  "mainEntityOfPage": {
    "@type": "WebPage",
    "@id": "https://www.mailmodo.com/guides/amp-img/"
  }
}
</script>

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Organization",
  "@id": "#creator",
  "description": "Email marketing software to create and send interactive emails to maximize conversions and reinvent your user journey",
  "email": "support@mailmodo.com",
  "image": "https://www.mailmodo.com/static/images/og-image.png",
  "knowsAbout": "Email marketing",
  "legalName": "Mailmodo Technologies Inc.",
  "location": "United States",
  "logo": "https://www.mailmodo.com/static/images/logo/logo-full.svg",
  "name": "Mailmodo",
  "sameAs": [
    "https://twitter.com/mailmodo",
    "https://www.facebook.com/company/mailmodo/",
    "https://www.linkedin.com/company/mailmodo/"
  ],
  "url": "https://www.mailmodo.com/"
}
</script>

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    {
      "@type": "ListItem",
      "position": 1,
      "name": "Home",
      "item": "https://www.mailmodo.com/"
    },
    {
      "@type": "ListItem",
      "position": 2,
      "name": "Guides",
      "item": "https://www.mailmodo.com/guides/"
    },
    {
      "@type": "ListItem",
      "position": 3,
      "name": "amp img",
      "item": "https://www.mailmodo.com/guides/amp-img/"
    }
  ]
}
</script>

## Table of contents

- What is amp-img?
- Applications of amp-img
- Features of amp-img
- Wrapping up

Images are worth a thousand words, and they make your content enjoyable to read. So you should use them in your [AMP emails.](https://www.mailmodo.com/guides/amp-for-email/)

However, adding images is slightly different if you send interactive AMP emails. You need to use the **amp-img** component instead of the HTML5 img tag since it has many advantages.


This guide will teach you **amp-img** and different ways to use it in your AMP emails.

## What is amp-img?

The **amp-img** is an [AMP email component](https://www.mailmodo.com/guides/amp-email-component/) that lets you add images to your AMP emails. The AMP can efficiently manage the system's resources when you add your images with amp-img, making it better than the HTML5 img tag.

## Applications of amp-img

Here are some scenarios where amp-img will be helpful:

### 1.  Show your product imagery
    

According to [Justuno](https://www.justuno.com/blog/65-e-commerce-statistics-about-consumer-psychology/#:~:text=93%25%20of%20consumers%20consider%20visual%20appearance%20to%20be%20the%20key%20deciding%20factor%20in%20a%20purchasing%20decision.), visual appearance was the key deciding factor for 93% of users while purchasing. So you better have high-quality images when you send [AMP emails with carts](https://www.mailmodo.com/email-templates/cart-recovery-email/) in them. But high-quality images have large sizes and take longer to load. You can solve this issue by using amp-img to prioritize image loadings based on which product the user views. This helps images show correctly and leave a great impression on your users.

### 2.  Send email posts
    

Your users love to read great content. But they don't love clicking on email links to read that content. So if you provide some of your great content in the email itself, your users are going to appreciate you. For that, use an amp-img tag for your images to load efficiently, even when you have a lot of images to show. In addition, you can use the [amp-accordion](https://www.mailmodo.com/guides/amp-accordion/) to make your post even more [interactive](https://www.mailmodo.com/guides/interactive-emails/) and user-friendly.

### 3.  Show your portfolio images
    

If you're a photographer, the quality of images is everything. So when potential clients request your sample images, you need to send them the best of your work. But your best images may take time to load due to their large size, and your clients don't have that much time either. So use amp-img to load your images based on the viewport position. This way, the email loads only the required images, saving your clients' time.

### 4.  Show your product features
    

Not everyone visits your website to check out your product. Sometimes, you have to talk about your product in an email itself. You need to highlight the main features and benefits for that [customer segment](https://www.mailmodo.com/guides/audience-segmentation/) and send it to them. But if you have many features to show, it will be difficult to add all relevant imagery since the size of the entire email will increase. You can solve this issue by using amp-img to prioritize image loadings based on which feature the user views.

## Features of amp-img

The amp-img has an array of different features, and we have explained some of them below:

### ✅ Set up a fallback image

Everyone doesn't have a good internet connection; hence images in an email may fail to load in such scenarios. Keeping that in mind, you can set up a fallback image with the **fallback** attribute that will show when the intended image fails to load.

### ✅ Set up different images for different screen sizes

Not all images look good on every screen size. So you can set up different image sources for different screen resolutions with the **media** attribute. The media attribute will show or hide images based on the specified screen sizes. This is helpful when you want your images to look great on every screen.

  

Related guide:  [How to Create Responsive Email Design For Better User Experience](https://www.mailmodo.com/guides/responsive-email-design/)

### ✅ Set up a fixed-size image

On the other hand, if you want the image to keep its width and height no matter the screen size, add the **layout=fixed** to the amp-image and specify its width and height. It will now maintain this aspect ratio no matter if it is on desktop, mobile, or tablet.

### ✅ Add attributions to the source

If you have used third-party images that are not your own, you must attribute it. You can do so with the attribution attribute. Add the name of the image and its source place as the value of this attribute.

  

These were some of the interesting features of amp-img. But there are even more features and attributes that allow you do many more things. Here's a list of those: src, srcset, sizes, alt, height and width, common attributes, data attributes.

Visit [amp.dev](https://amp.dev/documentation/components/amp-img/?format=email) for more information.

## Wrapping up

Images are a great way to make your content shine, and with the help of amp-img, you can now add customizable images right inside your AMP emails.

We have also covered other AMP email components that you may find helpful. So do check them out to familiarize yourself with AMP email components.

---

**Author: Suryanarayan Pal**

Suryanarayan has 7 years of experience in email marketing for B2B, SaaS, and e-commerce, specializing in email deliverability and project management.

