diff --git a/site/index.md b/site/index.md
index 92269a2229..3ac6d07454 100644
--- a/site/index.md
+++ b/site/index.md
@@ -19,39 +19,39 @@ Click on any image below to see the source code that generated the image.
   <tr><th>Shapes</th><th>Bézier Curves</th></tr>
   <tr>
     <td>
-      <a href='https://fiddle.skia.org/c/@shapes'><img src='https://fiddle.skia.org/c/@shapes_raster.png'></a>
+      <a href='https://fiddle.skia.org/c/@shapes'><img src='https://fiddle.skia.org/i/@shapes_raster.png'></a>
     </td>
     <td>
-      <a href='https://fiddle.skia.org/c/@bezier_curves'><img src='https://fiddle.skia.org/c/@bezier_curves_raster.png'></a>
+      <a href='https://fiddle.skia.org/c/@bezier_curves'><img src='https://fiddle.skia.org/i/@bezier_curves_raster.png'></a>
     </td>
   </tr>
 
   <tr><th>Translations and Rotations</th><th>Text Rendering</th></tr>
   <tr>
     <td>
-      <a href='https://fiddle.skia.org/c/@rotations'><img src='https://fiddle.skia.org/c/@rotations_raster.png'></a>
+      <a href='https://fiddle.skia.org/c/@rotations'><img src='https://fiddle.skia.org/i/@rotations_raster.png'></a>
     </td>
     <td>
-      <a href='https://fiddle.skia.org/c/@text_rendering'><img src='https://fiddle.skia.org/c/@text_rendering_raster.png'></a>
+      <a href='https://fiddle.skia.org/c/@text_rendering'><img src='https://fiddle.skia.org/i/@text_rendering_raster.png'></a>
     </td>
   </tr>
 
   <tr><th>Discrete Path Effects</th><th>Composed Path Effects</th></tr>
   <tr>
     <td>
-      <a href='https://fiddle.skia.org/c/@discrete_path'><img src='https://fiddle.skia.org/c/@discrete_path_raster.png'></a>
+      <a href='https://fiddle.skia.org/c/@discrete_path'><img src='https://fiddle.skia.org/i/@discrete_path_raster.png'></a>
     </td>
     <td>
-      <a href='https://fiddle.skia.org/c/@compose_path'><img src='https://fiddle.skia.org/c/@compose_path_raster.png'></a>
+      <a href='https://fiddle.skia.org/c/@compose_path'><img src='https://fiddle.skia.org/i/@compose_path_raster.png'></a>
     </td>
   </tr>
   <tr><th>Sum Path Effects</th><th>Shaders</th></tr>
   <tr>
     <td>
-      <a href='https://fiddle.skia.org/c/@sum_path_effect'><img src='https://fiddle.skia.org/c/@sum_path_effect_raster.png'></a>
+      <a href='https://fiddle.skia.org/c/@sum_path_effect'><img src='https://fiddle.skia.org/i/@sum_path_effect_raster.png'></a>
     </td>
     <td>
-      <a href='https://fiddle.skia.org/c/@shader'><img src='https://fiddle.skia.org/c/@shader_raster.png'></a>
+      <a href='https://fiddle.skia.org/c/@shader'><img src='https://fiddle.skia.org/i/@shader_raster.png'></a>
     </td>
   </tr>
 </table>
diff --git a/site/user/api/skcanvas.md b/site/user/api/skcanvas.md
index 03f09556b3..818ef137a0 100644
--- a/site/user/api/skcanvas.md
+++ b/site/user/api/skcanvas.md
@@ -33,7 +33,7 @@ heptagram.  This function can be cut and pasted into
     }
 
 <a href='https://fiddle.skia.org/c/@skcanvas_star'><img
-  src='https://fiddle.skia.org/c/@skcanvas_star_raster.png'></a>
+  src='https://fiddle.skia.org/i/@skcanvas_star_raster.png'></a>
 
 Details
 -------
@@ -60,7 +60,7 @@ SkPaint.
     }
 
 <a href='https://fiddle.skia.org/c/@skcanvas_square'><img
