How do you make an interactive image?

Upload the image to Interactive Image, click on the image to place hotspots, write the popup content for each hotspot, and paste the iframe embed into your website. The whole process takes under five minutes for a simple image.

How do you make an image interactive on a website?

Use a hotspot tool like Interactive Image to add clickable regions on the image, then paste the iframe snippet into your website builder. Wix, Webflow, WordPress, Shopify, and Squarespace all accept iframe embeds.

Can I make an interactive image in HTML directly?

You can hand-write a element with tags, but the coordinates are pixel-based and break on responsive sites. A hosted tool like Interactive Image gives you percentage-based positions and a single iframe that stays responsive.

What image size, resolution, or aspect ratio should I use?

Use the image at the resolution and crop you actually want visitors to see — there's no ideal size to hit. Larger source images give hotspots more room so tightly-packed markers don't overlap, but anything a browser can display works. Avoid upscaling a small image just to fit more hotspots; it just adds blur.

Should I compress the image first?

Yes if the file is several megabytes — a reasonably compressed JPG or WebP loads faster inside the embed with no visible quality loss. There's no hard file-size limit, but a lighter file means a faster first paint for visitors.

Can I crop or replace the image after placing hotspots?

Avoid it. Hotspot positions are stored as percentages of the image's frame, so cropping shifts what each percentage points at and every marker lands somewhere new. If you need a different crop, re-place the hotspots after swapping the image.

Should popups open on hover, click, or tap?

Hover works well on desktop for quick previews, but every touch device needs tap since there's no hover state on a phone. Interactive Image detects the device and switches automatically — hover-to-preview on a mouse, tap-to-open on touch — so you don't have to choose one globally.

Do hotspots stay aligned on every screen size?

Yes, because their position is stored as an x/y percentage of the image rather than a fixed pixel coordinate. A hotspot at 50%, 50% sits at the image's center whether it renders at 1600px on a desktop or 380px on a phone — no separate mobile version to maintain.

What can go in a hotspot's popup?

A title, a paragraph of description text, an optional photo or short video, and an optional CTA button that links out or scrolls elsewhere on your site. You don't have to fill in every field — a title alone is a valid, lightweight hotspot.

How do I embed the interactive image on Wix, WordPress, Webflow, Shopify, or Squarespace?

Paste the iframe snippet into an HTML/embed block on each platform. See the dedicated guides for exact steps on Wix, WordPress, Webflow, Shopify, and Squarespace.

Is the finished interactive image accessible and keyboard-navigable?

Hotspots are reachable with Tab, show a visible focus outline, and open their card with Enter or Space — not hover alone — so keyboard and screen-reader users can navigate the same content as mouse users.

Does embedding an interactive image hurt my page's SEO?

The iframe's content isn't part of your page's crawlable HTML, so it shouldn't be your only copy on a topic — keep real headings and text around the embed, and give the source image descriptive alt text.

How to

How to make an interactive image.

A five-minute guide to turning any picture into a clickable, hotspot-driven experience — then embedding it on any website.

Start free What is an interactive image?

Free forever plan · No credit card · Works in Wix, Webflow, WordPress, Shopify, Squarespace

The finished interactive image live on a website

The five steps

Sign up for free. Create a free Interactive Image account. No credit card required.
Upload your image. Drag your product photo, diagram, render, or floor plan into the editor at its original resolution and aspect ratio.
Click to place hotspots. Click anywhere on the image to drop a hotspot. Drag it to fine-tune the position — positions save as percentages, not pixels.
Write the popup content. Give each hotspot a title, description, and — optionally — an image, video, or CTA button.
Copy the iframe. Open the Embed panel, copy the single iframe snippet, and paste it into any website that accepts HTML.

Uploading an image into a new Interactive Image project

Preparing the image: resolution, aspect ratio, and file size

Resolution: use what you already have — higher resolution just gives dense diagrams more room between markers.
Aspect ratio: keep the crop you intend visitors to see; the embed derives its height from the image's own ratio, so any ratio works.
File size: compress large photos before uploading for a faster first load — there's no strict limit, but lighter loads faster.
Never crop after placing hotspots — positions are percentages of the current frame, and a new crop moves what every percentage refers to.

Placing hotspots so they stay aligned everywhere

Each hotspot is stored as an x/y percentage of the image, not a pixel coordinate. That's the difference between an interactive image and a raw HTML <map> — a percentage-based hotspot at 30%, 60% is always 30% across and 60% down the image, on a 4K monitor or a small phone, with nothing to recalculate. See the responsive image map generator for the underlying math, and how to add hotspots to an image for marker styles.

Placing and styling hotspots on the uploaded image

Hover, click, or tap?

On desktop, hover is a fast way to preview content without a click. On touch devices there's no hover state, so hotspots become tap targets and the card opens as a full-width panel instead of a small tooltip. Interactive Image switches automatically based on the visitor's device, so you configure the hotspot content once.

What image should you use?

Product photography, 3D renders, architectural drawings, floor plans, infographics, screenshots, and diagrams all work. Higher-resolution images give you more room to place fine-grained hotspots without them crowding each other.

Embedding the finished image

Anywhere that accepts an iframe: Ghost, Notion embeds, Framer, custom pages, internal tools, email landing pages, and every major website builder. Platform-specific steps:

The same source updates every place the iframe is pasted.

Copying the iframe embed snippet after publishing

Accessibility and SEO basics

Hotspots are focusable with Tab and open on Enter or Space, not hover alone — see the accessibility guide. Because the embed is an iframe, its content sits outside your page's own HTML, so keep the surrounding page's headings and copy substantive; details are in the image map SEO guide.

Common mistakes and how to fix them

Mistake	Fix
Cropping the image after placing hotspots	Re-place hotspots after any crop change, or crop before you start
Using fixed pixel coordinates from an old image map	Re-click the points — Interactive Image saves them as percentages automatically
Popups that only work on hover	Let the tool switch to tap on touch devices instead of hard-coding hover
Overlapping hotspots on a dense diagram	Use a higher-resolution source image, or split into two images
Forgetting the CTA link on a shoppable hotspot	Add a CTA button pointing at the product or detail page

Frequently asked questions

How do I make an interactive image for free?

The Interactive Image free plan lets you publish one interactive image with a limited hotspot allowance. A small badge sits on the embed. Pro removes the badge and unlocks 500 images.

How do I make an interactive image in HTML?

Skip the raw <map>/<area> HTML — it is not responsive. Use Interactive Image to generate a single iframe that behaves correctly on every screen size.

Can I edit the interactive image after it's published?

Yes. Editing the image, hotspots, or popup content updates every place the iframe is embedded — there's nothing to republish or re-paste.

Turn any image into a guided experience.

Free forever plan. Paste one iframe into your site and ship.

Create your interactive image