Как умно ресайзить фотографию под разные разрешения экранов и пропорции (десктоп, смартфон)?
<picture>
  <source media="(max-width: 799px)" srcset="elva-480w-close-portrait.jpg">
  <source media="(min-width: 800px)" srcset="elva-800w.jpg">
  <img src="elva-800w.jpg" alt="Chris standing up holding his daughter Elva">
</picture>
браузер не грузит лишнии изображения. Это самый правильный и быстрый вариант
<picture>
  <source media="(max-width: 799px)" srcset="elva-480w-close-portrait.jpg">
  <source media="(min-width: 800px)" srcset="elva-800w.jpg">
  <img src="elva-800w.jpg" alt="Chris standing up holding his daughter Elva">
</picture>
браузер не грузит лишнии изображения. Это самый правильный и быстрый вариант