Image Block (mj-image)
Manage image sizing, 2x retina display scaling, alternative text for screen readers, links, and asset storage.
Key Takeaways
- Always use absolute HTTPS URLs for all email images.
- Use 2x resolution assets (e.g. upload 1200px width for a 600px container) for crisp display on high-DPI Retina screens.
- Always set explicit image widths in pixels to prevent Outlook desktop from displaying images at full camera resolution.
- Include meaningful alternative text (alt) for accessibility and inboxes with images disabled.
Configuring Image Properties#
In the right-hand panel for any Image block:
- Source URL: The public HTTPS link to your image. Upload directly from your computer into the PostBrix Asset Manager, or paste a hosted URL.
- Alt Text: Descriptive text displayed when images are blocked or read by assistive screen readers.
- Width: The explicit display width (in pixels or percentage).
- Link URL: Makes the image clickable.
- Alignment: Left, Center, or Right.
- Border Radius: Rounded corners for logos or card images (note: Outlook 2016–2021 desktop displays rectangular corners as it does not support CSS
border-radius).
The 2x Retina Display Rule#
Modern mobile phones, laptops, and 4K monitors use high-DPI displays with device pixel ratios of 2x or 3x. A 600px image displayed at 600px will appear blurry.
The Golden Rule for Email Images:
- Export your graphic at double the intended display width (e.g.,
1200pxwide). - Upload the 1200px file to PostBrix.
- Set the Display Width in PostBrix to
600px(or 100% of the column).
This ensures sharp typography and crisp details on Retina displays while constraining the layout to standard dimensions.
The Outlook Image Explosion Bug
Frequently Asked Questions
Why do my images look blurry on smartphones?
Smartphones use Retina screens (2x/3x pixel ratio). Export images at twice their intended display size (e.g., 1200px for a 600px hero) and set the display width to 600px in the editor.
What is the maximum file size recommended for email images?
Keep each image under 200 KB (ideally under 100 KB) and the total email image payload under 1 MB to prevent slow loading on mobile connections.