The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started
Back to feedPost
Your images look crisp in Figma.
But blurry on your live site.
Webflow has two settings that fix this:
—
HiDPI IMAGE: Displays your image at half its pixel dimensions. 4000px upload → 2000px display. Doubles pixel density = sharp on Retina screens.
—
DISABLE RESPONSIVENESS: Webflow creates variants (500px to 3200px) and picks one based on viewport.
Sometimes it picks too small → blurry.
Disabling forces the full-res file to load.
—
THE CATCH:
Disabling responsiveness kills performance: ❌ Mobile loads massive files ❌ Page speed tanks ❌ SEO drops
—
THE BETTER FIX:
Compress before uploading (TinyPNG)
Export at 2x display size
Enable HiDPI
Keep responsiveness ON
Crisp images. Fast site. No tradeoff.
What's your image optimization workflow?
The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started
Related posts
I've seen it over and over, beautiful Figma designs, smooth Framer builds, then the site goes live and suddenly load times tank. Not because of bad code. Just because nobody stopped to think about image formats.
So I'm building something to fix that.
A plugin that lives inside your existing workflow, no extra tools, no manual conversion steps:
→ On Figma: export your assets directly as WebP, right from your design file
→ On Framer: compress and convert images to WebP before they ever hit production
Clean files. Faster sites. Better Core Web Vitals.
I'm building this for designers and developers who care about performance but don't want it to slow down their process. The best optimization is the one that happens automatically.
What's your current image workflow? Is this a pain point for you too?
This is badly needed. Image optimization is one of those silent killers of great builds.
Im running a quick A/B vote on the hero design. V1 uses an illustrated scene to feel friendly and product-led, while V2 uses a real ocean photo for a more premium, realistic vibe. Which one feels clearer, more trustworthy, and makes you more likely to hit “Join Waitlist”?
1 voted
13%
7 voted
87%
8 votes
Closed
Even though I really like illustrative web/UI designs, the real ocean photo makes it more relatable and visually adds a nice depth to design 👍
Can you believe I made this in seconds in Figma Make? 👀
Okay… not the final design. But the concept? Yes.
I’m currently building a digital product, and this is how I explore ideas before committing to the actual design.
♥️ 𝐖𝐡𝐚𝐭 𝐅𝐢𝐠𝐦𝐚 𝐌𝐚𝐤𝐞 𝐈𝐬 𝐁𝐞𝐬𝐭 𝐅𝐨𝐫
1️⃣ Early-stage concept testing
2️⃣ Generating multiple directions quickly
♥️ 𝐖𝐡𝐞𝐫𝐞 𝐈𝐭 𝐒𝐚𝐯𝐞𝐬 𝐓𝐢𝐦𝐞
1️⃣ Creating fast variations before committing
2️⃣ Speeding up directions exploration
𝑯𝒆𝒓𝒆’𝒔 𝒎𝒚 𝒕𝒂𝒌𝒆 👇
🟡 Figma Make isn’t replacing design thinking. It’s helping me move faster in the messy early stage.
🟡 Instead of starting from a blank canvas, I can test structure, layout, and direction quickly — then refine everything intentionally inside Figma.
🟡 Exploration first. Design decisions second. ✨
Would you try this workflow?
Trending
maxearnings
The next frontier of payments is live on Contra. How are you maximizing revenue?
micrographics
Micrographics started as utility - barcodes, packaging, instruction labels. How would you use them?
aidesignflow
AI tools are redefining how designer work. What does your workflow look like?
aivideo
AI video tools are moving at warp speed. What tools are you using?
whennotai
As AI accelerates, creative judgment matters more. What part of your work stays human?