Responsive images with sourceset in bolt

record.twig

    {% if record.image is not empty %}
        <figure class="main-img">
            <div class="img-container">
                <img class="" 
                {# give the browser three possible imagesizes to choose from #}
                srcset="{{ record.image|thumbnail(1800,750,'c') }} 1800w ,
                        {{ record.image|thumbnail(1200,500,'c') }} 1200w,
                        {{ record.image|thumbnail(800,330,'c') }} 800w"
                {# give the width the image is used on different mediaqueries - in this case always 100% #}
                sizes="100vw"
                {# fallback src #}
                src="{{ record.image|thumbnail(1200,500,'c') }}" {% if record.values.image.alt is defined and record.values.image.alt is not empty %} alt="{{ record.values.image.alt }}" {% endif %}/>
            </div> 
        </figure>
    {% endif %}
    
    {# meneer archibald heeft t goed uitgelegd -> https://jakearchibald.com/2015/anatomy-of-responsive-images/ #}