> ## Documentation Index
> Fetch the complete documentation index at: https://help.emaillove.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Add and Replace Images

> Replace an image while preserving its Email Love structure, crop it safely, and prepare it for mobile and export

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.

<iframe src="https://www.loom.com/embed/9cb5579c886546929e50d145d30ad762" width="100%" height="400" frameBorder="0" allowFullScreen />

## Replace an existing image

<Steps>
  <Step title="Select the image layer">
    Use the Figma Layers panel or double-click until the image inside the `mj-image-Frame` is selected.
  </Step>

  <Step title="Replace the fill">
    In Figma's right sidebar, open the image fill and choose a new file.
  </Step>

  <Step title="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.
  </Step>

  <Step title="Set the crop">
    Reposition the image so the important subject stays visible. Check the crop again after changing the frame size.
  </Step>

  <Step title="Preview the email">
    Open Preview and check desktop and mobile. Confirm the image is sharp, correctly proportioned, and aligned with nearby content.
  </Step>
</Steps>

## 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](/plugin/images/links-alt-text) for examples.

For a countdown timer, personalized image, or asset already on a CDN, use an [external image URL](/plugin/images/external-images) instead.

## Prepare the mobile version

Use [Mobile Styles](/plugin/images/mobile-images) 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](/plugin/images/hosting#troubleshooting).

## Related articles

* [Image Hosting](/plugin/images/hosting)
* [Optimize Images for Mobile](/plugin/images/mobile-images)
* [Use an External Image URL](/plugin/images/external-images)
* [Using Animated GIFs](/plugin/images/animated-gifs)