How to Add Living Photo Effects to Your Web Portfolio

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.

What living photos actually are

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 for exactly this. No signup, no account. Upload, wait about 30 seconds, download. The tool deletes your photo after processing.

Step 1: Pick the right source photo

Not every photo works equally well. From our testing across thousands of uploads:

• Portraits work best. Faces, hair, clothing give the model clear motion targets.
• Product shots with texture. Fabric, liquid, smoke, reflections all animate convincingly.
• Landscapes with water or sky. Clouds, waves, leaves in wind.
• Flat graphics don't work. Logos, icons, UI screenshots produce artifacts.

For a portfolio hero section, pick your strongest portrait or a textured product shot.

Step 2: Generate the animation

Head to 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.

Step 3: Embed it as a looping background

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;
}

Step 4: Handle mobile properly

Autoplay video on mobile eats bandwidth. Respect your users:

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:

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));

Step 5: Measure the impact

We ran A/B tests on our own product landing pages. On Pet Imagination, 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.

Common mistakes we've seen

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;
  }
}

The full picture

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 is free and requires no signup.

The source photo stays yours. We delete it after processing.