How to Use amp-img in Your AMP Emails

Suryanarayan Pal
BySuryanarayan Pal

4 mins read

Images are worth a thousand words, and they make your content enjoyable to read. So you should use them in your AMP emails.

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?

  • Applications of amp-img

  • Features of amp-img

  • Wrapping up

What is amp-img?

The amp-img is an 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, 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 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 to make your post even more interactive 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 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

✅ 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 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.

What should you do next?

You made it till the end! Here's what you can do next to grow your business:

2_1_27027d2b7d
Get smarter with email resources

Free guides, ebooks, and other resources to master email marketing.

1_2_69505430ad
Do interactive email marketing with Mailmodo

Send forms, carts, calendars, games and more within your emails to boost ROI.

3_1_3e1f82b05a
Consult an email expert

30-min free email consultation with an expert to fix your email marketing.

Table of contents

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

Fresh Marketing Ideas, Every Week.

Get the latest marketing roundup & news

Get 3X conversions
with interactive emails

Check.svg

Create & send interactive emails without coding

Check.svg

Put revenue on auto-pilot with pre-built journeys

Check.svg

Save time with AI-powered email content creation

1000+ businesses grew with Mailmodo, including

Frame_1110165681_3_b26b1a7573
Group_1110165532_1_bf39ce18b3
Ellipse_Gradientbottom_Bg
Ellipse_Gradientbottom_Top
gradient_Right