Rendered images use Markdeep class=pixel

Markdeep provides a `class=pixel` attribute for included images in order
to render with a point-sampled result. I didn't realize this when I
originally created CSS styling and an enclosing `div` element to do this
before. Switching the prior styling to now use Markdeep's feature.

Resolves #498

Author: hollasch

books/RayTracingInOneWeekend.html

@@ -137,11 +137,7 @@
 Opening the output file (in `ToyViewer` on my Mac, but try it in your favorite viewer and Google
 “ppm viewer” if your viewer doesn’t support it) shows this result:
 
-  <div class="render">
-
-  ![First PPM image](../images/img.first-ppm-image.png)
-
-  </div>
+  ![First PPM image](../images/img.first-ppm-image.png class=pixel)
 
 </div>
 
@@ -516,11 +512,8 @@
 
 with $t$ going from zero to one. In our case this produces:
 
-  <div class="render">
-
-  ![A blue-to-white gradient depending on ray Y coordinate](../images/img.blue-to-white.png)
-
-  </div>
+  ![A blue-to-white gradient depending on ray Y coordinate
+  ](../images/img.blue-to-white.png class=pixel)
 
 </div>
 
@@ -634,11 +627,7 @@
 <div class='together'>
 What we get is this:
 
-  <div class="render">
-
-  ![A simple red sphere](../images/img.red-sphere.png)
-
-  </div>
+  ![A simple red sphere](../images/img.red-sphere.png class=pixel)
 
 </div>
 
@@ -714,11 +703,7 @@
 <div class='together'>
 And that yields this picture:
 
-  <div class="render">
-
-  ![A sphere colored according to its normal vectors](../images/img.normals-sphere.png)
-
-  </div>
+  ![A sphere colored according to its normal vectors](../images/img.normals-sphere.png class=pixel)
 
 </div>
 
@@ -877,7 +862,8 @@
 the sphere, the normal will point outward, but if the ray is inside the sphere, the normal will
 point inward.
 
-  ![Figure [normal-directions]: Possible directions for sphere surface-normal geometry](../images/fig.normal-possibilities.jpg)
+  ![Figure [normal-directions]: Possible directions for sphere surface-normal geometry
+  ](../images/fig.normal-possibilities.jpg)
 
 </div>
 
@@ -1231,11 +1217,8 @@
 This yields a picture that is really just a visualization of where the spheres are along with their
 surface normal. This is often a great way to look at your model for flaws and characteristics.
 
-  <div class="render">
-
-  ![Resulting render of normals-colored sphere with ground](../images/img.normals-sphere-ground.png)
-
-  </div>
+  ![Resulting render of normals-colored sphere with ground
+  ](../images/img.normals-sphere-ground.png class=pixel)
 
 </div>
 
@@ -1422,11 +1405,7 @@
 Zooming into the image that is produced, the big change is in edge pixels that are part background
 and part foreground:
 
-  <div class="render">
-
-  ![Close-up of antialiased pixels](../images/img.antialias.png)
-
-  </div>
+  ![Close-up of antialiased pixels](../images/img.antialias.png class=pixel)
 
 </div>
 
@@ -1601,11 +1580,7 @@
 <div class='together'>
 This gives us:
 
-  <div class="render">
-
-  ![First render of a diffuse sphere](../images/img.first-diffuse.jpg)
-
-  </div>
+  ![First render of a diffuse sphere](../images/img.first-diffuse.jpg class=pixel)
 
 </div>
 
@@ -1646,11 +1621,7 @@
 <div class='together'>
 That yields light grey, as we desire:
 
-  <div class="render">
-
-  ![Diffuse sphere, with gamma correction](../images/img.gamma-correct.jpg)
-
-  </div>
+  ![Diffuse sphere, with gamma correction](../images/img.gamma-correct.jpg class=pixel)
 
 </div>
 
@@ -1730,11 +1701,7 @@
 <div class='together'>
 After rendering we get a similar image:
 