-  src='https://fiddle.skia.org/c/@skcanvas_square_raster.png'></a>
+  src='https://fiddle.skia.org/i/@skcanvas_square_raster.png'></a>
 
 The code above will draw a rectangle rotated by 45 degrees. Exactly
 what color and style the rect will be drawn in is described by the
@@ -141,7 +141,7 @@ parameter.
 
 
 <a href='https://fiddle.skia.org/c/@skcanvas_paint'><img
-  src='https://fiddle.skia.org/c/@skcanvas_paint_raster.png'></a>
+  src='https://fiddle.skia.org/i/@skcanvas_paint_raster.png'></a>
 
 In some of the calls, we pass a pointer, rather than a reference, to
 the paint. In those instances, the paint parameter may be null. In all
diff --git a/site/user/api/skpaint.md b/site/user/api/skpaint.md
index f6b81692ba..7a77bf7354 100644
--- a/site/user/api/skpaint.md
+++ b/site/user/api/skpaint.md
@@ -53,7 +53,7 @@ of matrix and clip settings.
     }
 
 <a href='https://fiddle.skia.org/c/@skpaint_skia'><img
-  src='https://fiddle.skia.org/c/@skpaint_skia_raster.png'></a>
+  src='https://fiddle.skia.org/i/@skpaint_skia_raster.png'></a>
 
 This shows three different paints, each set up to draw in a different
 style. Now the caller can intermix these paints freely, either using
@@ -79,7 +79,7 @@ them as is, or modifying them as the drawing proceeds.
     canvas->drawText("SKIA", 4, 20, 220, paint3);
 
 <a href='https://fiddle.skia.org/c/@skpaint_mix'><img
-  src='https://fiddle.skia.org/c/@skpaint_mix_raster.png'></a>
+  src='https://fiddle.skia.org/i/@skpaint_mix_raster.png'></a>
 
 Beyond simple attributes such as color, strokes, and text values,
 paints support effects. These are subclasses of different aspects of
@@ -106,7 +106,7 @@ assign a SkShader to the paint.
     }
 
 <a href='https://fiddle.skia.org/c/@skpaint_shader'><img
-  src='https://fiddle.skia.org/c/@skpaint_shader_raster.png'></a>
+  src='https://fiddle.skia.org/i/@skpaint_shader_raster.png'></a>
 
 Now, anything drawn with that paint will be drawn with the gradient
 specified in the call to `MakeLinear()`. The shader object that is
@@ -234,7 +234,7 @@ with a vertical alpha gradient.
     }
 
 <a href='https://fiddle.skia.org/c/@skpaint_xfer'><img
-  src='https://fiddle.skia.org/c/@skpaint_xfer_raster.png'></a>
+  src='https://fiddle.skia.org/i/@skpaint_xfer_raster.png'></a>
 
 <span id="ShShader"></span>
 
@@ -259,7 +259,7 @@ Several shaders are defined (besides the linear gradient already mentioned):
         canvas->drawPaint(paint);
 
     <a href='https://fiddle.skia.org/c/@skpaint_bitmap_shader'><img
-      src='https://fiddle.skia.org/c/@skpaint_bitmap_shader_raster.png'></a>
+      src='https://fiddle.skia.org/i/@skpaint_bitmap_shader_raster.png'></a>
 
 *   Radial Gradient Shader
 
@@ -273,7 +273,7 @@ Several shaders are defined (besides the linear gradient already mentioned):
         canvas->drawPaint(paint);
 
     <a href='https://fiddle.skia.org/c/@skpaint_radial'><img
-      src='https://fiddle.skia.org/c/@skpaint_radial_raster.png'></a>
+      src='https://fiddle.skia.org/i/@skpaint_radial_raster.png'></a>
 
 *  Two-Point Conical Gradient Shader
 
@@ -288,7 +288,7 @@ Several shaders are defined (besides the linear gradient already mentioned):
         canvas->drawPaint(paint);
 
     <a href='https://fiddle.skia.org/c/@skpaint_2pt'><img
-      src='https://fiddle.skia.org/c/@skpaint_2pt_raster.png'></a>
+      src='https://fiddle.skia.org/i/@skpaint_2pt_raster.png'></a>
 
 
 *   Sweep Gradient Shader
