Different images with different screen widths. HTML example

A simple html tag <picture> will help us with this:

<picture>
 <source srcset="img/1300x400.jpg" type="image/jpeg" media="(min-width:1330px)">
 <source srcset="img/800x400.jpg" type="image/jpeg" media="(min-width:992px)">
 <source srcset="img/400x600.jpg" type="image/jpeg" media="(max-width:992px)">
 <img src="img/1300x400.jpg" alt="">
</picture>

<img src="img/1300x400.jpg" alt=""> - for IE

Or img tag:

<img class="" src="/wp-content/uploads/2018/03/large-1024x723.jpg" alt="image alt" 
srcset="http://acoolblog.com/wp/wp-content/uploads/2018/03/grand-1024x723.jpg 1024w, 
    /wp-content/uploads/2018/03/average-300x212.jpg 300w, 
    /wp-content/uploads/2018/03/average-large-768x542.jpg 768w, 
    /wp-content/uploads/2018/03/very-large-1508x1065.jpg 1508w, 
    /wp-content/uploads/2018/03/full-size.jpg 3200w" 
sizes="(min-width: 861px) 363px, 
    (min-width: 481px) 50vw, 
    100vw">

another example

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