Picture

<source

sizes - список размеров изображений для разных размеров страниц

Задаем список через запятую размеров экранов, для которых надо подбирать изображения из srcset


<picture>
  <source
    sizes="(min-width: 960px) calc(33.3vw - 10px),
      (min-width: 510px) calc(50vw - 15px),
      calc(100vw - 10px)" 
  >

srcset - делаем список через запятую с указанием :

пути к изображению
описанием ширины изображения в виде w400
или описанием плотности пикселей x2

Важно! Нельзя совмещать в одном srcset дискриптеры w и x.


<picture>
  <source
    srcset="
      image-size-240x240.jpg 240w,
      image-size-320x320.jpg 320w,
      image-size-480x480.jpg 480w,
      image-size-640x640.jpg 640w,
      image-size-960x960.jpg 960w
    "
  >

Браузер сам выберет подходящее изображение из заданного набора.