Адаптивные изображения атрибута srcset не работают должным образом

Question

Я исправляю некоторый код в проекте обзора веб-приложения. Один из критериев отправки - сделать все изображения сайта отзывчивыми, используя атрибут srcset. Но сайт загружает только увеличенное изображение во всех окнах просмотра и на размерах экрана, и я не знаю, где я ошибся !!

1014 * часть с целью * Тег 1006 *, который создается динамически с последующим javascript

<section id="restaurant-container">
    <h1 id="restaurant-name"></h1>
    <img id="restaurant-img">
    <p id="restaurant-cuisine"></p>
    <p id="restaurant-address"></p>
    <table id="restaurant-hours"></table>
</section>

JS

function imageUrlForRestaurant(restaurant) {
    let url = `/img/${(restaurant.photograph.split('.')[0]||restaurant.id)}-medium.jpg`;
    return url;
  }

function imageSrcsetForRestaurant(restaurant) {
    const imageSrc = `/img/${(restaurant.photograph.split('.')[0]||restaurant.id)}`;
    return `${imageSrc}-small.jpeg 300w,
            ${imageSrc}-medium.jpeg 600w,
            ${imageSrc}-large.jpeg 800w`;
  }

function imageSizesForRestaurant(restaurant) {
    return `(max-width: 360px) 280px,
            (max-width: 600px) 600px,
            400px`;
  }


const image = document.getElementById('restaurant-img');
image.className = 'restaurant-img';
image.src = imageUrlForRestaurant(restaurant);
image.srcset = imageSrcsetForRestaurant(restaurant);
image.sizes = imageSizesForRestaurant(restaurant);