Images bring an element of fun to emails. You can express more while saying less. Whether you use images to display a gallery of popular products or to showcase the latest books, there is no better way to connect with your audience and convey the intended message.
The amp-img component in AMP for emails is an impressive upgrade to the traditional way of including images in HTML emails. The images added with amp-img load faster and consume less data. You can create a visual experience that delights users with fast-loading image galleries across devices. Let us learn more about amp-img and how it puts your AMP emails in the spotlight.
1. What are the benefits of the amp-img component?
The amp-img component lets you add images to emails while managing system resources optimally. There are scores of applications of amp-img: you can display picture portfolios, newsletters, sale announcers, infographics, blog posts, welcome messages, and much more to make emails more compelling. Here is what you stand to gain with the use of amp-img.
1.1. Add high-quality images
High-quality images are generally larger and cause emails to load much slower. The amp-img component prioritizes viewport position to load images more efficiently. You can include rich picture portfolios without slowing the user experience. So, the next time you improve photos online using top editing software, you do not have to worry about the file size.
1.2. Jazz up the content
amp-img supports animated images like GIFs or APNGs. Animations quickly catch user attention; use them to display the core message. Note that for animations included this way, users do not have control to pause/stop them. Besides animations, you can include text images in cases where you must maintain brand identity or corporate guidelines.
1.3. Grasp user attention
Emails with lengthy reports and data can be boring and counterproductive. Using amp-img, you can include images of graphs, bar charts, icons, or infographics to present the data concisely and attractively. You can simplify the presentation of complex data sets.
2. How to use the amp-img component?
amp-img is the AMP HTML replacement for the normal HTML img tag. With amp-img, AMP provides a powerful replacement.
AMP may delay or prioritize resource loading based on the viewport position, system resources, connection bandwidth, or other factors. The amp-img components allow the runtime to manage image resources effectively.
The amp-img component, like all externally fetched AMP resources, must be given an explicit size (width/height) in advance so that the aspect ratio becomes available without fetching the image. The layout attribute determines actual layout behavior.
If the resource requested by the amp-img component fails to load, the space will be blank unless there is a provision for a fallback child. The fallback execution happens on the initial layout, and subsequent src changes after the fact (through resize + srcset, for example) will not have a fallback for performance implications.
You can set a placeholder background color or visual using CSS selector and style on the element. You can implement additional image features like captions with standard HTML (for example, figure and figcaption).
If you want your image to scale as the window resizes and also limit the maximum width (so the image doesn’t stretch beyond its width):
- Set layout=responsive for <amp-img>
- On the image’s container, specify the max-width:<max width to display image> CSS attribute. Why on the container? An amp-img element with layout=responsive is a block-level element, whereas, <img> is inline. Alternatively, you can set display: inline-block in your CSS for the amp-img element.
If you want your image to display at a fixed size:
- Set layout=fixed for <amp-img>
- Specify the width and height
For responsive images, the width and height do not need to match the exact width and height of the amp-img; those values need to result in the same aspect ratio. For example, instead of specifying width=”900″ and height=”675″, you can just specify width=”1.33″ and height=”1″.
For third-party images, use the ‘attribution’ attribute to specify the image’s sourcing.
amp-img can be styled directly via CSS properties.
If you wish to learn more about the amp-img component for email, visit amp.dev.
3. Variations of the amp-img component
You can optimize the image display and enhance the content’s visual appeal using the component’s attributes.
3.1. Set the size of the image
The value of the ‘sizes’ attribute is a size expression that selects the defined size corresponding to the media query based on the current window size. Additionally, AMP sets an inline style for width on the element. If the srcset attribute is provided, <amp-img> will autogenerate the HTML5 definition of the sizes attribute for the underlying <img>, when none is specified. If the srcset attribute is absent, there will be autogeneration of the no sizes attribute for the underlying <amp-img>.
It is possible to use the size attribute on <amp-img> without srcset for setting an inline style for width according to the matched media query or for inferencing layout responsive.
3.2. Add alternate text
The ‘alt’ attribute is a string of alternate text similar to the alt attribute on img. Whenever you use amp-img, always provide an appropriate alternative text; otherwise, assistive technologies (such as screen readers) will announce the element as “unlabelled graphic” or similar. If the image is purely decorative and does not convey any content, you can use an empty alt=”” – in this case; assistive technologies will ignore/not announce the element. You can avoid content confusion with this attribute.
3.3. Specify image height and width
Use the ‘height and width’ attribute to give an explicit image size. The AMP runtime uses the specified size to determine the aspect ratio without fetching the image.
3.4. Optimize image for different screen resolutions
The ‘media’ attribute shows or hides AMP components, which you can use when designing responsive layouts. The appropriate way to display images with varying aspect ratios is to use multiple <amp-img> components, each with a media attribute that matches the screen widths to show each instance. You can set various source files to allow perfect display on each kind of screen.
amp-img is frequently combined with the amp-anim and amp-carousel components to make the emails even more effective.
4. How can Netcore Cloud help you?
Netcore Cloud empowers you to create AMP interactive emails coupled with the world’s most advanced AI-powered email delivery. It sends 18 billion emails/month on behalf of businesses across 12 countries.
Netcore Cloud offers an enterprise-ready AMP editor that makes AMP email creation quick and easy. You can use the no-code drag-and-drop editor to build engaging AMP emails quickly. To customize further, you can connect with the in-house team of AMP experts to design AMP emails for specific use cases.
At Netcore Cloud, we help you set up and integrate AMP for email with the shortest TAT. You will find instant support for domain whitelisting, custom AMP design creation, and email delivery optimization that maximize the ROI of your email marketing campaigns.
Netcore Cloud works as an extension of your team to provide result-oriented solutions. With Netcore Cloud’s help, 50+ global brands have rolled out interactive emails powered by AMP and achieved their goals.
Netcore Cloud’s team partners with your marketing team to help you leverage the power of AMP emails and drive business revenue.
Connect with us to understand how you can benefit from our expertise and experience.
