[gimp-web/testing] Added width/height attr to all <img>

[Pat David <patdavid src gnome org>]

commit fe7a21bc016f1e9f5dad4c9b914e99e308765930
Author: Pat David <patdavid gmail com>
Date:   Wed May 4 11:28:09 2016 -0500

    Added width/height attr to all <img>

 .../Tone_Mapping_Using_GIMP_Levels/index.md        |   44 ++++++++++----------
 1 files changed, 22 insertions(+), 22 deletions(-)
---
diff --git a/content/tutorials/Tone_Mapping_Using_GIMP_Levels/index.md 
b/content/tutorials/Tone_Mapping_Using_GIMP_Levels/index.md
index 51d15fb..10fac9b 100644
--- a/content/tutorials/Tone_Mapping_Using_GIMP_Levels/index.md
+++ b/content/tutorials/Tone_Mapping_Using_GIMP_Levels/index.md
@@ -27,7 +27,7 @@ A very common editing problem is how to lighten the shadows and midtones of an i
 This step-by-step tutorial shows you how to use GIMP's unbounded floating point "Colors/Exposure" operation 
to recover shadow information&mdash;that is, add one or more stops of positive exposure compensation to an 
image's shadows and midtones&mdash;without blowing out or unduly compressing the image highlights. The 
procedure is completely "hand-tunable" using masks and layers, and is as close as you can get to 
non-destructive image editing using high bit depth GIMP 2.9/2.10.
 
 <figure>
