I'm starting a new Vue 3 + Vite project and its a simple landing page.
Its nothing too fancy but I was in doubt what would be the best way to handle media files - especially some large files like background videos or HQ pictures.
Now I have some HQ pictures and images (already as webp and compressed with the largest one with ~800kb) but I'm a little bit confused about how I should handle the background videos.
I have only a section with video background but using different files sources as the resolution becomes smaller or larger (I read somewhere that is a good practice).
The mobile one has ~3.5mb;
The tablet one has ~5mb;
The desktop one has ~ 8mb;
And the 4k video (yes. The client was specific about that one) about 16mb;
Its a short background-video with 20s in a loop.
But these videos should be in the src directory inside the project or stored in the cloud somewhere like AWS or Youtube?
The total media folder (with everything) is about 40mb size.
Does it make any difference to the end user?
PS: What I managed to find as a result on the internet is quite divided with articles saying how bad it is to leave heavy videos and media files within the project /src and others saying that using AWS or other media hosting systems for a simple project (such as a Single-Page) decrease performance for the end user. So I'm not sure which way to continue.