Why are my CMS images not loading correctly after import?

Importing CMS items via CSV is efficient, but image issues are one of the most common problems that follow. Images may appear blank, broken, distorted, or take an unusually long time to load. The cause is almost always related to how the image URLs were formatted in the CSV or how Webflow processed them during import.

Common causes and fixes

1. Image URLs are not publicly accessible

For Webflow to import an image, the URL in your CSV must point to a publicly accessible file. If the URL requires authentication, lives behind a firewall, or has expired (as with temporary cloud storage links), Webflow cannot download it.

Fix: Open each image URL in an incognito/private browser window. If the image loads without logging in, the URL is accessible. If not, re-host the images on a public server or CDN before importing.

2. URLs point to HTML pages, not image files

Sometimes a URL looks like it leads to an image but actually resolves to an HTML page — common with Google Drive, Dropbox, and some CDN links where the share link redirects to a viewer rather than the raw file.

Fix: Use the direct file URL. For Dropbox, change ?dl=0 to ?raw=1. For Google Drive, use the export/download URL format. The URL should end in an image extension like .jpg, .png, .webp, or .gif whenever possible.

3. Images are in unsupported formats

Webflow supports JPG, PNG, GIF, WebP, and SVG for CMS image fields. Files in other formats (BMP, TIFF, HEIC, AVIF) will not import correctly.

Fix: Convert images to JPG, PNG, or WebP before hosting them and importing.

4. Images are too large

Webflow has asset size limits. If an image exceeds the maximum allowed size (typically 4 MB for CMS images), the import may silently fail or the image field may remain empty.

Fix: Compress images before importing. Aim for under 1 MB per image for web-optimized quality. Use tools like TinyPNG, Squoosh, or Sharp to batch-compress.

5. CSV column mapping is wrong

During import preview, if the image column was mapped to a non-image field (like Plain Text or Rich Text), the images won't render as expected.

Fix: Re-import the CSV and verify that the image column maps to the correct Image field in your Collection.

6. Imported items are still drafts

If images appear correctly in the CMS but not on the live site, the items may not be published yet.

Fix: Publish the CMS items. Draft items are not visible on the live site.

Verifying the fix

After addressing the issue:

1. Open a few imported items in the CMS and confirm the image field shows a thumbnail.
2. If the field is empty, manually upload the image for that item.
3. Publish the items and check the live page.
4. Use browser DevTools (Network tab) to confirm images are loading with 200 status codes.

Prevention tips

• Always test with a small batch (5–10 rows) before importing a large CSV.

• Host images on a reliable CDN with permanent URLs.

• Keep a local backup of all images referenced in the CSV.

• Use consistent image dimensions across your collection to avoid layout shifts.