Responsive Images with srcset

Example on how you can use srcset to load images conditionally...

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://fonts.googleapis.com/css?family=Montserrat:400,700"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<div class="banner">
  <h1>RESPONSIVE IMAGES </h1>
  <h2><i>With srcset, w & sizes</i></h2>
</div>

<div class="content">

  <img sizes="659px" src="https://i.imgur.com/fQ6hsx5.png" srcset="https://i.imgur.com/fQ6hsx5.png 600w, https://i.imgur.com/tZ4OOWe.png 1500w, https://i.imgur.com/dTfQlJr.png 3000w" sizes="(max-width: 800px) 100vw, (max-width: 1000px) 500px, 100px">
</div>

<div class="description">
  <code>&#60;img src="images/space_medium.jpg" srcset="images/space_small.jpg 600w, images/space_medium.jpg 1500w, images/space_large.jpg 3000w" sizes="(max-width: 800px) 100vw, (max-width: 1000px) 500px, 100px"&#62;</code>
  <h2>srcset</h2>
  <code>img src="images/space_medium.jpg" srcset="images/space_small.jpg 600w, images/space_medium.jpg 1500w, images/space_large.jpg 3000w"</code>
  <p>"If the viewport is less than 600px in width -> Display space_small.jpg"</p>
  <p>"If the viewport is larger than 600px in width -> Display space_medium.jpg"</p>
  </p>
  <p>"If the viewport is larger than 1024px in width -> Display large.jpg"</p>
  <hr>
  <h2>sizes</h2>
  <p>Sizes is a mandatory requirement according to the specification. The sizes attribute is essentially a set of media queries that tell the browser the width of an image at various breakpoints.</p>
  <p>
    <code>sizes= "(max-width: 800px) 100vw, (max-width: 1000px) 500px, 100px”</p></code>
    <p>
      <code>(max-width: 800px) 100vw</code><b>“When my viewport is less than 800px wide, my image takes up 100% of the screen"</b></p>
    <p>
      <code>(max-width: 800px) 100vw, (max-width: 1000px) 500px</code><b>“When my viewport is greater than 800px, but less than 1000px wide, my image is 500px wide"</b></p>
    <p>
     ...

CSS

body {
  font-family: 'Montserrat', sans-serif;
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
  font-weight: 400;
}

.banner {
  padding: 20px;
  margin-bottom: 20px;
  margin-left: auto;
  margin-right: auto;
  background-color: #202020;
  text-align: center;
  color: #E5E5E5;
  width: auto;
}

.description {
  padding: 20px;
  position: relative;
  margin-top: 20px;
  margin-bottom: 20px;
  margin-left: auto;
  margin-right: auto;
  background-color: #E5E5E5;
  color: black;
  font-size: 22px;
}

.banner h1 {
  font-size: 2.5em;
}

.content {
  margin-left: auto;
  margin-right: auto;
  max-width: 3000px;
  min-height: 100px;
  border: 5px solid grey;
}

img {
  max-width: 100%;
  /*	margin-left:auto;
	margin-right:auto;*/
}