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.
Table of contents
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.
