Move images used in specs into subdirectories that bikeshed echidna will automatically package.

Fixes most of #7505.

Author: dbaron

css-animations-1/Overview.bs

@@ -387,7 +387,7 @@ as illustrated below:
 		the state of the animation if it were given a duration of ''10s''.
 
 		<figure>
-			<img src="./animation1.png" alt="">
+			<img src="images/animation1.png" alt="">
 			<figcaption>Animation states specified by keyframes</figcaption>
 		</figure>
 	</div>

css-animations-1/animation1.png renamed to css-animations-1/images/animation1.png

@@ -64,7 +64,7 @@ input progress value and producing a corresponding transformed output progress
 value.
 
 <figure>
-  <img src="easing-function-example.svg" width="400"
+  <img src="images/easing-function-example.svg" width="400"
     alt="Example of an easing function that produces an ease-in effect.">
   <figcaption>
     Example of an easing function that produces an ease-in effect.<br>
@@ -150,7 +150,7 @@ The <var>x</var> coordinates of <var>P1</var> and <var>P2</var>
 are restricted to the range [0, 1].
 
 <figure>
-  <img src="cubic-bezier-easing-curve.svg" width="400"
+  <img src="images/cubic-bezier-easing-curve.svg" width="400"
       alt="A cubic Bezier curve used as an easing function.">
   <figcaption>
     A cubic B&eacute;zier curve used as an easing function.<br>
@@ -195,7 +195,7 @@ The meaning of each value is as follows:
 The keyword values listed above are illustrated below.
 
 <figure>
-  <img src="curve-keywords.svg" width="500"
+  <img src="images/curve-keywords.svg" width="500"
       alt="The easing functions produced by keyword values.">
   <figcaption>
     The easing functions produced by each of the cubic B&eacute;zier easing
@@ -267,7 +267,7 @@ The meaning of each value is as follows:
 ::  Computes to ''steps(1, end)''
 
     <figure>
-      <img src="step-easing-keyword-examples.svg" width="500"
+      <img src="images/step-easing-keyword-examples.svg" width="500"
           alt="Example step easing keywords.">
       <figcaption>
         Example step easing function keyword values.
@@ -306,7 +306,7 @@ The meaning of each value is as follows:
     These values are illustrated below:
 
     <figure>
-      <img src="step-easing-func-examples.svg" width="500"
+      <img src="images/step-easing-func-examples.svg" width="500"
           alt="Example step easing functions.">
       <figcaption>
         Example step easing functions.

css-easing-1/Overview.bs

@@ -467,7 +467,7 @@ modern web standards can be used to achieve a similar effect.
 <img src="about:unicorn"
 style="background: double-rainbow(bottom, closest-corner)">
 </code></pre>
-<img class=fabulous src="./unicorn.svg">
+<img class=fabulous src="images/unicorn.svg">
 <style>
 .fabulous {
 background: radial-gradient(closest-corner circle at bottom, transparent, rgba(250, 250, 210, 0.251) 63%, rgba(148, 0, 211, 0.251), rgba(0, 0, 128, 0.251), rgba(0, 0, 255, 0.251), rgba(0, 128, 0, 0.251), rgba(255, 255, 0, 0.251), rgba(255, 165, 0, 0.251), rgba(255, 0, 0, 0.251), transparent 67%, transparent 90%, rgba(255, 0, 0, 0.126), rgba(255, 165, 0, 0.126), rgba(255, 255, 0, 0.126), rgba(0, 128, 0, 0.126), rgba(0, 0, 255, 0.126), rgba(0, 0, 128, 0.126), rgba(148, 0, 211, 0.126), transparent 100%);