@@ -303,7 +303,7 @@ Several shaders are defined (besides the linear gradient already mentioned):
         canvas->drawPaint(paint);
 
     <a href='https://fiddle.skia.org/c/@skpaint_sweep'><img
-      src='https://fiddle.skia.org/c/@skpaint_sweep_raster.png'></a>
+      src='https://fiddle.skia.org/i/@skpaint_sweep_raster.png'></a>
 
 *   Fractal Perlin Noise Shader
 
@@ -316,7 +316,7 @@ Several shaders are defined (besides the linear gradient already mentioned):
         canvas->drawPaint(paint);
 
     <a href='https://fiddle.skia.org/c/@skpaint_perlin'><img
-    src='https://fiddle.skia.org/c/@skpaint_perlin_raster.png'></a>
+    src='https://fiddle.skia.org/i/@skpaint_perlin_raster.png'></a>
 
 *   Turbulence Perlin Noise Shader
 
@@ -329,7 +329,7 @@ Several shaders are defined (besides the linear gradient already mentioned):
         canvas->drawPaint(paint);
 
     <a href='https://fiddle.skia.org/c/@skpaint_turb'><img
-      src='https://fiddle.skia.org/c/@skpaint_turb_raster.png'></a>
+      src='https://fiddle.skia.org/i/@skpaint_turb_raster.png'></a>
 
 *   Compose Shader
 
@@ -348,7 +348,7 @@ Several shaders are defined (besides the linear gradient already mentioned):
         canvas->drawPaint(paint);
 
     <a href='https://fiddle.skia.org/c/@skpaint_compose_shader'><img
-      src='https://fiddle.skia.org/c/@skpaint_compose_shader_raster.png'></a>
+      src='https://fiddle.skia.org/i/@skpaint_compose_shader_raster.png'></a>
 
 
 <span id="SkMaskFilter"></span>
@@ -371,7 +371,7 @@ SkMaskFilter
         canvas->drawText(text, strlen(text), 0, 160, paint);
 
     <a href='https://fiddle.skia.org/c/@skpaint_blur_mask_filter'><img
-      src='https://fiddle.skia.org/c/@skpaint_blur_mask_filter_raster.png'></a>
+      src='https://fiddle.skia.org/i/@skpaint_blur_mask_filter_raster.png'></a>
 
 *   Emboss Mask Filter
 
@@ -388,7 +388,7 @@ SkMaskFilter
         canvas->drawText(text, strlen(text), 0, 160, paint);
 
     <a href='https://fiddle.skia.org/c/@skpaint_emboss'><img
-      src='https://fiddle.skia.org/c/@skpaint_emboss_raster.png'></a>
+      src='https://fiddle.skia.org/i/@skpaint_emboss_raster.png'></a>
 
 
 <span id="SkColorFilter"></span>
@@ -466,7 +466,7 @@ SkColorFilter
         }
 
     <a href='https://fiddle.skia.org/c/@skpaint_matrix_color_filter'><img
-    src='https://fiddle.skia.org/c/@skpaint_matrix_color_filter_raster.png'></a>
+    src='https://fiddle.skia.org/i/@skpaint_matrix_color_filter_raster.png'></a>
 
 *   Color Table Color Filter
 
@@ -485,7 +485,7 @@ SkColorFilter
         }
 
     <a href='https://fiddle.skia.org/c/@skpaint_color_table_filter'><img
-      src='https://fiddle.skia.org/c/@skpaint_color_table_filter_raster.png'></a>
+      src='https://fiddle.skia.org/i/@skpaint_color_table_filter_raster.png'></a>
 
 
 <span id="SkPathEffect"></span>
@@ -520,7 +520,7 @@ SkPathEffect
         }
 
     <a href='https://fiddle.skia.org/c/@skpaint_path_2d_path_effect'><img
-      src='https://fiddle.skia.org/c/@skpaint_path_2d_path_effect_raster.png'></a>
+      src='https://fiddle.skia.org/i/@skpaint_path_2d_path_effect_raster.png'></a>
 
 *   SkLine2DPathEffect: a special case of SkPath2DPathEffect where the
     path is a straight line to be stroked, not a path to be filled.
