5d:I[333483,["/creators-assets/_next/static/immutable/chunks/356g_j0l71_46.js","/creators-assets/_next/static/immutable/chunks/15s1ft4k9lx-7.js","/creators-assets/_next/static/immutable/chunks/0x8sumr53pdkk.js","/creators-assets/_next/static/immutable/chunks/3pud1dqsw0-_7.js","/creators-assets/_next/static/immutable/chunks/1m75iqpnspynu.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/3ohf-5_4hfjuq.js","/creators-assets/_next/static/immutable/chunks/2jjhfe7-w6y9a.js","/creators-assets/_next/static/immutable/chunks/325i2v5l4tnlq.js","/creators-assets/_next/static/immutable/chunks/0kisxyo3aw231.js","/creators-assets/_next/static/immutable/chunks/2b1mm8iiske-y.js","/creators-assets/_next/static/immutable/chunks/0i7m0zg6jfazw.js","/creators-assets/_next/static/immutable/chunks/3-hmotkz_bdv_.js","/creators-assets/_next/static/immutable/chunks/06bqtx1jsc1kz.js","/creators-assets/_next/static/immutable/chunks/3q5wansxm4vp6.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/3naniu4pnqfyw.js","/creators-assets/_next/static/immutable/chunks/2-y_r3u4wh2s3.js","/creators-assets/_next/static/immutable/chunks/456d4lcv9-syj.js","/creators-assets/_next/static/immutable/chunks/36-o7-3julke0.js","/creators-assets/_next/static/immutable/chunks/2xq6uu2rcdc2i.js","/creators-assets/_next/static/immutable/chunks/2y9gv91n8o3i9.js","/creators-assets/_next/static/immutable/chunks/41i4r4u9uolgz.js","/creators-assets/_next/static/immutable/chunks/02ciyo_cdpkrz.js","/creators-assets/_next/static/immutable/chunks/3e73rezw4k1a2.js","/creators-assets/_next/static/immutable/chunks/15q00pdqk0br3.js","/creators-assets/_next/static/immutable/chunks/293prjxu_wz0c.js","/creators-assets/_next/static/immutable/chunks/0l9v835j421-s.js","/creators-assets/_next/static/immutable/chunks/40oma2w708rd-.js","/creators-assets/_next/static/immutable/chunks/2x7-2b3jcc9x7.js","/creators-assets/_next/static/immutable/chunks/3_pg4jxj9aiiw.js","/creators-assets/_next/static/immutable/chunks/3k6sa9ujkqb5c.js","/creators-assets/_next/static/immutable/chunks/3l2h8slpbzxqo.js","/creators-assets/_next/static/immutable/chunks/2xgtw4s-tlhet.js","/creators-assets/_next/static/immutable/chunks/3b306xa-3tb7g.js","/creators-assets/_next/static/immutable/chunks/2fvzgkzqkig_w.js","/creators-assets/_next/static/immutable/chunks/3g6klxxyg4m8-.js","/creators-assets/_next/static/immutable/chunks/0qx5rzvbsd7bx.js","/creators-assets/_next/static/immutable/chunks/1cphzzg2t2qo2.js"],"PostDetailCard"] 5e:Taff,

Load images from any external URL in your Framer CMS — without touching Framer's bandwidth limits.

Every image you upload to Framer eats into your bandwidth plan.

Framer's Pro plan gives you 100 GB/month. Sounds like a lot — until you're running a portfolio, a blog, or an e-commerce site with hundreds of product photos. Then you're either compressing everything into mush or paying $100/month for Scale.

Advanced Embed Image gives you a third option: load images from an external URL. They never touch Framer's bandwidth. Your plan stays clean.

How it works

Instead of uploading an image into Framer directly, you store it on an external CDN — like Cloudflare R2, S3, or any image hosting service — and paste the URL into this component.

Framer displays the image exactly as you'd expect. Your visitors see nothing different. But the bandwidth comes from your CDN, not from Framer.

For CMS-driven sites, it's even cleaner: connect the Image URL property directly to a field in your Framer collection. Every CMS item gets its own image, served externally, automatically.

What's included

External image loading — paste any URL, the component renders it
CMS-ready — bind Image URL, ThumbHash, and Alt Text directly to Framer collection fields
Fixed sizing — stable, predictable layout with zero edge cases or unexpected shifts
Alt text support — built-in accessibility and SEO, no workarounds needed
Shimmer loading state — optional animated placeholder while the image loads, so visitors always see something instead of a blank box
ThumbHash support — store a tiny blur-up preview hash alongside your image URL in the CMS. While the real image loads, visitors see a pixel-perfect blurry preview instead of nothing. Generate hashes at giga.tools
Smart fallback — set a custom fallback image that appears when the URL is missing or broken. Never a broken image icon, ever
Lightweight — no external dependencies, no effect on your Framer project file size or editor performance

Who it's for

Framer sites with lots of images: portfolios, blogs, product catalogs
Anyone approaching their monthly bandwidth limit
Teams managing images through an external CDN or image service
Projects where editor speed matters — large image libraries slow Framer's canvas down

Not for you if…

Your site has a handful of static images and you're nowhere near your bandwidth limit. This component is built for people who deal with images at volume.

5a:[["$","$L5d",null,{"post":{"id":"019a05f4-bd9b-7b03-8c1e-36ac80affac2","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"59237a1d-fe02-4c35-bdc9-7d757e8f1065","name":"Iaroslav","slug":"iaroslav-vinokurov","avatar":"https://framerusercontent.com/avatars/users/59237a1d-fe02-4c35-bdc9-7d757e8f1065/z_6ikyLlr","badges":["expert"],"followed":false,"followsYou":false},"media":[],"resources":[{"id":"4CDVavGYSJbFgCnSCs92","resolved":true,"title":"Advanced Embed Image","body":"$5e","bodyJson":null,"introduction":"External URLs to your CMS images","slug":"advanced-embed-image","author":{"framerUserId":"59237a1d-fe02-4c35-bdc9-7d757e8f1065","name":"Iaroslav","slug":"iaroslav-vinokurov","avatar":"https://framerusercontent.com/avatars/users/59237a1d-fe02-4c35-bdc9-7d757e8f1065/z_6ikyLlr","badges":["expert"],"followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/4CDVavGYSJbFgCnSCs92/advanced-embed-image-C537aARwdkWIGRHulOFXmfLzMEExmb","metadata":{"tint":{"h":0,"s":0,"l":57},"width":1600,"height":1200}}],"post":null,"createdAt":"2025-10-02T15:47:57.099Z","updatedAt":"2026-05-01T21:13:22.435Z","publishedAt":"2025-10-21T08:48:36.763Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://forceful-department-465085.framer.app/","price":"7","paymentUrl":"https://iaroslavv.gumroad.com/l/adv-embed-image","workshop":false,"categories":[{"id":"b42eea44-0ea9-4372-9981-70c9e68577c1","name":"Loaders","slug":"loaders"}],"lastSaveId":"a3rB4xdNoAmcbKeTiliw","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":2,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2025-10-21T08:48:36.763Z","updatedAt":"2025-10-21T08:48:36.763Z","reported":false}}],"$L5f"]

Suggested for you