mjml-image

mj-image

Displays a responsive image in your email. It is similar to the HTML <img /> tag.

Note that if no width is provided, the image will use the parent column width.

<mjml>
  <mj-body>
    <mj-section>
      <mj-column>
        <mj-image width="300px" src="https://static.mailjet.com/mjml-website/documentation/image.png" />
      </mj-column>
    </mj-section>
  </mj-body>
</mjml>

Attributes

attribute	accepts	description	default value
align	left center right	image alignment	center
alt	string	image description	''
border	string	CSS border format	0
border-bottom	string	CSS border format
border-left	string	CSS border format
border-radius	string	border radius
border-right	string	CSS border format
border-top	string	CSS border format
container-background-color	CSS color formats	inner element background color
css-class	string	class name, added to the root HTML element created
fluid-on-mobile	boolean	if true, will be full width on mobile even if width is set
font-size	px	size of the alt text when image is not rendered	13px
height	px	image height	auto
href	string	link to redirect to on click, in URL format
max-height	px %	specify the maximum height of an image
name	string	specify the link name attribute
padding	px %	hero padding, supports up to 4 parameters	10px 25px
padding-bottom	px %	hero bottom padding
padding-left	px %	hero left padding
padding-right	px %	hero right padding
padding-top	px %	hero top padding
rel	string	specify the rel attribute
sizes	string	set width based on query
src	string	image source in URL format
srcset	string	enables to set a different image source based on the viewport, using CSS syntax
target	string	link target on click	_blank
title	string	tooltip & accessibility
usemap	string	reference to image map, be careful, it isn't supported everywhere
width	px	image width	inherits parent width

Try it live

Similar packages

Other packages similar to mjml-image

nodemailer

Nodemailer is a module for Node.js applications to allow easy email sending. While it does not specifically focus on image handling within email templates, it provides a comprehensive solution for sending emails, including attachments and inline images.

email-templates

The email-templates package is a tool for creating, sending, and managing email templates. It supports various templating engines and allows for the inclusion of images, but it is more general-purpose compared to mjml-image, which is specifically designed for responsive email design.

handlebars

Handlebars is a popular templating engine that can be used to create dynamic email templates. While it does not provide built-in support for responsive design like MJML, it allows for the inclusion of images and other dynamic content within email templates.