# mjml-image
> mjml-image
Latest version **5.4.1** (published 2026-09-10) · MIT license · 0 weekly downloads
## Install
```sh
npm install mjml-image
pnpm add mjml-image
yarn add mjml-image
bun add mjml-image
```
## Health
**Score 60/100 (C)** — status: active.
Positive: no vulnerabilities; recently updated; high maintenance score; popular repo.
Warnings: low downloads; no types; no esm support.
## Facts
| | |
|---|---|
| Version | 5.4.1 |
| Published | 2026-09-10 |
| First published | 2016-03-25 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 3 |
| Unpacked size | 13.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 18243 |
| Maintainers | mjmlio, iryusa, loeck, ngarnier, meriadec, kmcb, totocap |
## Links
- npm: https://www.npmjs.com/package/mjml-image
- Repository: https://github.com/mjmlio/mjml
- Homepage: https://mjml.io
- Issues: https://github.com/mjmlio/mjml/issues
- npm.io page: https://npm.io/package/mjml-image
## Dependencies (3)
- [lodash](https://npm.io/package/lodash.md) ^4.17.21
- [mjml-core](https://npm.io/package/mjml-core.md) 5.4.1
- [@babel/runtime](https://npm.io/package/@babel/runtime.md) ^7.28.4
## Recent versions
- 5.4.1 (latest) — 2026-09-10
- 5.2.0-beta.1 (beta) — 2026-05-06
- 5.0.0-alpha.11 (experimental) — 2026-02-10
- 4.7.0-beta.2 (next) — 2020-08-28
- 0.0.1-future (future) — 2017-03-31
- 5.4.0 — 2026-06-29
- 5.3.0 — 2026-05-27
- 5.2.2 — 2026-05-19
- 5.2.1 — 2026-05-12
- 5.2.0 — 2026-05-07
- 5.1.0 — 2026-04-24
- 5.1.0-beta.1 — 2026-04-24
- 5.0.1 — 2026-04-16
- 5.1.0-alpha.1 — 2026-04-16
- 5.0.0 — 2026-04-16
- … 142 more at https://npm.io/package/mjml-image/versions
## README
### mj-image
Displays a responsive image in your email. It is similar to the HTML `![]()
` tag.
Note that if no width is provided, the image will use the parent column width.
```xml
```
#### 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
---
_Source: https://npm.io/package/mjml-image · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._