How to Add Animated Photos to Your Photography Portfolio Website

A couple of years ago, I was rebuilding my portfolio website and noticed something: every photographer’s site looked identical. Galleries of still photos, a contact form, an about page. Beautiful work, completely static.

I’d been making animated moments for wedding clients for a while by then — burst sequences from first dances, ring exchanges, and bouquet tosses turned into looping MP4s that lived in their galleries. It hit me one day that these same animations could live on my own website too. Not as gimmicks, but as genuine demonstrations of what I actually deliver.

The difference was immediate. When a potential client lands on your site and sees a moment actually moving — a veil catching wind, a child spinning, a couple laughing — it’s a fundamentally different experience than a still photo of the same scene. It shows range. It shows that you think about what your clients will want to share.

This is a practical guide to doing it. Not theory — what actually works, what the platforms make annoying, and where the common traps are.

Which format to use on a website

Short answer: MP4. Almost without exception.

GIF is the format that auto-plays everywhere — email, messaging apps, gallery platforms. On your own website, you don’t need GIF for that. You can use an HTML5 <video> element with autoplay, loop, muted, and playsinline attributes, and any modern browser plays it without user interaction. At that point, MP4 is strictly better: smaller files, far better color reproduction (24-bit vs GIF’s 8-bit 256 colors), and smoother playback at higher resolutions.

A typical wedding moment — 3 seconds of first dance, 30 frames, 1200px wide — comes out around 800KB as MP4. As GIF, the same sequence lands closer to 8MB and looks noticeably worse. That’s not a tradeoff worth making when you control the embed. For a deeper breakdown of where each format wins, the GIF vs MP4 comparison post covers the technical details.

The one exception: hero sections where the website builder won’t let you drop in a custom embed. Some platforms limit you to image or video upload slots with no access to raw HTML. In those cases, GIF is the fallback — optimize it hard (max 1500px wide, 15fps for slower movement, compress with something like Squoosh before uploading).

Creating the animations

You need a tool that exports MP4 from your Lightroom photos with your develop edits intact. Most photographers who do this regularly are using one of two approaches:

Lightroom Classic + Burst2GIF. Full disclosure: I built this one. It’s a plugin that lives inside Lightroom Classic — you select a burst sequence in the filmstrip, click Export, and get an MP4 or GIF in about 10 seconds. The develop edits already applied in Lightroom carry through to every frame. Up to 6K resolution, with frame rate pulled from EXIF SubSecTime data so the timing is accurate rather than guessed.

It’s the fastest path I’ve found for this workflow, mostly because I live in Lightroom already and don’t want another application in the loop. It’s not for you if you don’t use Lightroom Classic (it’s macOS-only right now, Windows is planned), or if you only have a handful of sequences and don’t mind a slightly more manual process. Full details at /tools/burst2gif.

Manual export + video editor. Export frames as JPEGs from Lightroom (File → Export, sized to whatever resolution you want), then import the sequence into DaVinci Resolve or Final Cut Pro. Set the frame rate, export as MP4. More steps, more control. If you’re already in a video application for other work, this adds maybe five minutes per sequence.

For website use, you don’t need 6K. I export portfolio pieces at 1440px wide — plenty for fullscreen display on a retina monitor, and manageable file sizes.

Embedding on the main platforms

Squarespace. The cleanest option is a Code block. In the site editor, add a Code block and paste:

<video autoplay loop muted playsinline style="width:100%; display:block;">
  <source src="YOUR-FILE-URL" type="video/mp4">
</video>

You’ll need to host the MP4 somewhere first — Squarespace doesn’t allow uploading arbitrary files by default. Google Drive with a direct link, Cloudflare R2, or a GitHub repo served via CDN all work. The native Squarespace video block also functions, but gives you less control over looping behavior.

Showit. Actually excellent for this. You can upload MP4 files directly to a Showit site via drag-and-drop in the canvas, set them as section background videos, and control autoplay, loop, and cover behavior from the interface. No custom code required. This is probably the smoothest experience of any website builder for animated photos, which surprised me when I first tried it.

WordPress. Use a Video block in the Gutenberg editor, upload your MP4 directly, and set it to autoplay and loop in the block settings. Or a custom HTML block with the <video> embed above for more layout control. Self-hosted WordPress lets you serve files from your own server, which is cleanest for load time.

Framer and Webflow. Both have native video background support that handles autoplay loops without drama. If you’re building from scratch on either platform, animated moments are straightforward to add — both have proper support for muted autoplay as background content.

Practical considerations for loading speed

A few things I’ve learned the hard way:

Compress before uploading. Even a clean MP4 from an export tool can often be compressed further without visible quality loss. I run my website portfolio files through HandBrake using the H.265 codec at RF 28. That typically cuts file size by 30–40% with no perceptible difference at normal viewing sizes.

Don’t autoplay everything. If your homepage has three or four looping videos all starting simultaneously, you’ll get stuttering on slower connections and mobile. I use one animated hero (usually a 4-second moment from a recent wedding) and keep the rest static until they enter the viewport, using the Intersection Observer pattern or whatever lazy-load mechanism the platform offers.

Mobile behavior matters. The playsinline attribute is non-negotiable on iOS — without it, video opens fullscreen. Autoplay also requires muted to work on mobile; browsers won’t autoplay audio-enabled video by default. Plan for that from the start.

Captions ground the context. A looping video with no text can confuse visitors who don’t immediately understand what they’re looking at. A small caption — “From Katarina + Ondrej’s wedding, Prague 2025” — anchors it and quietly serves as social proof.

What to actually animate

Not everything benefits from being animated on a portfolio site. The moments that work best:

Natural, repetitive movement — veils, hair, wind, fabric, water
Children moving naturally (they rarely stay still, which usually means great burst sequences)
Couple interactions that carry emotional weight — a forehead touch, a sustained laugh
Pet sessions where the energy is the whole point

The moments that work less well: sharp lateral movement at lower frame rates (looks choppy), scenes with a lot of background variation (distracting), or anything where the magic lives in a single perfect instant rather than in movement across time.

My current portfolio homepage has one animated header and three animated gallery examples, each around 3–4 seconds. That’s enough to communicate “this photographer delivers animated moments” without overwhelming someone who’s just trying to evaluate your work.

If you’re delivering these animations to clients rather than just showcasing them on your own site, I covered that specific workflow for Pic-Time and Pixieset galleries. And if you want to think through file size optimization before you publish anything, the GIF size guide for photographers applies to MP4 optimization reasoning as well.

Try It Free