Why Your Notion Images Break on Webflow (And How to Fix It)

You set up a Notion-to-Webflow sync. Everything looks great. Images load, content is in the right place, the site is live. Then you check back the next morning and half your images are broken. The alt text shows, the layout is intact, but the actual images are gone. Just empty boxes where your hero images and thumbnails used to be.

This is the single most common issue people hit when connecting Notion to Webflow. It is not a bug in your setup. It is not a flaky API. It is a fundamental design decision in how Notion handles file URLs — and most sync tools do not account for it.

Why Notion Image URLs Expire

Notion stores uploaded images on Amazon S3. When you request a page or database item through the Notion API, the image URLs you get back are not permanent links. They are signed URLs — temporary, authenticated links that grant access to the file for a limited time.

That time limit is approximately one hour.

This is a deliberate security measure. Signed URLs prevent hotlinking — no one can grab your image URL and embed it on their own site indefinitely. They also prevent unauthorized access to files in private workspaces. Every time you or a tool requests the page, Notion generates a fresh signed URL. The old one expires and stops working.

The Notion API documentation states this explicitly: "File URLs returned by the Notion API are temporary and will expire." This applies to all file types — images, PDFs, attachments — stored in Notion's native file hosting. External URLs (links to images hosted elsewhere, like Unsplash or your own CDN) are not affected because Notion is just storing the URL string, not the file itself.

The practical consequence: any tool that reads an image URL from Notion and stores that URL directly in Webflow is storing a link that will break within the hour. The sync looks successful at the moment it runs. The site looks fine. But the clock is already ticking.

Why Existing Tools Struggle with This

Most Notion-to-Webflow sync approaches store the raw Notion URL in the Webflow CMS Image field. This is the fastest way to move data, but it guarantees broken images.

• Zapier and Make — the standard Notion-to-Webflow Zap or Make scenario reads the image URL from a Notion property and writes it to a Webflow CMS field. This works for approximately one hour. After that, the URL expires and the image disappears from your live site. The automation ran successfully — the data was transferred — but the data itself has a built-in expiration date that the automation does not account for.
• Whalesync — documents image URL expiry as a known limitation in their help docs. The tool syncs the URL as-is and acknowledges that Notion's temporary URLs cause images to break over time.
• Dedicated sync tools — some handle image re-hosting for database property images (cover images, Files & Media fields) but have limitations with inline images embedded within rich text blocks or page content.
• One-time export tools — tools like Cloudpress handle images well during export (downloading, converting to WebP, uploading to Webflow) but are designed for one-time content migration, not continuous sync. If you update the image in Notion, you need to re-export manually.
• Manual workflow — download every image from Notion, upload it to Webflow's Asset Manager, then reference the permanent Webflow URL in your CMS item. This works and produces permanent URLs. It also does not scale past a handful of items.

What Image Re-Hosting Actually Means

The fix is conceptually simple: do not store the Notion URL. Instead, download the actual image file from Notion while the temporary URL is still valid, upload it to a permanent location, and store that permanent URL in Webflow.

This is image re-hosting. The image moves from Notion's temporary storage to Webflow's permanent Asset Manager. The URL in your CMS item points to Webflow's CDN, not Notion's signed S3 link. It never expires.

The concept is simple. The implementation has enough edge cases to trip up anyone who tries to build it themselves.

How Trellis Handles It

Trellis includes an automated image re-hosting pipeline as part of every Notion-to-Webflow sync. Here is what happens when a sync runs:

• Detection — Trellis scans all mapped fields on each Notion database item and identifies every image reference. This includes cover images, Files & Media property values, and any other file-type properties.
• Download — for each detected image, Trellis downloads the file from Notion's temporary URL immediately, while the signed link is still valid. The download happens server-side during the sync process — there is no window where a user needs to act before the URL expires.
• Upload to Webflow — the downloaded image is uploaded to Webflow's Asset Manager via the Webflow API. This creates a permanent, CDN-backed URL that does not expire.
• Permanent URL storage — the Webflow asset URL is stored in the CMS item's Image field. This is the URL your live site uses. It points to Webflow's infrastructure, not Notion's.
• Asset mapping — Trellis maintains a mapping between each Notion image (identified by its block or property ID) and the corresponding Webflow asset ID. On subsequent syncs, this mapping tells Trellis whether the image has already been re-hosted or needs to be processed again.
• Change detection — on re-sync, Trellis checks whether the image content has actually changed using a hash comparison. If the image is the same as last time, there is no need to re-download and re-upload. This saves bandwidth, reduces API calls, and speeds up incremental syncs.

