Shopify allows you to use videos on product pages, landing pages, and in themes. Videos, however, can be heavy files that slow down your store if not prepared correctly. Optimizing videos means reducing their size, choosing the right format, and serving them in a way that loads quickly for customers. If this is not done, your pages may load slowly, customers may leave, and playback may stutter, especially on mobile or slow internet connections.
Video Format and Compression
Most browsers and devices reliably support MP4 videos encoded with H.264 for video and AAC for audio. That is why this combination is considered the safest choice. Resolutions such as 720p or 1080p are usually enough for e-commerce because they show product details without creating unnecessarily large files.
If you upload a large uncompressed file, Shopify or the CDN will need to deliver it as-is, which increases load times. By compressing the file using a tool like FFmpeg, you reduce file size while keeping good quality.
Example:
ffmpeg -i input.mov -c:v libx264 -crf 23 -preset fast -c:a aac -b:a 128k output.mp4Adaptive Streaming with HLS
MP4 files are single chunks of video. If the file is large, the viewer must buffer a lot before playback starts, and quality cannot change mid-playback. HLS (HTTP Live Streaming) solves this by splitting the video into smaller segments and allowing the player to adjust quality based on internet speed.
For example, if someone is on slow Wi-Fi, the player will pick a lower-resolution segment to keep the video smooth instead of freezing. On a faster connection, it switches to higher resolution. That makes playback more reliable across different users.
In practice, you use FFmpeg to generate .m3u8 playlist files and segments, store them in a CDN, and then play them with a player like Video.js. This is important for longer videos, such as tutorials or product demos, where you cannot afford long load times.
Example:
ffmpeg -i input.mp4
-profile:v baseline -level 3.0 -start_number 0
-hls_time 6 -hls_list_size 0 -f hls index.m3u8
Third-Party Hosting Options
Shopify can store small media files directly on its own CDN, and this works fine for short product clips. But Shopify is not designed to handle large video delivery efficiently. That is why external hosting is recommended for bigger files.
Hosting on AWS S3 with CloudFront, Cloudflare, or video platforms gives you better scalability and delivery. The video itself is stored outside Shopify, and you only embed the URL or player code in your store. This reduces the load on Shopify and ensures global users get video from the closest server location.
Lazy Loading and Thumbnails
If a video loads immediately when the page opens, it can slow down the whole page even if the customer never scrolls to that section. Lazy loading delays the video until it is visible on screen, improving performance.
Thumbnails, or poster images, give the visitor a quick visual preview while the video loads. Without them, the browser shows a blank or black rectangle. This step improves the user experience and page speed because the browser loads only a lightweight image first.
<video controls poster="{{ 'preview.jpg' | asset_url }}">
<source src="{{ 'product.mp4' | asset_url }}" type="video/mp4">
</video>Audio Track Optimization
Most product videos don"t need studio-quality audio. Exported files often include high-bitrate audio that adds unnecessary size without improving clarity. For voice-overs or simple background music, AAC at 128 kbps (or **96 kbps for speech-only content) is usually enough. Stereo channels are sufficient"surround sound isn"t required.
By lowering the audio bitrate, you can cut down the file size by several megabytes, making your videos load faster while keeping the sound clear for customers.
FFmpeg Example:
ffmpeg -i input.mp4 -c:v copy -c:a aac -b:a 128k output.mp4