@@ -542,7 +542,7 @@ SkPathEffect
         }
 
     <a href='https://fiddle.skia.org/c/@skpaint_line_2d_path_effect'><img
-      src='https://fiddle.skia.org/c/@skpaint_line_2d_path_effect_raster.png'></a>
+      src='https://fiddle.skia.org/i/@skpaint_line_2d_path_effect_raster.png'></a>
 
 *   SkPath1DPathEffect: create dash-like effects by replicating the specified path along the drawn path.
 
@@ -560,7 +560,7 @@ SkPathEffect
         }
 
     <a href='https://fiddle.skia.org/c/@skpaint_path_1d_path_effect'><img
-      src='https://fiddle.skia.org/c/@skpaint_path_1d_path_effect_raster.png'></a>
+      src='https://fiddle.skia.org/i/@skpaint_path_1d_path_effect_raster.png'></a>
 
 *   SkArcToPathEffect
 
@@ -589,7 +589,7 @@ SkPathEffect
         }
 
     <a href='https://fiddle.skia.org/c/@skpaint_arc_to_path_effect'><img
-      src='https://fiddle.skia.org/c/@skpaint_arc_to_path_effect_raster.png'></a>
+      src='https://fiddle.skia.org/i/@skpaint_arc_to_path_effect_raster.png'></a>
 
 
 *   SkCornerPathEffect: a path effect that can turn sharp corners into
@@ -608,7 +608,7 @@ SkPathEffect
             canvas->drawPath(path, paint);
         }
 
-    <a href='https://fiddle.skia.org/c/@skpaint_corner_path_effects'><img src='https://fiddle.skia.org/c/@skpaint_corner_path_effects_raster.png'></a>
+    <a href='https://fiddle.skia.org/c/@skpaint_corner_path_effects'><img src='https://fiddle.skia.org/i/@skpaint_corner_path_effects_raster.png'></a>
 
 *   SkDashPathEffect:  a path effect that implements dashing.
 
@@ -627,7 +627,7 @@ SkPathEffect
             canvas->drawPath(path, paint);
         }
 
-    <a href='https://fiddle.skia.org/c/@skpaint_dash_path_effect'><img src='https://fiddle.skia.org/c/@skpaint_dash_path_effect_raster.png'></a>
+    <a href='https://fiddle.skia.org/c/@skpaint_dash_path_effect'><img src='https://fiddle.skia.org/i/@skpaint_dash_path_effect_raster.png'></a>
 
 *   SkDiscretePathEffect: This path effect chops a path into discrete
     segments, and randomly displaces them.
@@ -646,7 +646,7 @@ SkPathEffect
         }
 
     <a href='https://fiddle.skia.org/c/@skpaint_discrete_path_effect'><img
-      src='https://fiddle.skia.org/c/@skpaint_discrete_path_effect_raster.png'></a>
+      src='https://fiddle.skia.org/i/@skpaint_discrete_path_effect_raster.png'></a>
 
 *   SkComposePathEffect: a pathEffect whose effect is to apply
     first the inner pathEffect and the the outer pathEffect (i.e.
@@ -671,7 +671,7 @@ SkPathEffect
         }
 
     <a href='https://fiddle.skia.org/c/@skpaint_compose_path_effect'><img
-      src='https://fiddle.skia.org/c/@skpaint_compose_path_effect_raster.png'></a>
+      src='https://fiddle.skia.org/i/@skpaint_compose_path_effect_raster.png'></a>
 
 *    SkSumPathEffect: a pathEffect whose effect is to apply two effects,
      in sequence (i.e. first(path) + second(path)).
@@ -693,5 +693,5 @@ SkPathEffect
         }
 
     <a href='https://fiddle.skia.org/c/@skpaint_sum_path_effect'><img
-      src='https://fiddle.skia.org/c/@skpaint_sum_path_effect_raster.png'></a>
+      src='https://fiddle.skia.org/i/@skpaint_sum_path_effect_raster.png'></a>