-<img src='power-lines.jpg' alt='power-lines'>
+<img src='power-lines.jpg' alt='power-lines' width='768' height='614' >
 <figcaption>
 <em style='font-weight: 400;'>Power lines at noon</em>, before and after tone mapping (aka "shadow 
recovery") using high bit depth GIMP's floating point "Colors/Exposure".<br>
 (Click to view):<br>
@@ -38,7 +38,7 @@ This step-by-step tutorial shows you how to use GIMP's unbounded floating point
 
 <noscript>
 <figure>
-<img src='before-auto-stretch-contrast.jpg' alt='before-auto-stretch-contrast'>
+<img src='before-auto-stretch-contrast.jpg' alt='before-auto-stretch-contrast' width='768' height='614' >
 <figcaption>
 Scene-referred interpolated raw file.
 </figcaption>
@@ -54,7 +54,7 @@ Hight bit depth GIMP is my primary image editor, and I've used the procedure des
 ## A step-by-step example showing how to recover shadow information using high bit depth GIMP's floating 
point "Colors/Exposure"
 
 <figure>
-<img src='tree-exposed-for-sky-ground-is-dark.jpg' alt='tree-exposed-for-sky-ground-is-dark'>
+<img src='tree-exposed-for-sky-ground-is-dark.jpg' alt='tree-exposed-for-sky-ground-is-dark' width='770' 
height='642'>
 <figcaption>
 Using high bit depth GIMP's "Colors/Exposure" to lighten the ground by one stop without blowing out portions 
of the sky.
 
@@ -86,7 +86,7 @@ This step-by-step example provides a sample image and is broken down into five s
 Make a copy of the "tree.png" layer, and label it "+1 stop exposure comp". Then <b>use "Colors/Exposure" to 
add one stop of positive exposure compensation</b>&mdash;Figure 3 below shows the proper settings for the 
"Colors/Exposure" dialog, and Figure 4 shows the result:
 
 <figure>
-<img src="gegl-exposure-add-one-stop-positive-exposure-compensation.jpg" 
alt="levels-add-one-stop-positive-exposure-compensation" >
+<img src="gegl-exposure-add-one-stop-positive-exposure-compensation.jpg" 
alt="levels-add-one-stop-positive-exposure-compensation" width='297' height='314'>
 <figcaption>
 Using "Colors/Exposure" to add one stop of positive exposure compensation.
 </figcaption>
@@ -95,7 +95,7 @@ Using "Colors/Exposure" to add one stop of positive exposure compensation.
 When using "Colors/Exposure" to add one stop of positive exposure compensation, make sure the image really 
is at floating point precision, because integer precision will clip the highlights.
 
 <figure>
-<img src="gegl-exposure-one-stop-positive-exposure-compensation-added.jpg" 
alt="one-stop-positive-exposure-compensation-added" >
+<img src="gegl-exposure-one-stop-positive-exposure-compensation-added.jpg" 
alt="one-stop-positive-exposure-compensation-added" width='632' height='625'>
 <figcaption>At floating point precision, GIMP's "Colors/Exposure" operation is unbounded. This means you can 
use "Colors/Exposure" to add positive exposure compensation without blowing out the highlights. 
 
 <p>Notice the RGB channel values for the four sample points: the channel information that would have been 
clipped using integer precision is encoded using channel values that are greater than 1.0 floating point.</p>
@@ -108,12 +108,12 @@ When using "Colors/Exposure" to add one stop of positive exposure compensation,
 </li>
 
 <li>
-<img style='float: right;' src="add-inverse-grayscale-mask.jpg" alt="add-inverse-grayscale-mask" >
+<img style='float: right;' src="add-inverse-grayscale-mask.jpg" alt="add-inverse-grayscale-mask" width='292' 
height='381'>
 <b>Add an inverse grayscale layer mask</b>: Right-click on the layer and select "Layer/Mask/Add Layer Mask", 
and when the "Add a mask to the Layer" dialog pops up, choose "Grayscale copy of layer" and check the "Invert 
mask" box. 
 <p>As shown in Figure 5 below, at this point the highlights will be brought back into the display range, 
meaning all RGB channel values are between 0.0f and 1.0f. But the image will probably look a little odd (sort 
of cloudy and flat), and depending on the image, the brightest highlights might actually have dark 
splotches&mdash;don't worry! this is temporary.</p>
  
 <figure >
-<img  src="gegl-exposure-inverse-grayscale-mask-added.jpg" alt="gegl-exposure-inverse-grayscale-mask-added" >
+<img  src="gegl-exposure-inverse-grayscale-mask-added.jpg" alt="gegl-exposure-inverse-grayscale-mask-added" 
width='632' height='625'>
 <figcaption>Result of adding an inverse grayscale layer mask to bring the highlights back into the display 
range.<br>
 <p>Adding an inverse grayscale layer mask brings the highlights back into the display range, but at this 
point most images will look flat and cloudy, and some images will have dark splotches in the highlights. The 
next step&mdash;"Auto Stretch Contrast" performed on the mask&mdash;will take care of this problem.</p>
 </figcaption>
@@ -122,12 +122,12 @@ When using "Colors/Exposure" to add one stop of positive exposure compensation,
 
 
 <li>
-<img src="auto-stretch-contrast-mask.jpg" alt="auto-stretch-contrast-mask" style='float:right; margin-left: 
1rem;' >
+<img src="auto-stretch-contrast-mask.jpg" alt="auto-stretch-contrast-mask" style='float:right; margin-left: 
1rem;' width='301' height='230' >
 <b>Click on the layer mask to select it for editing, and then select "Colors/Auto/Stretch Contrast"</b>: 
 <p>"Keep Colors" should be checked (though it doesn't really matter on grayscale images such as layer 
masks). Figure 6 below shows the final result:</p>
 
 <figure>
-<img  src="gegl-exposure-mask-auto-stretched.jpg" alt="gegl-exposure-mask-auto-stretched" >
+<img  src="gegl-exposure-mask-auto-stretched.jpg" alt="gegl-exposure-mask-auto-stretched" width='632' 
height='625'>
 <figcaption>Doing "Auto/Stretch Contrast" on the layer mask removes the "cloudy" appearance, leaving a 
nicely brightened image with intact highlights. <p>"Auto/Stretch Contrast" on the mask is necessary because 
just like the image layer has out of gamut RGB channel values, the inverted grayscale mask contains out of 
gamut grayscale values. "Auto/Stretch Contrast" brings all the mask grayscale values back into the display 
range, allowing the mask to proportionately compensate for the layer's otherwise out-of-gamut RGB channel 
values, masking more in the layer highlights and less/not at all in the image's shadows and midtones.</p>
 
 <p>Notice that one of the sample points still has a blue RGB channel value that is slightly out of gamut. 
The easiest way to deal with this is to "Colors/Exposure" to make a Gamma adjustment of 0.45 <i>on the 
mask</i>, not on the actual image layer. You can make this Gamma adjustment either on the entire mask (works 
well, less effort). Or else you can make the adjustment just on the mask shadows (which correspond to the 
layer highlights), in which case you'd load the mask as a selection, invert the selection, and make the Gamma 
adjustment. Or if the remaining out of gamut channel values are only very slightly out of gamut, make a "New 
from Visible" layer and then "Auto/Stretch Contrast" the result to bring the remaining channel values back 
into gamut.</p></figcaption>
@@ -152,25 +152,25 @@ That's the whole procedure for using "Colors/Exposure" to add a stop of positive
 <li><b>For adding more than one stop of exposure compensation, you can use one or more than one 
positive-exposure-compensation layers.</b> Either way the layer mask(s) will need careful tweaking that's 
very image-specific and also specific to your intended result. Figure 7 shows an example of using two 
exposure compensation layers to add two and a half stops of exposure compensation to the shadows and midtones 
of an image:
 
 <figure>
-<img src="apple-orchard-truck-tone-mapped-using-gimp-colors-exposure.jpg" 
alt="apple-orchard-truck-tone-mapped-using-gimp-colors-exposure" >
+<img src="apple-orchard-truck-tone-mapped-using-gimp-colors-exposure.jpg" 
alt="apple-orchard-truck-tone-mapped-using-gimp-colors-exposure" width='593' height='395'>
 <figcaption>Using GIMP's floating point unbounded Levels plus layer masks to add two stops of positive 
exposure compensation to the shadows and midtones of a photograph of an apple orchard truck that was taken in 
bright sunshine.<br>
 (Click to view):<br>
 <span class='toggle-swap' data-fig-swap='apple-orchard-truck-from-camera.jpg'>1. Image from the camera, 
underexposed to avoid blowing out highlights..</span><br>
 <noscript>
-<img src='apple-orchard-truck-from-camera.jpg' alt='apple-orchard-truck-from-camera' 
style='margin-bottom:1rem;'>
+<img src='apple-orchard-truck-from-camera.jpg' alt='apple-orchard-truck-from-camera' 
style='margin-bottom:1rem;' width='593' height='395'>
 </noscript>
 <span class='toggle-swap' data-fig-swap='apple-orchard-truck-tone-mapped-using-gimp-colors-exposure.jpg'>2. 
After tone mapping/shadow recovery using high bit depth GIMP's floating point "Colors/Exposure".</span><br>
 <noscript>
-<img src='apple-orchard-truck-tone-mapped-using-gimp-colors-exposure.jpg' 
alt='apple-orchard-truck-tone-mapped-using-gimp-colors-exposure' style='margin-bottom:1rem;'>
+<img src='apple-orchard-truck-tone-mapped-using-gimp-colors-exposure.jpg' 
alt='apple-orchard-truck-tone-mapped-using-gimp-colors-exposure' style='margin-bottom:1rem;' width='593' 
height='395'>
 </noscript>
 <span class='toggle-swap' data-fig-swap='apple-orchard-truck-tone-mapped-using-gegl-mantuik.jpg'>3. For 
comparison, Mantuik tone-mapping using the GEGL default settings.</span><br>
 <noscript>
-<img src='apple-orchard-truck-tone-mapped-using-gegl-mantuik.jpg' 
alt='apple-orchard-truck-tone-mapped-using-gegl-mantuik' style='margin-bottom:1rem;'>
+<img src='apple-orchard-truck-tone-mapped-using-gegl-mantuik.jpg' 
alt='apple-orchard-truck-tone-mapped-using-gegl-mantuik' style='margin-bottom:1rem;' width='593' height='395'>
 </noscript>
 
 <p>Using GIMP's floating point "Colors/Exposure" plus layer masks to add two and a half stops of positive 
exposure compensation to the shadows and midtones of a "bright sun" photograph of an apple orchard truck.</p>
 
-<p><img style='float:right;' src="orchard-truck-layer-stack.jpg" alt="orchard-truck-layer-stack" >To the 
right is a screenshot of the layer stack that I used to tone-map the photograph of the apple orchard truck. 
Tone-mapping by hand gives you complete control over the resulting image. Mantuik and other "automagic" 
tone-mapping algorithms are CPU-intensive, unpredictable, and often produce unnatural-looking results.</p>
+<p><img style='float:right;' src="orchard-truck-layer-stack.jpg" alt="orchard-truck-layer-stack" width='465' 
height='432'>To the right is a screenshot of the layer stack that I used to tone-map the photograph of the 
apple orchard truck. Tone-mapping by hand gives you complete control over the resulting image. Mantuik and 
other "automagic" tone-mapping algorithms are CPU-intensive, unpredictable, and often produce 
unnatural-looking results.</p>
 </figcaption>
 </figure>
 </li>
@@ -181,7 +181,7 @@ That's the whole procedure for using "Colors/Exposure" to add a stop of positive
 
 
 <figure>
-<img src='before-auto-stretch-contrast.jpg' alt='before-auto-stretch-contrast'>
+<img src='before-auto-stretch-contrast.jpg' alt='before-auto-stretch-contrast' width='593' height='474'>
 <figcaption>
 Before and after doing "Colors/Auto/Stretch Contrast" on the base layer, plus the final image after tone 
mapping using "Colors/Exposure":<br>
 (Click to view):<br>
@@ -192,17 +192,17 @@ Before and after doing "Colors/Auto/Stretch Contrast" on the base layer, plus th
 <ol style='margin-top: 1rem;'>
 <li>This scene-referred interpolated raw file from the PhotoFlow raw processor (which provides a GIMP 
plug-in for easy opening of raw files) has out-of-display-range RGB channel values that will be brought back 
into the display range by doing "Colors/Auto/Stretch Contrast".</li>
 <noscript>
-<img src='before-auto-stretch-contrast.jpg' alt='before-auto-stretch-contrast' style='margin-top:-0.5rem; 
margin-bottom:1rem;'>
+<img src='before-auto-stretch-contrast.jpg' alt='before-auto-stretch-contrast' style='margin-top:-0.5rem; 
margin-bottom:1rem;' width='593' height='474'>
 </noscript>
 
 <li>After doing "Colors/Auto/Stretch Contrast", shadows are lighter and highlights are darker because the 
dynamic range has been compressed to fit within the display range. This looks like an editing step in the 
wrong direction! but actually it's necessary.</li>
 <noscript>
-<img src='after-auto-stretch-contrast.jpg' alt='after-auto-stretch-contrast' style='margin-top:-0.5rem; 
margin-bottom:1rem;'>
+<img src='after-auto-stretch-contrast.jpg' alt='after-auto-stretch-contrast' style='margin-top:-0.5rem; 
margin-bottom:1rem;' width='593' height='474'>
 </noscript>
 
 <li>Here's the final "Power lines" image after tone mapping the scene-referred interpolated raw file using 
the procedure described in this tutorial.</li>
 <noscript>
-<img src='power-lines.jpg' alt='power-lines' style='margin-top:-0.5rem; margin-bottom:1rem;'>
+<img src='power-lines.jpg' alt='power-lines' style='margin-top:-0.5rem; margin-bottom:1rem;' width='593' 
height='474'>
 </noscript>
 </ol>
 
@@ -218,7 +218,7 @@ Before and after doing "Colors/Auto/Stretch Contrast" on the base layer, plus th
 <li> <b>Dispensing with "useless" shadow and highlight information:</b> Sometimes interpolated raw files of 
photographs of high dynamic range scenes end up with a sprinkling of highlight and shadow pixels that 
contains essentially no useful information. The easiest thing to do with such pixels is to use 
"Colors/Exposure" to set the desired black and white points, and then clip the resulting out of gamut channel 
information.
   <ol style="list-style-type: lower-roman">
   <li><i><b>Useless highlight information:</b></i>
-<p><img style='float:right;' src="histogram-specular-highlights.jpg" alt="histogram-specular-highlights">
+<p><img style='float:right;' src="histogram-specular-highlights.jpg" alt="histogram-specular-highlights" 
width='374' height='322'>
 For the "Power lines" picture shown in Figure 8 above, after doing "Color/Auto/Stretch Contrast", a measly 
48 pixels occupied nearly half the tonal range (see the histogram to the right). A little investigation with 
GIMP's Threshold tool revealed that all 48 pixels are the peak values of specular highlights on the ceramic 
insulators on the power line pole in the foreground.</p> 
 
 <p>In cases where nearly half the histogram is occupied by a sprinkling of specular highlights, clipping the 
pixels is often the best and easiest solution. For the "Power lines" image, the 48 pixels in question carried 
essentially zero information. So I used "Colors/Exposure" to raise the white point, and then used "Tools/GEGL 
Operation/Clip RGB" to actually clip the channel information in the highlights (this time making sure the 
"Clip high pixel values" box was checked). </p>
@@ -239,19 +239,19 @@ For the "Power lines" picture shown in Figure 8 above, after doing "Color/Auto/S
 <li id='blur-to-restore-micro-contrast'><b>Blurring the mask to restore micro contrast:</b> Putting an 
