Skip to main content
Email Love images use a two-layer block: an mj-image-Frame for spacing and alignment, with the image inside it. Replace the image fill without deleting or detaching that structure.

​
Replace an existing image

1

Select the image layer

Use the Figma Layers panel or double-click until the image inside the mj-image-Frame is selected.
2

Replace the fill

In Figma’s right sidebar, open the image fill and choose a new file.
3

Choose Fit or Fill

Use Fit when the whole image must remain visible. Use Fill when the image should cover the box and cropping is acceptable.
4

Set the crop

Reposition the image so the important subject stays visible. Check the crop again after changing the frame size.
5

Preview the email

Open Preview and check desktop and mobile. Confirm the image is sharp, correctly proportioned, and aligned with nearby content.

​
Add a new image block

Select the Column where the image belongs, then add an Image component from the plugin. Move the complete mj-image-Frame within the Column to change the reading order. Do not place an ordinary Figma rectangle directly inside the email structure. The Email Love image block carries the export behavior, spacing, links, alt text, and responsive rules.

​
Size the source file

Provide source images at roughly 2x their displayed dimensions:
  • 640px full-width display: use about 1280px source width
  • 320px half-width display: use about 640px source width
  • 24px icon: use about 48px source dimensions
Use JPG for photos, PNG for graphics or transparency, and GIF for supported animation. Avoid WebP and SVG when broad email-client compatibility matters.

​
Add links and alt text

Select the image block and open Properties to add a click destination and alt text. See Add Links and Alt Text to Images for examples. For a countdown timer, personalized image, or asset already on a CDN, use an external image URL instead.

​
Prepare the mobile version

Use Mobile Styles to change padding, dimensions, visibility, or the mobile crop. Do not stretch the image into a different aspect ratio.

​
Common problems

​
The image looks blurry

The source file is smaller than its displayed size. Replace it with a 2x asset and avoid scaling it up beyond its natural dimensions.

​
The image looks stretched

The frame ratio and image ratio do not match. Use Fit, crop with Fill, or resize the block while preserving the source aspect ratio.

​
The wrong part of the photo is visible

Open the image crop in Figma and move the focal point. Check both desktop and mobile previews.

​
The image is missing after export

Confirm the image is inside a valid mj-image-Frame, then check Image Hosting.