> ## 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.

# Optimize Images for Mobile

> Resize, pad, hide, or swap email images for mobile while keeping them sharp and correctly proportioned

Desktop images often need different spacing or dimensions on a narrow screen. Use Mobile Styles to adjust the image without changing the desktop design.

## Adjust an image for mobile

<Steps>
  <Step title="Select the image block">
    Select the `mj-image-Frame` or image in the Figma Layers panel.
  </Step>

  <Step title="Open Mobile Styles">
    Open the **Mobile Styles** tab in the plugin.
  </Step>

  <Step title="Set the mobile treatment">
    Adjust the width, height, padding, or visibility for mobile. Keep the original aspect ratio unless the mobile design intentionally uses a different crop.
  </Step>

  <Step title="Preview a narrow device">
    Open Preview and choose a narrow phone width. Check the image together with the text and button around it.
  </Step>
</Steps>

## Choose the right treatment

### Let it scale

Use the same image when the subject remains clear at a smaller width. This is the simplest option for logos, product photos, and full-width heroes with a clear focal point.

### Add mobile padding

Add left and right padding when an image feels too wide or touches the viewport edge. Keep the padding consistent with the text blocks around it.

### Use a mobile-specific crop

Use a different image when the desktop crop becomes unreadable on a phone. A tall or square crop often works better than a wide banner. Follow [Show or Hide Content](/plugin/mobile/show-hide-content) if you build separate desktop and mobile blocks.

### Hide the image

Hide an image only when the message still makes sense without it. Hidden content remains in the email HTML and may still be downloaded by some clients, so hiding an image is not a reliable performance optimization.

## Keep images sharp

Provide source images at 2x their displayed dimensions. A 320px-wide mobile image should have a source around 640px wide.

Do not make the image frame larger than the source asset. The plugin can scale an image down cleanly, but scaling a small image up makes it blurry.

## Common problems

### The image looks stretched

The mobile width and height do not match the source aspect ratio. Remove one override or calculate the matching dimension.

### The subject is cropped out

The desktop focal point does not work on mobile. Use a mobile-specific crop rather than forcing the wide image into a narrow box.

### The image still appears on one device

Confirm whether you hid the `mj-image-Frame` or only the image inside it. Preview both sides of your custom [mobile breakpoint](/plugin/mobile/styles-tab#setting-a-custom-mobile-breakpoint).

## Related articles

* [Mobile Optimization](/plugin/mobile/overview)
* [The Mobile Styles Tab](/plugin/mobile/styles-tab)
* [Adding Images to an Email](/plugin/images/add-images)
* [Show or Hide Content](/plugin/mobile/show-hide-content)