How to Add Living Photo Effects to Your Web Portfolio

Inithouse, a studio shipping multiple products in parallel, built alivephoto.online, a free tool that uses AI to generate short, looping animations from still photos. The tool, which deletes uploads after processing, produces 2-4 second video clips ideal for web portfolios. Inithouse recommends using WebM or MP4 formats over GIFs for performance and provides code for responsive, bandwidth-conscious implementation.

Static portfolios blend together. Every designer's site has the same grid of JPEGs. We wanted something different for our own product pages at Inithouse, a studio shipping a growing portfolio of products in parallel, so we started experimenting with living photos: short AI-generated animations that make a still image breathe. Here's how we did it, what we learned about performance, and the code you need to do it yourself. You upload a regular photo. An AI model generates a short video loop where parts of the image move naturally: hair blows, water ripples, eyes blink. The output is a 2-4 second clip that loops cleanly. We built alivephoto.online https://alivephoto.online for exactly this. No signup, no account. Upload, wait about 30 seconds, download. The tool deletes your photo after processing. Not every photo works equally well. From our testing across thousands of uploads: For a portfolio hero section, pick your strongest portrait or a textured product shot. Head to alivephoto.online https://alivephoto.online , drop your image, and hit generate. You'll get a short video clip back. Download it. For production use, you want the video format MP4/WebM , not the GIF. Here's why: | Format | Typical size 1080p, 3s | Browser support | |---|---|---| | GIF | 8-15 MB | Universal | | WebM | 200-600 KB | Chrome, Firefox, Edge | | MP4 | 300-800 KB | Universal | GIFs are 20-40x larger. Nobody wants a 12 MB hero image. Here's a clean, responsive implementation: <section class="hero" <video class="hero-bg" autoplay loop muted playsinline preload="none" poster="/img/hero-still.jpg" <source src="/video/hero-living.webm" type="video/webm" <source src="/video/hero-living.mp4" type="video/mp4" <img src="/img/hero-still.jpg" alt="Portfolio hero" </video <div class="hero-content" <h1 Your headline here</h1 </div </section The poster attribute shows the static frame while the video loads. The <img fallback covers edge cases where video fails entirely. .hero { position: relative; overflow: hidden; min-height: 80vh; } .hero-bg { position: absolute; top: 50%; left: 50%; transform: translate -50%, -50% ; min-width: 100%; min-height: 100%; object-fit: cover; z-index: -1; } .hero-content { position: relative; z-index: 1; padding: 4rem 2rem; } Autoplay video on mobile eats bandwidth. Respect your users: js const hero = document.querySelector '.hero-bg' ; if window.matchMedia ' max-width: 768px ' .matches { hero.removeAttribute 'autoplay' ; hero.pause ; const playBtn = document.createElement 'button' ; playBtn.textContent = 'Play animation'; playBtn.className = 'hero-play-btn'; playBtn.addEventListener 'click', = { hero.play ; playBtn.remove ; } ; hero.closest '.hero' .appendChild playBtn ; } Alternative approach: use preload="none" universally and trigger load with Intersection Observer: js const observer = new IntersectionObserver entries = { entries.forEach entry = { if entry.isIntersecting { const video = entry.target; video.load ; video.play ; observer.unobserve video ; } } ; }, { threshold: 0.25 } ; document.querySelectorAll '.hero-bg' .forEach v = observer.observe v ; We ran A/B tests on our own product landing pages. On Pet Imagination https://petimagination.com , where we generate AI pet portraits, we tested a static hero vs. a living photo hero. The animated version held attention longer. Time-on-page went up. Whether that moves your specific conversion needle depends on your layout and CTA placement. Key thing: don't let the animation distract from your call to action. Subtle movement beats dramatic. If the photo moves so much that visitors watch it instead of reading your copy, you've lost. Too much motion. The AI can produce dramatic effects. Dial it back for hero sections. You want "huh, is that photo moving?" not "whoa what's happening." Forgetting the poster frame. Without poster , visitors see a blank rectangle until the video loads. Always include a static fallback. Serving GIFs in production. We measured this across multiple product pages at Inithouse. Switching from GIF to WebM cut load times by 3-4 seconds on mobile connections. There's no reason to ship GIF for looping animations in 2026. No reduced-motion support. Some users have prefers-reduced-motion enabled. Respect it: @media prefers-reduced-motion: reduce { .hero-bg { display: none; } .hero { background-image: url '/img/hero-still.jpg' ; background-size: cover; } } Living photos work when used with restraint. One animated hero section per page. Keep the clip short. Serve WebM with MP4 fallback. Give mobile users a choice. Respect accessibility preferences. We use this technique across several products at Inithouse, a studio building a growing portfolio of tools. If you want to try generating a living photo from your own portfolio shot, alivephoto.online https://alivephoto.online is free and requires no signup. The source photo stays yours. We delete it after processing.