{"slug": "how-to-add-living-photo-effects-to-your-web-portfolio", "title": "How to Add Living Photo Effects to Your Web Portfolio", "summary": "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.", "body_md": "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.\n\nHere's how we did it, what we learned about performance, and the code you need to do it yourself.\n\nYou 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.\n\nWe 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.\n\nNot every photo works equally well. From our testing across thousands of uploads:\n\nFor a portfolio hero section, pick your strongest portrait or a textured product shot.\n\nHead to [alivephoto.online](https://alivephoto.online), drop your image, and hit generate. You'll get a short video clip back. Download it.\n\nFor production use, you want the video format (MP4/WebM), not the GIF. Here's why:\n\n| Format | Typical size (1080p, 3s) | Browser support |\n|---|---|---|\n| GIF | 8-15 MB | Universal |\n| WebM | 200-600 KB | Chrome, Firefox, Edge |\n| MP4 | 300-800 KB | Universal |\n\nGIFs are 20-40x larger. Nobody wants a 12 MB hero image.\n\nHere's a clean, responsive implementation:\n\n```\n<section class=\"hero\">\n  <video\n    class=\"hero-bg\"\n    autoplay\n    loop\n    muted\n    playsinline\n    preload=\"none\"\n    poster=\"/img/hero-still.jpg\"\n  >\n    <source src=\"/video/hero-living.webm\" type=\"video/webm\">\n    <source src=\"/video/hero-living.mp4\" type=\"video/mp4\">\n    <img src=\"/img/hero-still.jpg\" alt=\"Portfolio hero\">\n  </video>\n  <div class=\"hero-content\">\n    <h1>Your headline here</h1>\n  </div>\n</section>\n```\n\nThe `poster`\n\nattribute shows the static frame while the video loads. The `<img>`\n\nfallback covers edge cases where video fails entirely.\n\n```\n.hero {\n  position: relative;\n  overflow: hidden;\n  min-height: 80vh;\n}\n\n.hero-bg {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  min-width: 100%;\n  min-height: 100%;\n  object-fit: cover;\n  z-index: -1;\n}\n\n.hero-content {\n  position: relative;\n  z-index: 1;\n  padding: 4rem 2rem;\n}\n```\n\nAutoplay video on mobile eats bandwidth. Respect your users:\n\n``` js\nconst hero = document.querySelector('.hero-bg');\n\nif (window.matchMedia('(max-width: 768px)').matches) {\n  hero.removeAttribute('autoplay');\n  hero.pause();\n\n  const playBtn = document.createElement('button');\n  playBtn.textContent = 'Play animation';\n  playBtn.className = 'hero-play-btn';\n  playBtn.addEventListener('click', () => {\n    hero.play();\n    playBtn.remove();\n  });\n\n  hero.closest('.hero').appendChild(playBtn);\n}\n```\n\nAlternative approach: use `preload=\"none\"`\n\nuniversally and trigger load with Intersection Observer:\n\n``` js\nconst observer = new IntersectionObserver((entries) => {\n  entries.forEach(entry => {\n    if (entry.isIntersecting) {\n      const video = entry.target;\n      video.load();\n      video.play();\n      observer.unobserve(video);\n    }\n  });\n}, { threshold: 0.25 });\n\ndocument.querySelectorAll('.hero-bg').forEach(v => observer.observe(v));\n```\n\nWe 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.\n\nThe animated version held attention longer. Time-on-page went up. Whether that moves your specific conversion needle depends on your layout and CTA placement.\n\nKey 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.\n\n**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.\"\n\n**Forgetting the poster frame.** Without `poster`\n\n, visitors see a blank rectangle until the video loads. Always include a static fallback.\n\n**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.\n\n**No reduced-motion support.** Some users have `prefers-reduced-motion`\n\nenabled. Respect it:\n\n```\n@media (prefers-reduced-motion: reduce) {\n  .hero-bg {\n    display: none;\n  }\n  .hero {\n    background-image: url('/img/hero-still.jpg');\n    background-size: cover;\n  }\n}\n```\n\nLiving 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.\n\nWe 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.\n\nThe source photo stays yours. We delete it after processing.", "url": "https://wpnews.pro/news/how-to-add-living-photo-effects-to-your-web-portfolio", "canonical_source": "https://dev.to/jakub_inithouse/how-to-add-living-photo-effects-to-your-web-portfolio-2oif", "published_at": "2026-06-13 07:19:26+00:00", "updated_at": "2026-06-13 07:47:44.996728+00:00", "lang": "en", "topics": ["generative-ai", "computer-vision", "ai-tools", "developer-tools"], "entities": ["Inithouse", "alivephoto.online", "Pet Imagination"], "alternates": {"html": "https://wpnews.pro/news/how-to-add-living-photo-effects-to-your-web-portfolio", "markdown": "https://wpnews.pro/news/how-to-add-living-photo-effects-to-your-web-portfolio.md", "text": "https://wpnews.pro/news/how-to-add-living-photo-effects-to-your-web-portfolio.txt", "jsonld": "https://wpnews.pro/news/how-to-add-living-photo-effects-to-your-web-portfolio.jsonld"}}