关于响应图像的<img/>和<picture>之间的差异

Question

我正在做MDN HTML教程，在响应式图像部分，我遇到了这个：

    <img srcset="elva-fairy-320w.jpg 320w,
             elva-fairy-480w.jpg 480w,
             elva-fairy-800w.jpg 800w"
     sizes="(max-width: 320px) 280px,
            (max-width: 480px) 440px,
            800px"
     src="elva-fairy-800w.jpg" alt="Elva dressed as a fairy">

这个

<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>

两者有什么区别？他们都根据设备宽度选择图像，对吧？ MDN页面说第二个应该仅用于art direction个问题，我不知道这意味着什么。

您何时使用<img>标记以及srcset和sizes，何时使用<picture>以及<media>？