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

# Upload and Edit Image

> Complete guide to uploading, replacing, and editing images on your website including background removal and image enhancement features

The image editing features allow you to work with images on your page in several ways, including: replacement, background removal.

<Steps>
  <Step title="Activate Selector">
    Start by opening the **Selector Mode** to begin editing. This mode allows you to select elements on your page.

    <Frame>
      <img src="https://mintcdn.com/readdy/nqmPdjxjPI7bzvIQ/images/edit-selector-activation.png?fit=max&auto=format&n=nqmPdjxjPI7bzvIQ&q=85&s=95f9ea1b82898d31b5cbed139d3f12a0" alt="Selector Mode activation interface" width="3148" height="2012" data-path="images/edit-selector-activation.png" />
    </Frame>
  </Step>

  <Step title="Select Your Image">
    Click on any image you'd like to modify. The selected image will be highlighted.

    <Frame>
      <img src="https://mintcdn.com/readdy/nqmPdjxjPI7bzvIQ/images/edit-image-replace.png?fit=max&auto=format&n=nqmPdjxjPI7bzvIQ&q=85&s=0e924c4cfad108490cbcdef1056c5037" alt="Image replacement process" width="3150" height="2014" data-path="images/edit-image-replace.png" />
    </Frame>
  </Step>
</Steps>

### Replace (Upload) Your Images

Use Selector Mode to click on any image, select **Image** > **Replace**, then upload your new image to replace it instantly.

### Background remove

Remove backgrounds from images to create transparent backgrounds. This works well for product photos and portraits.
Select the image, choose **Image** > **Remove BG**, then proceed with Remove Background and Apply operations.

<Info>
  Background remove costs **10 credits** per operation.
</Info>

<Frame>
  <img src="https://mintcdn.com/readdy/nqmPdjxjPI7bzvIQ/images/edit-image-background-remove.png?fit=max&auto=format&n=nqmPdjxjPI7bzvIQ&q=85&s=e6bc9b061cc502c03ea7a379cdca9031" alt="Before and after comparison of background remove" width="3152" height="2014" data-path="images/edit-image-background-remove.png" />
</Frame>

**Example:**

<Frame>
  <img src="https://mintcdn.com/readdy/nqmPdjxjPI7bzvIQ/images/edit-image-removebg-example1.png?fit=max&auto=format&n=nqmPdjxjPI7bzvIQ&q=85&s=9753c00a9b4ae363653009b5f2c1bffd" alt="background remove example" width="2000" height="1200" data-path="images/edit-image-removebg-example1.png" />

  <img src="https://mintcdn.com/readdy/nqmPdjxjPI7bzvIQ/images/edit-image-removebg-example2.png?fit=max&auto=format&n=nqmPdjxjPI7bzvIQ&q=85&s=25c159e882d3a81552052a378c03d1c2" alt="background remove example" width="2000" height="1200" data-path="images/edit-image-removebg-example2.png" />
</Frame>

### Background Generation

Generate new backgrounds for product images using AI. Select the image, choose **Image** > **Gen BG**, then enter your prompt and click Generate.

<Info>
  Background generation costs **50 credits** per operation.
</Info>

<Frame>
  <img src="https://mintcdn.com/readdy/nqmPdjxjPI7bzvIQ/images/edit-image-background-generat.png?fit=max&auto=format&n=nqmPdjxjPI7bzvIQ&q=85&s=371d9f6d1514578a27119631fe6489f5" alt="Examples of AI-generated backgrounds" width="3150" height="2012" data-path="images/edit-image-background-generat.png" />
</Frame>

**Example Prompts:**

<Accordion title="Example 1: Sneaker with Dark Background">
  **Prompt:** "Create a dark, moody background to emphasize the sneaker. Incorporate floating black rocks around it, adding a sense of depth. Use a gradient from black to dark green to enhance the dramatic effect. Soft lighting should highlight the shoe's unique design and texture, creating a bold, adventurous vibe."

  <Frame>
    <img src="https://mintcdn.com/readdy/nqmPdjxjPI7bzvIQ/images/edit-image-example-sneaker.png?fit=max&auto=format&n=nqmPdjxjPI7bzvIQ&q=85&s=45c050e9fd33df6f6923277a58b1206b" alt="Sneaker with dark generated background" width="2000" height="1200" data-path="images/edit-image-example-sneaker.png" />
  </Frame>
</Accordion>

<Accordion title="Example 2: Wine Glass with Warm Setting">
  **Prompt:** "Create a warm, rustic background with soft, blurred textures resembling a cozy wooden surface. Position the wine glass prominently, allowing the light to catch its contours and reflections. Use gentle lighting to enhance the glass's clarity."

  <Frame>
    <img src="https://mintcdn.com/readdy/nqmPdjxjPI7bzvIQ/images/edit-image-example-wine-glass.png?fit=max&auto=format&n=nqmPdjxjPI7bzvIQ&q=85&s=3d3b18ad52cb3627ece38072f9e68960" alt="Wine glass with warm background" width="2000" height="1200" data-path="images/edit-image-example-wine-glass.png" />
  </Frame>
</Accordion>

<Accordion title="Example 3: Headphones with Minimalist Background">
  **Prompt:** "Create a minimalist background with a soft gradient from light gray to dark gray. Position the headphones on a rugged rock formation, emphasizing their sleek design. Use subtle lighting to highlight the headphones' contours and textures, creating a modern and sophisticated atmosphere."

  <Frame>
    <img src="https://mintcdn.com/readdy/nqmPdjxjPI7bzvIQ/images/edit-image-example-headphones.png?fit=max&auto=format&n=nqmPdjxjPI7bzvIQ&q=85&s=c5f07c1935ccb489c12eaede36779a34" alt="Headphones with minimalist background" width="2000" height="1200" data-path="images/edit-image-example-headphones.png" />
  </Frame>
</Accordion>
