How to replace images?

Summary

Replacing images in your Clonable clone is quick and flexible. You can swap images directly on the page using the editor, or define permanent image replacement rules. This article explains both methods, when to use each one, and what to keep in mind for caching, lazy loading, and responsive images.

FAQ

Can I replace images without editing my original website?

Yes. All image replacements apply only to the clone.

Are image replacements applied instantly?

Yes. Changes are visible almost immediately.

Can I undo an image replacement?

Yes. You can edit or remove the rule at any time.

⏱️ Reading time: 6–8 minutes

Replacing images using the editor

The easiest way to replace an image is directly on the page using the Clone Editor.

How it works

Open the Clone Editor from the control panel.
Go to the page where the image appears.
Hover over the image you want to replace.
An orange image button appears on top of the image.
Click the button to open the image replacement window.

Setting a new image

In the image editor window:

Paste the full URL of the new image into New image path.
Make sure the URL is complete and publicly accessible.
Click Save.

Media replacement

The image is replaced immediately on the page.

Make sure the new image is the same size as the original image.

Tip: Use the editor for quick visual changes or one-off image replacements.

Replacing images using Media replacement rules

For more control, or when you want reusable rules, you can use Media replacements in the Translations settings.

Where to find image replacement rules

Go to your clone settings.
Open Translations settings.
Click the Media replacement tab.

Creating an image replacement rule

Each rule consists of two fields:

Original image path – The path or URL of the original image without the domain name.
New image source – The full URL of the replacement image including the domain name.
Click Add to activate the rule.
The rule is applied immediately.

You can delete a rule at any time by clicking the red cross next to it.

Image processing time and caching

Image replacements have virtually no delay. Changes are usually visible instantly.

Some websites use browser caching. If you do not see the change, refresh the page with CTRL + F5 to bypass the cache.

How image paths are normalized

Clonable automatically normalizes original image paths.

This means:

The domain name is removed.
A leading slash may be removed.
Protocol differences do not matter.

Example:

https://example.com/images/logo.jpg becomes

images/logo.jpg

This ensures the rule works regardless of how the image is referenced in the source code.

JavaScript-based lazy-loaded images

Image replacement rules only work on standard image attributes:

src
srcset
data-src
data-srcset

If your website uses JavaScript-based lazy loading with different attributes, image replacement rules may not work.

In this case, use regular substitution rules instead of image replacement rules.

Responsive images

If your website uses responsive images with multiple sizes, Clonable can detect them automatically.

Supported naming patterns:

image-100x100.jpg
image_100x100.jpg

If these patterns are used:

You only need to add a rule for image.jpg.
The replacement image must exist in the same sizes and follow the same naming convention.

Replacing a logo

In this example, we replace a website logo.

Step 1: copy the original image URL

Right-click the logo on the website.
Click Copy image link (wording may vary by browser).

Step 2: create the replacement rule

Paste the copied link into Original image path.
Paste the new logo URL into New image source.
Click Add.

Step 3: verify the result

Refresh the page.

The new logo now appears in place of the original image.