Edit in JSFiddle

<h1 class="h1">responsive image</h1>

<div class="wrap">
	<div class="inner">
    <h2>srcset x <br>ー</h2>
    <p>Display multiple alternative images with different pixel densities. <br> The browser can decide from the pixel density and choose an image suitable for the user's device.</p>
    <figure class="figure">
      <img class="img" src="http://dummyimage.com/500x500/88ccff/686a82.gif&text=image+1x" srcset="
        https://dummyimage.com/500x500/88ccff/686a82.gif&text=1x 1x, 
        https://dummyimage.com/1000x1000/88ccff/686a82.gif&text=2x 2x, 
        https://dummyimage.com/2000x2000/88ccff/686a82.gif&text=3x 3x">
    </figure>
    <h2>srcset w <br>ー</h2>
    <p>Selection to display images by size.</p>
    <figure class="figure">
      <img class="img" src="http://dummyimage.com/500x500/88ccff/686a82.gif&text=image+1x" srcset="
        https://dummyimage.com/500x500/88ccff/686a82.gif&text=610w 610w, 
        https://dummyimage.com/1000x1000/88ccff/686a82.gif&text=980w 980w, 
        https://dummyimage.com/2000x2000/88ccff/686a82.gif&text=1200w 1200w">
    </figure>
    <h2>srcset <br>ー</h2>
    <p>Display images by screen resolution and screen size.</p>
    <figure class="figure">
      <picture>
        <source class="img" media="(max-width: 610px)" srcset="
          https://dummyimage.com/500x500/88ccff/686a82.gif&text=610w+1x 1x,
          https://dummyimage.com/500x500/88ccff/686a82.gif&text=610w+2x 2x, 
          https://dummyimage.com/500x500/88ccff/686a82.gif&text=610w+3x 3x
        ">
        <source class="img" media="(max-width: 980px)" srcset="
          https://dummyimage.com/500x500/88ccff/686a82.gif&text=980w+1x 1x,
          https://dummyimage.com/500x500/88ccff/686a82.gif&text=980w+2x 2x, 
          https://dummyimage.com/500x500/88ccff/686a82.gif&text=980w+3x 3x
        ">
        <img class="img" src="https://dummyimage.com/500x500/88ccff/686a82.gif&text=large+1x">
      </picture>
    </figure>
	</div>
</div>