diff --git a/src/ImageProcessor.UnitTests/ImageFactoryUnitTests.cs b/src/ImageProcessor.UnitTests/ImageFactoryUnitTests.cs
index 065cd86c0..9b98f683a 100644
--- a/src/ImageProcessor.UnitTests/ImageFactoryUnitTests.cs
+++ b/src/ImageProcessor.UnitTests/ImageFactoryUnitTests.cs
@@ -130,6 +130,7 @@ namespace ImageProcessor.UnitTests
 
                 ISupportedImageFormat format = imageFactory.CurrentImageFormat;
 
+                // The Image class does not support alpha transparency in bitmaps. 
                 if (format.GetType() == typeof(BitmapFormat))
                 {
                     AssertionHelpers.AssertImagesAreIdentical(
diff --git a/src/ImageProcessor.Web/Helpers/ImageHelpers.cs b/src/ImageProcessor.Web/Helpers/ImageHelpers.cs
index 29d7953a4..536b6f05d 100644
--- a/src/ImageProcessor.Web/Helpers/ImageHelpers.cs
+++ b/src/ImageProcessor.Web/Helpers/ImageHelpers.cs
@@ -64,9 +64,9 @@ namespace ImageProcessor.Web.Helpers
         public static string GetExtension(string input)
         {
             // First filter out any troublesome elements.
-            foreach (Match exlude in ExcludeRegex.Matches(input))
+            foreach (Match exclude in ExcludeRegex.Matches(input))
             {
-                input = input.Replace(exlude.Value, string.Empty);
+                input = input.Replace(exclude.Value, string.Empty);
             }
 
             Match match = FormatRegex.Match(input);
diff --git a/src/ImageProcessor/Settings.StyleCop b/src/ImageProcessor/Settings.StyleCop
index b3c2af428..91085624e 100644
--- a/src/ImageProcessor/Settings.StyleCop
+++ b/src/ImageProcessor/Settings.StyleCop
@@ -10,6 +10,7 @@
       <Value>Laplacian</Value>
       <Value>mmmm</Value>
       <Value>orig</Value>
+      <Value>quantizable</Value>
       <Value>Scharr</Value>
       <Value>Sobel</Value>
       <Value>specifier</Value>
diff --git a/src/TestWebsites/MVC/Views/Home/Bmp.cshtml b/src/TestWebsites/MVC/Views/Home/Bmp.cshtml
index 26b21ad46..de302f81d 100644
--- a/src/TestWebsites/MVC/Views/Home/Bmp.cshtml
+++ b/src/TestWebsites/MVC/Views/Home/Bmp.cshtml
@@ -8,11 +8,11 @@
         <div class="row">
             <div class="col-s-6">
                 <h2>Resized</h2>
-                <img src="/images/Penguins.bmp?width=300" />
+                <img src="/images/format-Penguins.bmp?width=300" />
             </div>
             <div class="col-s-6">
                 <h2>Cropped </h2>
-                <img src="/images/Penguins.bmp?crop=0-0-300-225" />
+                <img src="/images/format-Penguins.bmp?crop=0-0-300-225" />
             </div>
         </div>
     </section>
@@ -21,47 +21,47 @@
         <div class="row">
             <div class="col-s-6">
                 <h3>blackwhite</h3>
-                <img src="/images/Penguins.bmp?width=300&filter=blackwhite" />
+                <img src="/images/format-Penguins.bmp?width=300&filter=blackwhite" />
             </div>
             <div class="col-s-6">
                 <h3>comic</h3>
-                <img src="/images/Penguins.bmp?width=300&filter=comic" />
+                <img src="/images/format-Penguins.bmp?width=300&filter=comic" />
             </div>
         </div>
         <div class="row">
             <div class="col-s-6">
                 <h3>lomograph</h3>
-                <img src="/images/Penguins.bmp?width=300&filter=lomograph" />
+                <img src="/images/format-Penguins.bmp?width=300&filter=lomograph" />
             </div>
             <div class="col-s-6">
                 <h3>greyscale</h3>
-                <img src="/images/Penguins.bmp?width=300&filter=greyscale" />
+                <img src="/images/format-Penguins.bmp?width=300&filter=greyscale" />
             </div>
         </div>
         <div class="row">
             <div class="col-s-6">
                 <h3>polaroid</h3>
-                <img src="/images/Penguins.bmp?width=300&filter=polaroid" />
+                <img src="/images/format-Penguins.bmp?width=300&filter=polaroid" />
             </div>
             <div class="col-s-6">
                 <h3>sepia</h3>
-                <img src="/images/Penguins.bmp?width=300&filter=sepia" />
+                <img src="/images/format-Penguins.bmp?width=300&filter=sepia" />
             </div>
         </div>
         <div class="row">
             <div class="col-s-6">
                 <h3>gotham</h3>
-                <img src="/images/Penguins.bmp?width=300&filter=gotham" />
+                <img src="/images/format-Penguins.bmp?width=300&filter=gotham" />
             </div>
             <div class="col-s-6">
                 <h3>hisatch</h3>
-                <img src="/images/Penguins.bmp?width=300&filter=hisatch" />
+                <img src="/images/format-Penguins.bmp?width=300&filter=hisatch" />
             </div>
         </div>
         <div class="row">
             <div class="col-s-6">
                 <h3>losatch</h3>
-                <img src="/images/Penguins.bmp?width=300&filter=losatch" />
+                <img src="/images/format-Penguins.bmp?width=300&filter=losatch" />
             </div>
         </div>
     </section>
@@ -69,11 +69,11 @@
         <div class="row">
             <div class="col-s-6">
                 <h2>Watermark</h2>
-                <img src="/images/Penguins.bmp?width=300&watermark=text-test|color-fff|size-48|style-italic|opacity-100|position-100-100|shadow-true|font-arial" />
+                <img src="/images/format-Penguins.bmp?width=300&watermark=text-test|color-fff|size-48|style-italic|opacity-100|position-100-100|shadow-true|font-arial" />
             </div>
             <div class="col-s-6">
                 <h2>Format</h2>
-                <img src="/images/Penguins.bmp?width=300&format=jpg" />
+                <img src="/images/format-Penguins.bmp?width=300&format=jpg" />
             </div>
         </div>
     </section>
@@ -81,11 +81,11 @@
         <div class="row">
             <div class="col-s-6">
                 <h2>Rotate</h2>
-                <img src="/images/Penguins.bmp?width=300&rotate=angle-54|bgcolor-fff" />
+                <img src="/images/format-Penguins.bmp?width=300&rotate=angle-54|bgcolor-fff" />
             </div>
             <div class="col-s-6">
                 <h2>Quality</h2>
-                <img src="/images/Penguins.bmp?width=300&quality=5" />
+                <img src="/images/format-Penguins.bmp?width=300&quality=5" />
             </div>
         </div>
     </section>
@@ -93,7 +93,7 @@
         <div class="row">
             <div class="col-s-6">
                 <h2>Alpha</h2>
-                <img src="/images/Penguins.bmp?width=300&alpha=50" />
+                <img src="/images/format-Penguins.bmp?width=300&alpha=50" />
             </div>
         </div>
     </section>
diff --git a/src/TestWebsites/MVC/Views/Home/Gif.cshtml b/src/TestWebsites/MVC/Views/Home/Gif.cshtml
index 61f47111f..c46c464bd 100644
--- a/src/TestWebsites/MVC/Views/Home/Gif.cshtml
+++ b/src/TestWebsites/MVC/Views/Home/Gif.cshtml
@@ -7,11 +7,11 @@
         <div class="row">
             <div class="col-s-6">
                 <h2>Resized</h2>
-                <img src="/images/Penguins.gif?width=300" />
+                <img src="/images/format-Penguins.gif?width=300" />
             </div>
             <div class="col-s-6">
                 <h2>Cropped </h2>
-                <img src="/images/Penguins.gif?crop=0-0-300-225" />
+                <img src="/images/format-Penguins.gif?crop=0-0-300-225" />
             </div>
         </div>
     </section>
@@ -20,47 +20,47 @@
         <div class="row">
             <div class="col-s-6">
                 <h3>blackwhite</h3>
-                <img src="/images/Penguins.gif?width=300&filter=blackwhite" />
+                <img src="/images/format-Penguins.gif?width=300&filter=blackwhite" />
             </div>
             <div class="col-s-6">
                 <h3>comic</h3>
-                <img src="/images/Penguins.gif?width=300&filter=comic" />
+                <img src="/images/format-Penguins.gif?width=300&filter=comic" />
             </div>
         </div>
         <div class="row">
             <div class="col-s-6">
                 <h3>lomograph</h3>
-                <img src="/images/Penguins.gif?width=300&filter=lomograph" />
+                <img src="/images/format-Penguins.gif?width=300&filter=lomograph" />
             </div>
             <div class="col-s-6">
                 <h3>greyscale</h3>
-                <img src="/images/Penguins.gif?width=300&filter=greyscale" />
+                <img src="/images/format-Penguins.gif?width=300&filter=greyscale" />
             </div>
         </div>
         <div class="row">
             <div class="col-s-6">
                 <h3>polaroid</h3>
-                <img src="/images/Penguins.gif?width=300&filter=polaroid" />
+                <img src="/images/format-Penguins.gif?width=300&filter=polaroid" />
             </div>
             <div class="col-s-6">
                 <h3>sepia</h3>
-                <img src="/images/Penguins.gif?width=300&filter=sepia" />
+                <img src="/images/format-Penguins.gif?width=300&filter=sepia" />
             </div>
         </div>
         <div class="row">
             <div class="col-s-6">
                 <h3>gotham</h3>
-                <img src="/images/Penguins.gif?width=300&filter=gotham" />
+                <img src="/images/format-Penguins.gif?width=300&filter=gotham" />
             </div>
             <div class="col-s-6">
                 <h3>hisatch</h3>
-                <img src="/images/Penguins.gif?width=300&filter=hisatch" />
+                <img src="/images/format-Penguins.gif?width=300&filter=hisatch" />
             </div>
         </div>
         <div class="row">
             <div class="col-s-6">
                 <h3>losatch</h3>
-                <img src="/images/Penguins.gif?width=300&filter=losatch" />
+                <img src="/images/format-Penguins.gif?width=300&filter=losatch" />
             </div>
         </div>
     </section>
@@ -68,11 +68,11 @@
         <div class="row">
             <div class="col-s-6">
                 <h2>Watermark</h2>
-                <img src="/images/Penguins.gif?width=300&watermark=text-test|color-fff|size-48|style-italic|opacity-100|position-100-100|shadow-true|font-arial" />
+                <img src="/images/format-Penguins.gif?width=300&watermark=text-test|color-fff|size-48|style-italic|opacity-100|position-100-100|shadow-true|font-arial" />
             </div>
             <div class="col-s-6">
                 <h2>Format</h2>
-                <img src="/images/Penguins.gif?width=300&format=png" />
+                <img src="/images/format-Penguins.gif?width=300&format=png" />
             </div>
         </div>
     </section>
@@ -80,11 +80,11 @@
         <div class="row">
             <div class="col-s-6">
                 <h2>Rotate</h2>
-                <img src="/images/Penguins.gif?width=300&rotate=angle-54|bgcolor-fff" />
+                <img src="/images/format-Penguins.gif?width=300&rotate=angle-54|bgcolor-fff" />
             </div>
             <div class="col-s-6">
                 <h2>Quality</h2>
-                <img src="/images/Penguins.gif?width=300&quality=5" />
+                <img src="/images/format-Penguins.gif?width=300&quality=5" />
             </div>
         </div>
     </section>
@@ -92,7 +92,7 @@
         <div class="row">
             <div class="col-s-6">
                 <h2>Alpha</h2>
-                <img src="/images/Penguins.gif?width=300&alpha=50" />
+                <img src="/images/format-Penguins.gif?width=300&alpha=50" />
             </div>
         </div>
     </section>
@@ -100,7 +100,7 @@
         <div class="row">
             <div class="col-s-6">
                 <h2>Animated</h2>
-                <img src="/images/meter.gif?width=300" />
+                <img src="/images/format-animated.gif?width=300" />
             </div>
         </div>
     </section>
diff --git a/src/TestWebsites/MVC/Views/Home/Index.cshtml b/src/TestWebsites/MVC/Views/Home/Index.cshtml
index 33cc843d0..bceabd8ff 100644
--- a/src/TestWebsites/MVC/Views/Home/Index.cshtml
+++ b/src/TestWebsites/MVC/Views/Home/Index.cshtml
@@ -7,7 +7,7 @@
         <div class="row">
             <div class="col-s-6">
                 <h2>Resized</h2>
-                <img src="/images/Penguins.jpg?width=300" />
+                <img src="/images/format-Penguins.jpg?width=300" />
                 <h3>Foreign language test.</h3>
                 <img src="/images/udendørs.jpg?width=300" />
                 <img src="/images/udendørs.jpg?preset=demo&filter=comic" />
@@ -16,10 +16,10 @@
             </div>
             <div class="col-s-6">
                 <h2>Cropped </h2>
-                <img src="/images/Penguins.jpg?crop=0,0,300,225" />
+                <img src="/images/format-Penguins.jpg?crop=0,0,300,225" />
 
                 <h3>Cropped Percent</h3>
-                <img src="/images/Penguins.jpg?width=300&height300&crop=0.1,0.2,0.1,0.6&cropmode=percent" />
+                <img src="/images/format-Penguins.jpg?width=300&height300&crop=0.1,0.2,0.1,0.6&cropmode=percent" />
                 <img src="/images/bus.jpg?width=311" />
             </div>
         </div>
@@ -28,7 +28,7 @@
         <div class="row">
             <h2>Reside Pad</h2>
             <div class="col-s-4">
-                <img src="/images/Penguins.jpg?width=300&height=500" />
+                <img src="/images/format-Penguins.jpg?width=300&height=500" />
             </div>
             <div class="col-s-8">
                 <img src="/images/udendørs.jpg?width=600&height=250" />
@@ -39,7 +39,7 @@
         <div class="row">
             <h2>Resize Crop</h2>
             <div class="col-s-4">
-                <img src="/images/Penguins.jpg?width=300&height=500&mode=crop" />
+                <img src="/images/format-Penguins.jpg?width=300&height=500&mode=crop" />
             </div>
             <div class="col-s-8">
                 <img src="/images/udendørs.jpg?width=600&height=250&mode=crop" />
@@ -51,7 +51,7 @@
         <div class="row">
             <h2>Resize Max</h2>
             <div class="col-s-4">
-                <img src="/images/Penguins.jpg?width=300&height=500&mode=max" />
+                <img src="/images/format-Penguins.jpg?width=300&height=500&mode=max" />
             </div>
             <div class="col-s-8">
                 <img src="/images/udendørs.jpg?width=600&height=250&mode=max" />
@@ -62,7 +62,7 @@
         <div class="row">
             <h2>Resize Max - No Upscale</h2>
             <div class="col-s-4">
-                <img src="/images/Penguins-200.jpg?width=300&height=500&mode=max&upscale=false" />
+                <img src="/images/format-Penguins-200.jpg?width=300&height=500&mode=max&upscale=false" />
             </div>
             <div class="col-s-8">
                 <img src="/images/udendørs-374.jpg?width=600&height=250&mode=max&upscale=false" />
@@ -73,7 +73,7 @@
         <div class="row">
             <h2>Resize Stretch</h2>
             <div class="col-s-4">
-                <img src="/images/Penguins.jpg?width=300&height=500&mode=stretch" />
+                <img src="/images/format-Penguins.jpg?width=300&height=500&mode=stretch" />
             </div>
             <div class="col-s-8">
                 <img src="/images/udendørs.jpg?width=600&height=250&mode=stretch" />
@@ -85,47 +85,47 @@
         <div class="row">
             <div class="col-s-6">
                 <h3>blackwhite</h3>
-                <img src="/images/Penguins.jpg?width=300&filter=blackwhite" />
+                <img src="/images/format-Penguins.jpg?width=300&filter=blackwhite" />
             </div>
             <div class="col-s-6">
                 <h3>comic</h3>
-                <img src="/images/Penguins.jpg?width=300&filter=comic" />
+                <img src="/images/format-Penguins.jpg?width=300&filter=comic" />
             </div>
         </div>
         <div class="row">
             <div class="col-s-6">
                 <h3>lomograph</h3>
-                <img src="/images/Penguins.jpg?width=300&filter=lomograph" />
+                <img src="/images/format-Penguins.jpg?width=300&filter=lomograph" />
             </div>
             <div class="col-s-6">
                 <h3>greyscale</h3>
-                <img src="/images/Penguins.jpg?width=300&filter=greyscale" />
+                <img src="/images/format-Penguins.jpg?width=300&filter=greyscale" />
             </div>
         </div>
         <div class="row">
             <div class="col-s-6">
                 <h3>polaroid</h3>
-                <img src="/images/Penguins.jpg?width=300&filter=polaroid" />
+                <img src="/images/format-Penguins.jpg?width=300&filter=polaroid" />
             </div>
             <div class="col-s-6">
                 <h3>sepia</h3>
-                <img src="/images/Penguins.jpg?width=300&filter=sepia" />
+                <img src="/images/format-Penguins.jpg?width=300&filter=sepia" />
             </div>
         </div>
         <div class="row">
             <div class="col-s-6">
                 <h3>gotham</h3>
-                <img src="/images/Penguins.jpg?width=300&filter=gotham" />
+                <img src="/images/format-Penguins.jpg?width=300&filter=gotham" />
             </div>
             <div class="col-s-6">
                 <h3>hisatch</h3>
-                <img src="/images/Penguins.jpg?width=300&filter=hisatch" />
+                <img src="/images/format-Penguins.jpg?width=300&filter=hisatch" />
             </div>
         </div>
         <div class="row">
             <div class="col-s-6">
                 <h3>losatch</h3>
-                <img src="/images/Penguins.jpg?width=300&filter=losatch" />
+                <img src="/images/format-Penguins.jpg?width=300&filter=losatch" />
             </div>
         </div>
     </section>
@@ -133,11 +133,11 @@
         <div class="row">
             <div class="col-s-6">
                 <h2>Watermark</h2>
-                <img src="/images/Penguins.jpg?width=300&watermark=text-This+is+a+long+body+of+copy+that+should+wrap|color-fff|size-24|style-italic|opacity-100|position-100-100|shadow-true|font-arial" />
+                <img src="/images/format-Penguins.jpg?width=300&watermark=text-This+is+a+long+body+of+copy+that+should+wrap|color-fff|size-24|style-italic|opacity-100|position-100-100|shadow-true|font-arial" />
             </div>
             <div class="col-s-6">
                 <h2>Format</h2>
-                <img src="/images/Penguins.jpg?width=300&format=gif" />
+                <img src="/images/format-Penguins.jpg?width=300&format=gif" />
             </div>
         </div>
     </section>
@@ -145,11 +145,11 @@
         <div class="row">
             <div class="col-s-6">
                 <h2>Rotate</h2>
-                <img src="/images/Penguins.jpg?width=300&rotate=angle-54,bgcolor-fff" />
+                <img src="/images/format-Penguins.jpg?width=300&rotate=angle-54,bgcolor-fff" />
             </div>
             <div class="col-s-6">
                 <h2>Quality</h2>
-                <img src="/images/Penguins.jpg?width=300&quality=5" />
+                <img src="/images/format-Penguins.jpg?width=300&quality=5" />
             </div>
         </div>
     </section>
@@ -157,7 +157,7 @@
         <div class="row">
             <div class="col-s-6">
                 <h2>Alpha</h2>
-                <img src="/images/Penguins.jpg?width=300&format=png&alpha=50" />
+                <img src="/images/format-Penguins.jpg?width=300&format=png&alpha=50" />
             </div>
             <div class="col-s-6">
                 <h2>Remote</h2>
@@ -168,11 +168,11 @@
         <div class="row">
             <div class="col-s-6">
                 <h2>Flip - horizontal</h2>
-                <img src="/images/Penguins.jpg?width=300&flip=horizontal" />
+                <img src="/images/format-Penguins.jpg?width=300&flip=horizontal" />
             </div>
             <div class="col-s-6">
                 <h2>Flip - vertical</h2>
-                <img src="/images/Penguins.jpg?width=300&flip=vertical" />
+                <img src="/images/format-Penguins.jpg?width=300&flip=vertical" />
             </div>
         </div>
     </section>
@@ -180,11 +180,11 @@
         <div class="row">
             <div class="col-s-6">
                 <h2>Gaussian Blur</h2>
-                <img src="/images/Penguins.jpg?width=300&blur=11,sigma-1.5,threshold-10" />
+                <img src="/images/format-Penguins.jpg?width=300&blur=11,sigma-1.5,threshold-10" />
             </div>
             <div class="col-s-6">
                 <h2>Gaussian Sharpen</h2>
-                <img src="/images/Penguins.jpg?width=300&sharpen=11,sigma-1.5,threshold-10" />
+                <img src="/images/format-Penguins.jpg?width=300&sharpen=11,sigma-1.5,threshold-10" />
             </div>
         </div>
     </section>
@@ -192,11 +192,11 @@
         <div class="row">
             <div class="col-s-6">
                 <h2>Tint rgba</h2>
-                <img src="/images/Penguins.jpg?width=300&tint=175,118,166,255" />
+                <img src="/images/format-Penguins.jpg?width=300&tint=175,118,166,255" />
             </div>
             <div class="col-s-6">
                 <h2>Tint Hex</h2>
-                <img src="/images/Penguins.jpg?width=300&tint=af76a6" />
+                <img src="/images/format-Penguins.jpg?width=300&tint=af76a6" />
             </div>
         </div>
     </section>
diff --git a/src/TestWebsites/MVC/Views/Home/Png.cshtml b/src/TestWebsites/MVC/Views/Home/Png.cshtml
index e7619e233..303c2daaf 100644
--- a/src/TestWebsites/MVC/Views/Home/Png.cshtml
+++ b/src/TestWebsites/MVC/Views/Home/Png.cshtml
@@ -7,11 +7,11 @@
         <div class="row">
             <div class="col-s-6">
                 <h2>Resized</h2>
-                <img src="/images/Penguins.png?width=300" />
+                <img src="/images/format-Penguins.png?width=300" />
             </div>
             <div class="col-s-6">
                 <h2>Cropped </h2>
-                <img src="/images/Penguins.png?crop=0-0-300-225" />
+                <img src="/images/format-Penguins.png?crop=0-0-300-225" />
             </div>
         </div>
     </section>
@@ -20,47 +20,47 @@
         <div class="row">
             <div class="col-s-6">
                 <h3>blackwhite</h3>
-                <img src="/images/Penguins.png?width=300&filter=blackwhite" />
+                <img src="/images/format-Penguins.png?width=300&filter=blackwhite" />
             </div>
             <div class="col-s-6">
                 <h3>comic</h3>
-                <img src="/images/Penguins.png?width=300&filter=comic" />
+                <img src="/images/format-Penguins.png?width=300&filter=comic" />
             </div>
         </div>
         <div class="row">
             <div class="col-s-6">
                 <h3>lomograph</h3>
-                <img src="/images/Penguins.png?width=300&filter=lomograph" />
+                <img src="/images/format-Penguins.png?width=300&filter=lomograph" />
             </div>
             <div class="col-s-6">
                 <h3>greyscale</h3>
-                <img src="/images/Penguins.png?width=300&filter=greyscale" />
+                <img src="/images/format-Penguins.png?width=300&filter=greyscale" />
             </div>
         </div>
         <div class="row">
             <div class="col-s-6">
                 <h3>polaroid</h3>
-                <img src="/images/Penguins.png?width=300&filter=polaroid" />
+                <img src="/images/format-Penguins.png?width=300&filter=polaroid" />
             </div>
             <div class="col-s-6">
                 <h3>sepia</h3>
-                <img src="/images/Penguins.png?width=300&filter=sepia" />
+                <img src="/images/format-Penguins.png?width=300&filter=sepia" />
             </div>
         </div>
         <div class="row">
             <div class="col-s-6">
                 <h3>gotham</h3>
-                <img src="/images/Penguins.png?width=300&filter=gotham" />
+                <img src="/images/format-Penguins.png?width=300&filter=gotham" />
             </div>
             <div class="col-s-6">
                 <h3>hisatch</h3>
-                <img src="/images/Penguins.png?width=300&filter=hisatch" />
+                <img src="/images/format-Penguins.png?width=300&filter=hisatch" />
             </div>
         </div>
         <div class="row">
             <div class="col-s-6">
                 <h3>losatch</h3>
-                <img src="/images/Penguins.png?width=300&filter=losatch" />
+                <img src="/images/format-Penguins.png?width=300&filter=losatch" />
             </div>
         </div>
     </section>
@@ -68,11 +68,11 @@
         <div class="row">
             <div class="col-s-6">
                 <h2>Watermark</h2>
-                <img src="/images/Penguins.png?width=300&watermark=text-test|color-fff|size-48|style-italic|opacity-100|position-100-100|shadow-true|font-arial" />
+                <img src="/images/format-Penguins.png?width=300&watermark=text-test|color-fff|size-48|style-italic|opacity-100|position-100-100|shadow-true|font-arial" />
             </div>
             <div class="col-s-6">
                 <h2>Format</h2>
-                <img src="/images/Penguins.png?width=300&format=bmp" />
+                <img src="/images/format-Penguins.png?width=300&format=bmp" />
             </div>
         </div>
     </section>
@@ -80,11 +80,11 @@
         <div class="row">
             <div class="col-s-6">
                 <h2>Rotate</h2>
-                <img src="/images/Penguins.png?width=300&rotate=angle-54|bgcolor-fff" />
+                <img src="/images/format-Penguins.png?width=300&rotate=angle-54|bgcolor-fff" />
             </div>
             <div class="col-s-6">
                 <h2>Quality</h2>
-                <img src="/images/Penguins.png?width=300&quality=5" />
+                <img src="/images/format-Penguins.png?width=300&quality=5" />
             </div>
         </div>
     </section>
@@ -92,14 +92,14 @@
         <div class="row">
             <div class="col-s-6">
                 <h2>Alpha</h2>
-                <img src="/images/Penguins.png?width=300&alpha=50" />
+                <img src="/images/format-Penguins.png?width=300&alpha=50" />
             </div>
             <div class="col-s-6">
                 <h2>Rounded Corners</h2>
                 <h4>Old Syntax</h4>
-                <img src="/images/Penguins.png?width=300&roundedcorners=radius-26|tl-true|tr-false|bl-true|br-false" />
+                <img src="/images/format-Penguins.png?width=300&roundedcorners=radius-26|tl-true|tr-false|bl-true|br-false" />
                 <h4>New Syntax</h4>
-                <img src="/images/Penguins.png?width=300&roundedcorners=26&tl=true&tr=false&bl=true&br=false" />
+                <img src="/images/format-Penguins.png?width=300&roundedcorners=26&tl=true&tr=false&bl=true&br=false" />
             </div>
         </div>
     </section>
diff --git a/src/TestWebsites/MVC/Views/Home/Png8.cshtml b/src/TestWebsites/MVC/Views/Home/Png8.cshtml
index 8784c836f..0aaacc6df 100644
--- a/src/TestWebsites/MVC/Views/Home/Png8.cshtml
+++ b/src/TestWebsites/MVC/Views/Home/Png8.cshtml
@@ -8,11 +8,11 @@
         <div class="row">
             <div class="col-s-6">
                 <h2>Resized</h2>
-                <img src="/images/Penguins-8.png?width=300" />
+                <img src="/images/format-Penguins-8bit.png?width=300" />
             </div>
             <div class="col-s-6">
                 <h2>Cropped </h2>
-                <img src="/images/Penguins-8.png?crop=0-0-300-225" />
+                <img src="/images/format-Penguins-8bit.png?crop=0-0-300-225" />
             </div>
         </div>
     </section>
@@ -21,47 +21,47 @@
         <div class="row">
             <div class="col-s-6">
                 <h3>blackwhite</h3>
-                <img src="/images/Penguins-8.png?width=300&filter=blackwhite" />
+                <img src="/images/format-Penguins-8bit.png?width=300&filter=blackwhite" />
             </div>
             <div class="col-s-6">
                 <h3>comic</h3>
-                <img src="/images/Penguins-8.png?width=300&filter=comic" />
+                <img src="/images/format-Penguins-8bit.png?width=300&filter=comic" />
             </div>
         </div>
         <div class="row">
             <div class="col-s-6">
                 <h3>lomograph</h3>
-                <img src="/images/Penguins-8.png?width=300&filter=lomograph" />
+                <img src="/images/format-Penguins-8bit.png?width=300&filter=lomograph" />
             </div>
             <div class="col-s-6">
                 <h3>greyscale</h3>
-                <img src="/images/Penguins-8.png?width=300&filter=greyscale" />
+                <img src="/images/format-Penguins-8bit.png?width=300&filter=greyscale" />
             </div>
         </div>
         <div class="row">
             <div class="col-s-6">
                 <h3>polaroid</h3>
-                <img src="/images/Penguins-8.png?width=300&filter=polaroid" />
+                <img src="/images/format-Penguins-8bit.png?width=300&filter=polaroid" />
             </div>
             <div class="col-s-6">
                 <h3>sepia</h3>
-                <img src="/images/Penguins-8.png?width=300&filter=sepia" />
+                <img src="/images/format-Penguins-8bit.png?width=300&filter=sepia" />
             </div>
         </div>
         <div class="row">
             <div class="col-s-6">
                 <h3>gotham</h3>
-                <img src="/images/Penguins-8.png?width=300&filter=gotham" />
+                <img src="/images/format-Penguins-8bit.png?width=300&filter=gotham" />
             </div>
             <div class="col-s-6">
                 <h3>hisatch</h3>
-                <img src="/images/Penguins-8.png?width=300&filter=hisatch" />
+                <img src="/images/format-Penguins-8bit.png?width=300&filter=hisatch" />
             </div>
         </div>
         <div class="row">
             <div class="col-s-6">
                 <h3>losatch</h3>
-                <img src="/images/Penguins-8.png?width=300&filter=losatch" />
+                <img src="/images/format-Penguins-8bit.png?width=300&filter=losatch" />
             </div>
         </div>
     </section>
@@ -69,11 +69,11 @@
         <div class="row">
             <div class="col-s-6">
                 <h2>Watermark</h2>
-                <img src="/images/Penguins-8.png?width=300&watermark=text-test|color-fff|size-48|style-italic|opacity-100|position-100-100|shadow-true|font-arial" />
+                <img src="/images/format-Penguins-8bit.png?width=300&watermark=text-test|color-fff|size-48|style-italic|opacity-100|position-100-100|shadow-true|font-arial" />
             </div>
             <div class="col-s-6">
                 <h2>Format</h2>
-                <img src="/images/Penguins-8.png?width=300&format=bmp" />
+                <img src="/images/format-Penguins-8bit.png?width=300&format=bmp" />
             </div>
         </div>
     </section>
@@ -81,11 +81,11 @@
         <div class="row">
             <div class="col-s-6">
                 <h2>Rotate</h2>
-                <img src="/images/Penguins-8.png?width=300&rotate=angle-54|bgcolor-fff" />
+                <img src="/images/format-Penguins-8bit.png?width=300&rotate=angle-54|bgcolor-fff" />
             </div>
             <div class="col-s-6">
                 <h2>Quality</h2>
-                <img src="/images/Penguins-8.png?width=300&quality=5" />
+                <img src="/images/format-Penguins-8bit.png?width=300&quality=5" />
             </div>
         </div>
     </section>
@@ -93,7 +93,7 @@
         <div class="row">
             <div class="col-s-6">
                 <h2>Alpha</h2>
-                <img src="/images/Penguins-8.png?width=300&alpha=50" />
+                <img src="/images/format-Penguins-8bit.png?width=300&alpha=50" />
             </div>
         </div>
     </section>
diff --git a/src/TestWebsites/MVC/Views/Home/Tiff.cshtml b/src/TestWebsites/MVC/Views/Home/Tiff.cshtml
index 091e068fb..5722e5f17 100644
--- a/src/TestWebsites/MVC/Views/Home/Tiff.cshtml
+++ b/src/TestWebsites/MVC/Views/Home/Tiff.cshtml
@@ -7,11 +7,11 @@
         <div class="row">
             <div class="col-s-6">
                 <h2>Resized</h2>
-                <img src="/images/Penguins.tif?width=300" />
+                <img src="/images/format-Penguins.tif?width=300" />
             </div>
             <div class="col-s-6">
                 <h2>Cropped </h2>
-                <img src="/images/Penguins.tif?crop=0-0-300-225" />
+                <img src="/images/format-Penguins.tif?crop=0-0-300-225" />
             </div>
         </div>
     </section>
@@ -20,47 +20,47 @@
         <div class="row">
             <div class="col-s-6">
                 <h3>blackwhite</h3>
-                <img src="/images/Penguins.tif?width=300&filter=blackwhite" />
+                <img src="/images/format-Penguins.tif?width=300&filter=blackwhite" />
             </div>
             <div class="col-s-6">
                 <h3>comic</h3>
-                <img src="/images/Penguins.tif?width=300&filter=comic" />
+                <img src="/images/format-Penguins.tif?width=300&filter=comic" />
             </div>
         </div>
         <div class="row">
             <div class="col-s-6">
                 <h3>lomograph</h3>
-                <img src="/images/Penguins.tif?width=300&filter=lomograph" />
+                <img src="/images/format-Penguins.tif?width=300&filter=lomograph" />
             </div>
             <div class="col-s-6">
                 <h3>greyscale</h3>
-                <img src="/images/Penguins.tif?width=300&filter=greyscale" />
+                <img src="/images/format-Penguins.tif?width=300&filter=greyscale" />
             </div>
         </div>
         <div class="row">
             <div class="col-s-6">
                 <h3>polaroid</h3>
-                <img src="/images/Penguins.tif?width=300&filter=polaroid" />
+                <img src="/images/format-Penguins.tif?width=300&filter=polaroid" />
             </div>
             <div class="col-s-6">
                 <h3>sepia</h3>
-                <img src="/images/Penguins.tif?width=300&filter=sepia" />
+                <img src="/images/format-Penguins.tif?width=300&filter=sepia" />
             </div>
         </div>
         <div class="row">
             <div class="col-s-6">
                 <h3>gotham</h3>
-                <img src="/images/Penguins.tif?width=300&filter=gotham" />
+                <img src="/images/format-Penguins.tif?width=300&filter=gotham" />
             </div>
             <div class="col-s-6">
                 <h3>hisatch</h3>
-                <img src="/images/Penguins.tif?width=300&filter=hisatch" />
+                <img src="/images/format-Penguins.tif?width=300&filter=hisatch" />
             </div>
         </div>
         <div class="row">
             <div class="col-s-6">
                 <h3>losatch</h3>
-                <img src="/images/Penguins.tif?width=300&filter=losatch" />
+                <img src="/images/format-Penguins.tif?width=300&filter=losatch" />
             </div>
         </div>
     </section>
@@ -68,11 +68,11 @@
         <div class="row">
             <div class="col-s-6">
                 <h2>Watermark</h2>
-                <img src="/images/Penguins.tif?width=300&watermark=text-test|color-fff|size-48|style-italic|opacity-100|position-100-100|shadow-true|font-arial" />
+                <img src="/images/format-Penguins.tif?width=300&watermark=text-test|color-fff|size-48|style-italic|opacity-100|position-100-100|shadow-true|font-arial" />
             </div>
             <div class="col-s-6">
                 <h2>Format</h2>
-                <img src="/images/Penguins.tif?width=300&format=bmp" />
+                <img src="/images/format-Penguins.tif?width=300&format=bmp" />
             </div>
         </div>
     </section>
@@ -80,11 +80,11 @@
         <div class="row">
             <div class="col-s-6">
                 <h2>Rotate</h2>
-                <img src="/images/Penguins.tif?width=300&rotate=angle-54|bgcolor-fff" />
+                <img src="/images/format-Penguins.tif?width=300&rotate=angle-54|bgcolor-fff" />
             </div>
             <div class="col-s-6">
                 <h2>Quality</h2>
-                <img src="/images/Penguins.tif?width=300&quality=5" />
+                <img src="/images/format-Penguins.tif?width=300&quality=5" />
             </div>
         </div>
     </section>
@@ -92,7 +92,7 @@
         <div class="row">
             <div class="col-s-6">
                 <h2>Alpha</h2>
-                <img src="/images/Penguins.tif?width=300&alpha=50" />
+                <img src="/images/format-Penguins.tif?width=300&alpha=50" />
             </div>
         </div>
     </section>
diff --git a/src/TestWebsites/MVC/Views/Home/WebP.cshtml b/src/TestWebsites/MVC/Views/Home/WebP.cshtml
index ff03d1240..27fd95245 100644
--- a/src/TestWebsites/MVC/Views/Home/WebP.cshtml
+++ b/src/TestWebsites/MVC/Views/Home/WebP.cshtml
@@ -8,11 +8,11 @@
         <div class="row">
             <div class="col-s-6">
                 <h2>Resized</h2>
-                <img src="/images/Penguins.bmp?format=webp&width=300" />
+                <img src="/images/format-Penguins.bmp?format=webp&width=300" />
             </div>
             <div class="col-s-6">
                 <h2>Cropped </h2>
-                <img src="/images/Penguins.bmp?format=webp&crop=0-0-300-225" />
+                <img src="/images/format-Penguins.bmp?format=webp&crop=0-0-300-225" />
             </div>
         </div>
     </section>
@@ -21,47 +21,47 @@
         <div class="row">
             <div class="col-s-6">
                 <h3>blackwhite</h3>
-                <img src="/images/Penguins.bmp?format=webp&width=300&filter=blackwhite" />
+                <img src="/images/format-Penguins.bmp?format=webp&width=300&filter=blackwhite" />
             </div>
             <div class="col-s-6">
                 <h3>comic</h3>
-                <img src="/images/Penguins.bmp?format=webp&width=300&filter=comic" />
+                <img src="/images/format-Penguins.bmp?format=webp&width=300&filter=comic" />
             </div>
         </div>
         <div class="row">
             <div class="col-s-6">
                 <h3>lomograph</h3>
-                <img src="/images/Penguins.bmp?format=webp&width=300&filter=lomograph" />
+                <img src="/images/format-Penguins.bmp?format=webp&width=300&filter=lomograph" />
             </div>
             <div class="col-s-6">
                 <h3>greyscale</h3>
-                <img src="/images/Penguins.bmp?format=webp&width=300&filter=greyscale" />
+                <img src="/images/format-Penguins.bmp?format=webp&width=300&filter=greyscale" />
             </div>
         </div>
         <div class="row">
             <div class="col-s-6">
                 <h3>polaroid</h3>
-                <img src="/images/Penguins.bmp?format=webp&width=300&filter=polaroid" />
+                <img src="/images/format-Penguins.bmp?format=webp&width=300&filter=polaroid" />
             </div>
             <div class="col-s-6">
                 <h3>sepia</h3>
-                <img src="/images/Penguins.bmp?format=webp&width=300&filter=sepia" />
+                <img src="/images/format-Penguins.bmp?format=webp&width=300&filter=sepia" />
             </div>
         </div>
         <div class="row">
             <div class="col-s-6">
                 <h3>gotham</h3>
-                <img src="/images/Penguins.bmp?format=webp&width=300&filter=gotham" />
+                <img src="/images/format-Penguins.bmp?format=webp&width=300&filter=gotham" />
             </div>
             <div class="col-s-6">
                 <h3>hisatch</h3>
-                <img src="/images/Penguins.bmp?format=webp&width=300&filter=hisatch" />
+                <img src="/images/format-Penguins.bmp?format=webp&width=300&filter=hisatch" />
             </div>
         </div>
         <div class="row">
             <div class="col-s-6">
                 <h3>losatch</h3>
-                <img src="/images/Penguins.bmp?format=webp&width=300&filter=losatch" />
+                <img src="/images/format-Penguins.bmp?format=webp&width=300&filter=losatch" />
             </div>
         </div>
     </section>
@@ -69,11 +69,11 @@
         <div class="row">
             <div class="col-s-6">
                 <h2>Watermark</h2>
-                <img src="/images/Penguins.bmp?format=webp&width=300&watermark=text-test|color-fff|size-48|style-italic|opacity-100|position-100-100|shadow-true|font-arial" />
+                <img src="/images/format-Penguins.bmp?format=webp&width=300&watermark=text-test|color-fff|size-48|style-italic|opacity-100|position-100-100|shadow-true|font-arial" />
             </div>
             <div class="col-s-6">
                 <h2>Format</h2>
-                <img src="/images/Penguins.bmp?format=webp&width=300" />
+                <img src="/images/format-Penguins.bmp?format=webp&width=300" />
             </div>
         </div>
     </section>
@@ -81,11 +81,11 @@
         <div class="row">
             <div class="col-s-6">
                 <h2>Rotate</h2>
-                <img src="/images/Penguins.bmp?format=webp&width=300&rotate=angle-54|bgcolor-fff" />
+                <img src="/images/format-Penguins.bmp?format=webp&width=300&rotate=angle-54|bgcolor-fff" />
             </div>
             <div class="col-s-6">
                 <h2>Quality</h2>
-                <img src="/images/Penguins.bmp?format=webp&width=300&quality=5" />
+                <img src="/images/format-Penguins.bmp?format=webp&width=300&quality=5" />
             </div>
         </div>
     </section>
@@ -93,7 +93,7 @@
         <div class="row">
             <div class="col-s-6">
                 <h2>Alpha</h2>
-                <img src="/images/Penguins.bmp?format=webp&width=300&alpha=50" />
+                <img src="/images/format-Penguins.bmp?format=webp&width=300&alpha=50" />
             </div>
         </div>
     </section>