-  <div class="render">
-
-  ![Correct rendering of Lambertian spheres](../images/img.correct-lambertian.png)
-
-  </div>
+  ![Correct rendering of Lambertian spheres](../images/img.correct-lambertian.png class=pixel)
 
 It's hard to tell the difference between these two diffuse methods, given that our scene of two
 spheres is so simple, but you should be able to notice two important visual differences:
@@ -1813,11 +1780,8 @@
 
 Gives us the following image:
 
-  <div class="render">
-
-  ![Rendering of diffuse spheres with hemispherical scattering](../images/img.rand-hemispherical.png)
-
-  </div>
+  ![Rendering of diffuse spheres with hemispherical scattering
+  ](../images/img.rand-hemispherical.png class=pixel)
 
 </div>
 
@@ -2140,11 +2104,7 @@
 <div class='together'>
 Which gives:
 
-  <div class="render">
-
-  ![Shiny metal](../images/img.metal-shiny.png)
-
-  </div>
+  ![Shiny metal](../images/img.metal-shiny.png class=pixel)
 
 </div>
 
@@ -2197,11 +2157,7 @@
 <div class='together'>
 We can try that out by adding fuzziness 0.3 and 1.0 to the metals:
 
-  <div class="render">
-
-  ![Fuzzed metal](../images/img.metal-fuzz.png)
-
-  </div>
+  ![Fuzzed metal](../images/img.metal-fuzz.png class=pixel)
 
 </div>
 
@@ -2222,11 +2178,7 @@
 there is a refraction ray at all. For this project, I tried to put two glass balls in our scene, and
 I got this (I have not told you how to do this right or wrong yet, but soon!):
 
-  <div class="render">
-
-  ![Glass first](../images/img.glass-first.png)
-
-  </div>
+  ![Glass first](../images/img.glass-first.png class=pixel)
 
 </div>
 
@@ -2330,11 +2282,7 @@
 
 This gives us the following result:
 
-<div class="render">
-
-  ![Glass sphere that always refracts](../images/img.glass-always-refract.png)
-
-</div>
+  ![Glass sphere that always refracts](../images/img.glass-always-refract.png class=pixel)
 
 
 Total Internal Reflection
@@ -2455,11 +2403,7 @@
 
 We get:
 
-  <div class="render">
-
-  ![Glass sphere that sometimes refracts](../images/img.glass-sometimes-refract.png)
-
-  </div>
+  ![Glass sphere that sometimes refracts](../images/img.glass-sometimes-refract.png class=pixel)
 
 </div>
 
@@ -2544,11 +2488,7 @@
 <div class='together'>
 This gives:
 
-  <div class="render">
-
-  ![A hollow glass sphere](../images/img.glass-hollow.png)
-
-  </div>
+  ![A hollow glass sphere](../images/img.glass-hollow.png class=pixel)
 
 </div>
 
@@ -2625,11 +2565,7 @@
 
 gives:
 
-  <div class="render">
-
-  ![A wide-angle view](../images/img.wide-view.png)
-
-  </div>
+  ![A wide-angle view](../images/img.wide-view.png class=pixel)
 
 </div>
 
@@ -2713,11 +2649,7 @@
 
 to get:
 
-  <div class="render">
-
-  ![A distant view](../images/img.view-distant.png)
-
-  </div>
+  ![A distant view](../images/img.view-distant.png class=pixel)
 
 And we can change field of view:
 
@@ -2728,11 +2660,7 @@
 
 to get:
 
-  <div class="render">
-
-  ![Zooming in](../images/img.view-zoom.png)
-
-  </div>
+  ![Zooming in](../images/img.view-zoom.png class=pixel)
 
 </div>
 
@@ -2874,11 +2802,7 @@
 
 We get:
 
-  <div class="render">
-
-  ![Spheres with depth-of-field](../images/img.depth-of-field.png)
-
-  </div>
+  ![Spheres with depth-of-field](../images/img.depth-of-field.png class=pixel)
 
 </div>
 
@@ -2955,11 +2879,8 @@
 <div class='together'>
 This gives:
 
-  <div class="render">
-
   ![Final scene](../images/img.book1-final.jpg)
 
-  </div>
 </div>
 
 An interesting thing you might note is the glass balls don’t really have shadows which makes them