The result: your Webflow site always has working images, regardless of how long ago the sync ran. The temporary nature of Notion's URLs is handled entirely behind the scenes.

Edge Cases That Matter

Image re-hosting sounds straightforward until you hit the details. These are the edge cases that break simpler implementations and that Trellis handles deliberately.

Cover images vs. inline images

Notion databases have two places where images appear. Cover images are a first-class database property — they show up in the API response as a property on the database item. These sync cleanly because they are part of the structured schema.

Inline images are different. These are images embedded inside the body of a Notion page, within the block content. Accessing them requires traversing the page's block tree via additional API calls. They are not part of the database schema — they are part of the page content. Re-hosting inline images requires deeper integration with the Notion Blocks API, not just the Database API.

File size limits

Notion accepts images of virtually any size. Webflow has a 4MB limit per image on most plans. If someone uploads a 12MB uncompressed PNG as their blog post hero image in Notion, a naive sync would fail when trying to upload it to Webflow. Trellis compresses and optimizes images during the transfer step, ensuring they meet Webflow's size requirements without visible quality loss.

Alt text and captions

Notion supports captions on images — a text string displayed below the image. This is valuable content for accessibility and SEO. Trellis maps Notion image captions to Webflow's alt text field automatically, so your re-hosted images retain their descriptive text. This is a detail that manual re-hosting workflows almost always skip.

Multiple images in a single property

Notion's Files & Media property can hold multiple files — several images attached to a single database item property. Webflow's Image field holds exactly one image. There is a mismatch. Trellis resolves this by using the first image for single Image fields in Webflow. For use cases that need all images (like a product gallery), Trellis can create companion collection items that hold the additional images, linked back via Reference fields.

What You Can Do Right Now

If you are currently dealing with broken Notion images on your Webflow site, here are your options depending on your setup.

If you are using Zapier or Make

You can add a step between "Read Notion property" and "Write to Webflow" that downloads the image and uploads it to Webflow's Asset Manager. This requires using the Webflow API directly, typically via a "Code by Zapier" step or a custom HTTP request in Make. You will need to handle the file download, the Webflow asset upload API call, and extract the permanent URL from the upload response before writing it to the CMS item. It works, but it turns a two-step automation into a multi-step pipeline with custom code.

If you are doing it manually

Download all images from Notion to your local machine. Upload them to Webflow via the Asset Manager's drag-and-drop interface. Copy the permanent Webflow asset URLs and paste them into the corresponding CMS item Image fields. This gives you permanent URLs that never expire. For five blog posts, this takes ten minutes. For fifty items updated weekly, it becomes a part-time job.

The scaling threshold

The manual and semi-automated workarounds are viable for small sites with infrequent updates. Once you cross roughly 20 to 30 CMS items with images that update on a regular schedule, the time cost of manual re-hosting exceeds the cost of a tool that handles it automatically. The workarounds do not break — they just stop being worth the effort.

How This Fits Into the Bigger Picture

Image expiry is the most visible symptom of a deeper issue: Notion's API was designed for reading content into applications, not for serving content directly to end users. The temporary URLs, the rate limits (about 3 requests per second), the block-level pagination — all of these are designed for app-to-app communication, not for powering a live website.

A proper Notion-to-Webflow sync needs to account for this. It needs to treat Notion as a content source that you pull from and transform, not a CDN that you link to. Images are the most obvious case, but the same principle applies to rich text formatting, relational data, and multi-select values. The sync is a transformation pipeline, not a URL forwarding service.

For the full walkthrough on connecting Notion to Webflow — including field mapping, sync rules, and what does and does not transfer — see the complete Notion-to-Webflow guide. For details on how Trellis handles image processing across all connectors, see the image handling documentation. And for Notion-specific connector details, see the Notion connector docs.

See pricing or try it free.