inverse mask on a layer that's used to add positive exposure compensation necessarily slightly flattens micro 
contrast. Depending on your artistic intentions for the image, you might want to blur the mask to restore 
micro contrast. The trick is how to blur the mask without introducing "halos" around the edges of objects in 
the image. Small radius Gaussian blurs produce small but distressingly obvious halos around dark edges. A 
large radius gaussian blur sometimes works but just as often produces a large obvious halo separating the 
brighter and darker portions of the image. For many images a better solution is to blur the mask use an 
edge-respecting filter such as the GIMP <a href="https://github.com/dtschump/gmic";>G'MIC</a> bilateral smooth 
filter:
 
 <figure>
-<img src='without-bilateral-smoothing-of-mask.jpg' alt='without-bilateral-smoothing-of-mask'>
+<img src='without-bilateral-smoothing-of-mask.jpg' alt='without-bilateral-smoothing-of-mask' width='593' 
height='474'>
 <figcaption>Adding exposure compensation with and without bilateral smoothing of the mask.<br>  
 (Click to view):<br>
 <span class='toggle-swap' data-fig-swap='without-bilateral-smoothing-of-mask.jpg'>Without applying bilateral 
smoothing to the mask, micro contrast is flattened.</span><br>
 
 <noscript>
-<img src='without-bilateral-smoothing-of-mask.jpg' alt='without-bilateral-smoothing-of-mask' 
style='margin-bottom: 1rem;'>
+<img src='without-bilateral-smoothing-of-mask.jpg' alt='without-bilateral-smoothing-of-mask' 
style='margin-bottom: 1rem;' width='593' height='474'>
 </noscript>
 
 <span class='toggle-swap' data-fig-swap='with-bilateral-smoothing-of-mask.jpg'>After applying bilateral 
smoothing to the mask, micro contrast is restored.</span>
 
 <noscript>
-<img src='with-bilateral-smoothing-of-mask.jpg' alt='with-bilateral-smoothing-of-mask' style='margin-bottom: 
1rem;'>
+<img src='with-bilateral-smoothing-of-mask.jpg' alt='with-bilateral-smoothing-of-mask' style='margin-bottom: 
1rem;' width='593' height='474'>
 </noscript>
 
 <p>Adding exposure compensation combined with an inverse grayscale mask does flatten micro contrast, which 
might or might not be desireable depending on your artistic intentions for the image. To restore micro 
contrast, try using an edge-respecting blur such as G'MIC's bilateral smoothing filter. GIMP G'MIC doesn't 
work on layer masks. A workaround is to to turn the unblurred mask into a selection, save the selection as a 
channel, and then drag the channel to the layer stack for blurring.</p>