In my project I wanted the background image from jpg to webp. In development I don't get any problems and the image shows up correctly, like in this image. But if I access the site from its link (hosted with AWS) the image is not loaded (the background is simply gray like on the other pages) in any browser (I tried Chrome and Edge and also from mobile).

Here is the code where the image is:

import styled from 'styled-components';
import backgroundImage from '../../assets/images/background.webp';

export const PageContainer = styled.div`
    height: 100%;
    background: url(${backgroundImage}) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-position-y: 60%;
`;

Here the github repo and the live site.