# How to Add Living Photo Effects to Your Web Portfolio

> Source: <https://dev.to/jakub_inithouse/how-to-add-living-photo-effects-to-your-web-portfolio-2oif>
> Published: 2026-06-13 07:19:26+00:00

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.