Does updating the source of an image multiple times per second lead to performance issues?

I’m not really sure how to wrap this question in a single sentence, but I’ll explain in as few words as I can.
The landing page for my (work in progress) website is a picture of a building, and you can click on the door to get to a different page. Before the location changes, the source of an image in the page changes every 33 ms in order to simulate a 30fps animation.
This is in my .blade.php file (I’m using Laravel 11):

    <div class="d-none d-lg-block">
        <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
            viewBox="0 0 1920 1080" id="landingSvg">
            <image width="1920" height="1080" xlink:href="/media/frames/1.jpg" id="landingImage"></image>
                <rect x="599" y="678" fill="#fff" opacity="0" width="136" height="261" id="door"></rect>
        </svg>
    </div>

While this is the Javascript that handles the animation (I’m using jQuery):

$(document).ready(function(){
    $("#door").click(() => {
        //Hiding the door element
        $("#door").hide();
        //Initializing frame count as 2
        let i = 2;
        //Using an interval to change the image url every 33 milliseconds, simulating a 30fps animation
        let frames = setInterval(() => {
            //Changing the image url of the main background to the next frame
            $("#landingImage").attr("xlink:href", `/media/frames/${i}.jpg`);
            //Increasing the frame count
            i++;
            //Checking if the counter has reached the value of 31, as in that case there will be no more frames to load
            if (i >= 31) {
                clearInterval(frames);
                //Changing position to the next page after 700 milliseconds
                setTimeout(() => {
                    window.location.assign('http://localhost:8000/reception');
                }, 700)
            }
        }, 33)
    }
)
// $(document).ready() ends here
})

I tested this on my local machine and it works fine. I rarely get some frame skipping, but almost always the animation is very smooth.
Now, this is what I was wondering: when I eventually ship the application to production, playing the animation means requesting a fairly large image (1920×1080) every 33 ms from a server that is possibly fairly distant from the user; will the server be able to perform this operation as smoothly? If not, what can I do to solve the issue?
Thanks in advance.