Unsplash

How to integrate Unsplash with Webflow

Unsplash offers multiple integration paths with Webflow, from the official app for instant visual access to API-based solutions for advanced workflows. Choose the native Unsplash app for drag-and-drop simplicity, leverage HTML embeds for custom image galleries, or build sophisticated integrations using both platforms' APIs for automated content management and dynamic image delivery.

Use the Unsplash app

The official Unsplash app provides direct access to millions of images within Webflow Designer. Install it from the Webflow Apps marketplace to search and insert photos without switching contexts.

Key capabilities include:

• One-click insertion that automatically optimizes images for web delivery
• Native Webflow image elements that ensure Unsplash assets are ingested into the Webflow asset manager for consistent performance and management
• Randomized presets for rapid prototyping with curated placeholder images

The app handles attribution metadata automatically and ensures all images comply with Unsplash's permissive license. Perfect for designers who need quick access to professional imagery during the design process.

Use HTML embeds and native features

Webflow's embed element enables custom Unsplash implementations without coding. Copy image URLs directly from Unsplash and embed them using Webflow's HTML element for precise control over display properties.

Manual embedding workflow:

• Browse Unsplash.com and select your image
• Copy the direct image URL
• Add an HTML embed element in Webflow
• Insert: <img src="YOUR_UNSPLASH_URL" alt="Description">

For dynamic image sizing, append URL parameters to any Unsplash image:

• ?w=800 sets width to 800px
• ?fit=crop&h=600 crops to a specific height
• ?auto=format serves optimal format (WebP/AVIF)

This method works well for hero images, backgrounds, or specific image transformations not available through the app.

Build with Webflow and Unsplash APIs

API integration unlocks advanced capabilities beyond visual selection, enabling automated workflows, dynamic content synchronization, and personalized image delivery. This approach suits teams needing programmatic control over visual assets or building image-driven applications.

The combination of Unsplash's API and Webflow's Data API enables:

• Automated content population based on CMS data
• Dynamic image galleries that update from Unsplash collections
• Personalized visual experiences using search parameters

Build dynamic image galleries

Create auto-updating galleries that pull from Unsplash collections or search results:

1. Set up Unsplash API access: Register your application at Unsplash Developers to obtain API credentials
2. Create Webflow CMS structure: Design collections with image URL fields and metadata
3. Implement sync logic: Use serverless functions to fetch Unsplash data and update Webflow CMS via the Collections API

This enables features like trending photo galleries or category-specific image feeds that refresh automatically.

Automate content imagery

Match images to content programmatically using Unsplash's search capabilities:

1. Extract keywords from your Webflow CMS items (blog posts, products)
2. Query Unsplash API: Use the /search/photos endpoint with relevant terms
3. Update CMS items: Insert matched images using Webflow's Items API

Perfect for content-heavy sites needing contextual imagery at scale without manual curation.

Implement advanced image optimization

Leverage both platforms' capabilities for performance:

1. Use Unsplash's dynamic URLs: Apply transformations via URL parameters for responsive images
2. Cache via Webflow Assets: Store frequently used images using the Assets API with MD5 hashing
3. Track usage: Implement download tracking to comply with Unsplash guidelines

This approach balances performance with compliance while maintaining image quality across devices.

What you can build

Integrating Unsplash with Webflow enables creation of visually rich, dynamically updated websites that leverage professional photography without licensing constraints.

• Portfolio websites: Photographers and designers build stunning galleries using Unsplash's curated collections, with masonry grids and lightbox interactions that showcase work alongside inspirational imagery
• E-commerce stores: Online retailers enhance product pages with lifestyle photography from Unsplash, creating contextual scenes that increase engagement without expensive photo shoots
• Content platforms: Publishers and bloggers automatically match articles with relevant imagery using keyword-based searches, ensuring every post has compelling visuals
• Marketing microsites: Agencies rapidly prototype and launch campaign sites using Unsplash's preset image features, testing different visual directions without custom photography