Я понял.
Вот переработанный пример:
<!DOCTYPE html>
<html><head></head><body>
<picture>
<source media="(min-width:2000px)" type="image/webp" srcset="logo.webp" />
<source media="(min-width:1500px)" srcset="logo.png"/>
<source media="(min-width:900px)" sizes="(max-width:1200px)400px,100vw "
srcset="logo-480-2x.png 2x,
logo-768-1.5x.png 1.5x,
logo-480.png 480w,
logo-768.png 768w" />
<img src="logo-320.png" alt="logo" sizes="(min-width: 600px) 300px, 50vw"/>
</picture>
</body></html>
'lo go .webp' будет игнорироваться, если браузер не поддерживает формат webp или ширина области просмотра меньше чем 2000px. (измените размер окна браузера, чтобы изменить размер области просмотра)
'lo go .png' будет выбран, если ширина области просмотра составляет от 1500 до 2000 пикселей.
Если ширина области просмотра составляет от 1200 до 1500 пикселей, будет выбран 'lo go -768-1.5x.png', поскольку предполагаемая ширина ie. 100vw (ширина области просмотра 100%, или от 1200 до 1500 пикселей), больше, чем 480px и 768px, но связано с наименьшим дескриптором плотности пикселей больше 1, ie. 1.5x. Если ширина области просмотра находится между 900px и 1200px, будет выбран 'lo go -480.png', потому что его дескриптор ширины (480w) наименьший, чем предполагаемая ширина, 400px.
Если ширина области просмотра меньше 900px, будет использоваться 'lo go -320.png'. Атрибут «sizes» будет игнорироваться, поскольку он не связан ни с одним дескриптором ширины в атрибуте «srcset».
Чем больше дескриптор плотности пикселей ширины (например, 2x) или дескриптором ширины (например, 480w), чем меньше будет отображаемое изображение, где: дескриптор ширины * дескриптор плотности пикселей = ширина исходного изображения