How to Link an Image in Webflow

To link an image in Webflow, place the Image element inside a Link block, then configure the Link block’s destination in Element settings. The image becomes clickable because the wrapper supplies the link behavior.

Quick steps

Open your project in Webflow Designer.
Open the Elements panel and drag a Link block onto the canvas.
Drag your image into the Link block. If the image already exists, move it into the Link block using the canvas or Navigator.
Select the Link block, not only the image.
Open Element settings by pressing D.
Choose the destination type, enter the destination, and enable Open in a new tab only when it helps the user.
Preview or publish the page and click the image to verify the destination.

Webflow Link blocks can contain almost any element, including an Image element, but they cannot contain another link. Configure the wrapper because that is the element that owns the link settings.

Choose the right destination

Goal	Link setting	What to enter
Send visitors to another website	URL	A complete address such as `https://example.com/pricing`
Open a page in this Webflow project	Page or URL	Select the page or use its internal path
Link a CMS card to its detail page	Collection page	Select the relevant Collection page
Start a phone call	Phone	A phone number in the phone destination field
Let visitors view or download a document	File	Select the uploaded file

Webflow’s link settings also expose behavior choices such as same-tab versus new-tab opening. Linked images and files open in the same tab by default. Use a new tab when the destination is an external site or a document that visitors may want to keep open alongside your page.

Detailed setup in the Designer

1. Add or find the image

For a new image, add an Image element from the Elements panel and choose an asset. For an existing image, locate it in the Navigator so you can move it into the correct wrapper without changing its styles.

2. Insert a Link block

Drag a Link block into the layout where the image should appear. A Link block is a flexible layout element whose contents become one link. Set its display mode, width, height, padding, and hover styles as needed.

3. Put the image inside the Link block

Drag the image until Webflow shows the Link block as the drop target. The Navigator should show the Image nested under the Link block. If the image is already on the page, you can also cut and paste it into the Link block.

4. Configure the wrapper

Select the Link block in the canvas or Navigator. Open Element settings and choose the destination. Selecting only the child image can make it look as if the link is missing because the image itself does not hold the destination.

5. Set interaction and visual states

Use the Link block’s hover state to change opacity, add a border, or show another visual cue. Keep the whole image area clickable and preserve a visible keyboard focus style. Avoid effects that make the image look disabled or that reduce contrast.

6. Verify every breakpoint

Check desktop, tablet, and phone breakpoints. Confirm that the image remains inside the Link block, the clickable area has the intended size, and no neighboring element overlaps it. Test with keyboard navigation as well as a pointer.

CMS images and dynamic links

For a Collection List or Collection Page, bind the Image element to an image field with Get image from. Place that CMS-bound image inside a Link block and choose the relevant Collection page as the destination. This makes each thumbnail point to its own item.

For accessible CMS images, add a plain-text alt-text field to the Collection and enable Get Alt Text from on the Image element. Store a concise description or the image’s purpose in that field. If the image is decorative, Webflow provides a Decorative option, but an image-only link still needs another meaningful accessible name.

Accessibility checklist

Write alt text that explains the image’s meaning or the link’s purpose. Do not begin with “image of” or “picture of.”
For an image-only link, make the alt text specific enough for someone using a screen reader to understand where the link goes.
Do not leave an image-only Link block empty. Webflow’s Audit panel can flag links without meaningful text or image alt text.
Do not place a text link, button link, or another Link block inside the image’s Link block. Nested links are invalid and Webflow may prevent the conversion.
Keep a visible focus indicator for keyboard users.
Make the clickable area large enough on touch screens and avoid placing another interactive element directly over it.

Common mistakes and fixes

Symptom	Cause	Fix
The image does not click	The destination was set on the wrong element.	Select the Link block wrapper and configure Element settings.
Webflow refuses to convert a Div to a Link block	The Div contains another link.	Remove or move the nested link before converting it.
The entire card is not clickable	The image is outside the Link block or the wrapper has no size.	Move the image inside the wrapper and check the wrapper’s layout and dimensions.
The link opens the wrong page	An old URL, slug, or CMS target is still configured.	Reopen Element settings, replace the destination, then preview the published URL.
Alt text is missing	The image field has no alt text or the CMS field is not bound.	Add meaningful alt text or bind the Collection’s alt-text field.
A new tab is unwanted	Open in a new tab is enabled unnecessarily.	Turn it off unless a separate tab clearly benefits the visitor.
The image looks like a plain image	No hover or focus styling indicates interactivity.	Add a subtle hover state and a clear keyboard focus style.

Performance and behavior details

For an ordinary linked image, leave link preloading at its default behavior. Webflow documents Prefetch and Prerender options, but they can consume browser resources for a page the visitor never opens. Prefetch may be useful for a destination that most visitors will open next; reserve prerender for a high-priority link where the extra work is justified.

Optimize the image asset before upload, use an appropriate responsive size, and avoid making a very large image the only clickable target on a mobile layout. These changes affect page weight and interaction speed without changing the link configuration.

Or skip the browser setup

If your goal is to generate screenshots of the linked pages rather than configure the link manually, ScreenshotNeo provides a website screenshot API and MCP server. One request returns a PNG, JPEG, WebP, or PDF.

curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://webflow.com -o shot.webp

import requests
r = requests.get("https://api.screenshotneo.com/v1/shot", params={"access_key": "YOUR_API_KEY", "url": "https://webflow.com"}, timeout=90)
open("shot.webp", "wb").write(r.content)

const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://webflow.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);

See the ScreenshotNeo API documentation for the complete parameter list. Cookie banners, newsletter popups, and chat widgets are removed before the shot. Bot checks, blank pages, failed loads, timeouts, and cache hits are not billed, and response headers identify the page verdict and billing status. An MCP server lets AI agents use take_screenshot, get_page_info, and capture_pdf. The free plan includes 1,000 screenshots per month with no card; paid plans start at $5 for 3,000 screenshots. Create a free ScreenshotNeo account.

FAQ

Can I make an image link to a CMS item?

Yes. Bind the image to the Collection image field, place it inside a Link block, and choose the Collection page destination.

Can I link a background image?

A background image belongs to a section or Div rather than an Image element. Link the containing structure and provide an accessible name that communicates the destination.

Can I add an href as a custom attribute?

No. Use a native Link block or another Webflow link element; adding an href custom attribute to an ordinary element does not make it behave as a link.

Should every linked image open in a new tab?

No. Same-tab navigation is the default and is usually clearest for internal pages. Use a new tab selectively for external destinations or files.