Add example images; media queries

css/css.css

@@ -18,6 +18,7 @@ img {
   display: block;
   margin-left: auto;
   margin-right: auto;
+  width: 100%;
 }
 
 .sample-image {
@@ -88,3 +89,15 @@ div {
 .footnote {
   font-size: 90%;
 }
+
+@media only screen and (min-width: 576px) {
+  img {
+    max-width: 60%;
+  }
+}
+
+@media only screen and (min-width: 992px) {
+  img {
+    width: 100%;
+  }
+}

index.html

@@ -594,6 +594,12 @@
           The enclosing quote marks are necessary when you use spaces within the filtergraph, e.g. <code>-vf "fieldmatch, yadif, decimate"</code>, and are included above as an example of good practice.</p>
           <p>Note that if applying an inverse telecine procedure to a 29.97i file, the output framerate will actually be 23.976fps.</p>
           <p>This command can also be used to restore other framerates.</p>
+          <div class="sample-image">
+            <h4>Example</h4>
+            <p>Before and after inverse telecine:</p>
+            <img src="img/ivtc_originalvideo.gif" alt="GIF of original video">
+            <img src="img/ivtc_result.gif" alt="GIF of video after inverse telecine">
+          </div>
           <p class="link"></p>
         </div>
       </div>