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