diff --git a/Article-Understanding-Layouts/images/CustomLayout.jpg b/Article-Understanding-Layouts/images/CustomLayout.jpg
deleted file mode 100644
index 6e93c47..0000000
--- a/Article-Understanding-Layouts/images/CustomLayout.jpg
+++ /dev/null
Binary files differ
diff --git a/Article-Understanding-Layouts/images/CustomLayout.png b/Article-Understanding-Layouts/images/CustomLayout.png
new file mode 100644
index 0000000..06d29af
--- /dev/null
+++ b/Article-Understanding-Layouts/images/CustomLayout.png
Binary files differ
diff --git a/Article-Understanding-Layouts/images/CustomLayoutResized.jpg b/Article-Understanding-Layouts/images/CustomLayoutResized.jpg
deleted file mode 100644
index 60109cf..0000000
--- a/Article-Understanding-Layouts/images/CustomLayoutResized.jpg
+++ /dev/null
Binary files differ
diff --git a/Article-Understanding-Layouts/images/CustomLayoutResized.png b/Article-Understanding-Layouts/images/CustomLayoutResized.png
new file mode 100644
index 0000000..e545fd1
--- /dev/null
+++ b/Article-Understanding-Layouts/images/CustomLayoutResized.png
Binary files differ
diff --git a/Article-Understanding-Layouts/images/DogShowBiff.jpg b/Article-Understanding-Layouts/images/DogShowBiff.jpg
deleted file mode 100644
index 168d580..0000000
--- a/Article-Understanding-Layouts/images/DogShowBiff.jpg
+++ /dev/null
Binary files differ
diff --git a/Article-Understanding-Layouts/images/DogShowBiff.png b/Article-Understanding-Layouts/images/DogShowBiff.png
new file mode 100644
index 0000000..fa42a54
--- /dev/null
+++ b/Article-Understanding-Layouts/images/DogShowBiff.png
Binary files differ
diff --git a/Article-Understanding-Layouts/images/DogShowBiffResized.jpg b/Article-Understanding-Layouts/images/DogShowBiffResized.jpg
deleted file mode 100644
index 1e648ff..0000000
--- a/Article-Understanding-Layouts/images/DogShowBiffResized.jpg
+++ /dev/null
Binary files differ
diff --git a/Article-Understanding-Layouts/images/DogShowBiffResized.png b/Article-Understanding-Layouts/images/DogShowBiffResized.png
new file mode 100644
index 0000000..70a3026
--- /dev/null
+++ b/Article-Understanding-Layouts/images/DogShowBiffResized.png
Binary files differ
diff --git a/Article-Understanding-Layouts/images/DogShowBiffWithFormLayout.jpg b/Article-Understanding-Layouts/images/DogShowBiffWithFormLayout.jpg
deleted file mode 100644
index 168d580..0000000
--- a/Article-Understanding-Layouts/images/DogShowBiffWithFormLayout.jpg
+++ /dev/null
Binary files differ
diff --git a/Article-Understanding-Layouts/images/DogShowBiffWithFormLayout.png b/Article-Understanding-Layouts/images/DogShowBiffWithFormLayout.png
new file mode 100644
index 0000000..fa42a54
--- /dev/null
+++ b/Article-Understanding-Layouts/images/DogShowBiffWithFormLayout.png
Binary files differ
diff --git a/Article-Understanding-Layouts/images/DogShowBiffWithFormLayoutResized.jpg b/Article-Understanding-Layouts/images/DogShowBiffWithFormLayoutResized.jpg
deleted file mode 100644
index 1e648ff..0000000
--- a/Article-Understanding-Layouts/images/DogShowBiffWithFormLayoutResized.jpg
+++ /dev/null
Binary files differ
diff --git a/Article-Understanding-Layouts/images/DogShowBiffWithFormLayoutResized.png b/Article-Understanding-Layouts/images/DogShowBiffWithFormLayoutResized.png
new file mode 100644
index 0000000..70a3026
--- /dev/null
+++ b/Article-Understanding-Layouts/images/DogShowBiffWithFormLayoutResized.png
Binary files differ
diff --git a/Article-Understanding-Layouts/images/FillLayoutSampleHorizontal.jpg b/Article-Understanding-Layouts/images/FillLayoutSampleHorizontal.jpg
deleted file mode 100644
index 29afde0..0000000
--- a/Article-Understanding-Layouts/images/FillLayoutSampleHorizontal.jpg
+++ /dev/null
Binary files differ
diff --git a/Article-Understanding-Layouts/images/FillLayoutSampleHorizontal.png b/Article-Understanding-Layouts/images/FillLayoutSampleHorizontal.png
new file mode 100644
index 0000000..ab1ff9c
--- /dev/null
+++ b/Article-Understanding-Layouts/images/FillLayoutSampleHorizontal.png
Binary files differ
diff --git a/Article-Understanding-Layouts/images/FillLayoutSampleHorizontalResized.jpg b/Article-Understanding-Layouts/images/FillLayoutSampleHorizontalResized.jpg
deleted file mode 100644
index ea4baa4..0000000
--- a/Article-Understanding-Layouts/images/FillLayoutSampleHorizontalResized.jpg
+++ /dev/null
Binary files differ
diff --git a/Article-Understanding-Layouts/images/FillLayoutSampleHorizontalResized.png b/Article-Understanding-Layouts/images/FillLayoutSampleHorizontalResized.png
new file mode 100644
index 0000000..25da5ab
--- /dev/null
+++ b/Article-Understanding-Layouts/images/FillLayoutSampleHorizontalResized.png
Binary files differ
diff --git a/Article-Understanding-Layouts/images/FillLayoutSampleVertical.jpg b/Article-Understanding-Layouts/images/FillLayoutSampleVertical.jpg
deleted file mode 100644
index 1f8fd20..0000000
--- a/Article-Understanding-Layouts/images/FillLayoutSampleVertical.jpg
+++ /dev/null
Binary files differ
diff --git a/Article-Understanding-Layouts/images/FillLayoutSampleVertical.png b/Article-Understanding-Layouts/images/FillLayoutSampleVertical.png
new file mode 100644
index 0000000..61c8c8c
--- /dev/null
+++ b/Article-Understanding-Layouts/images/FillLayoutSampleVertical.png
Binary files differ
diff --git a/Article-Understanding-Layouts/images/FillLayoutSampleVerticalResized.jpg b/Article-Understanding-Layouts/images/FillLayoutSampleVerticalResized.jpg
deleted file mode 100644
index 077f0d6..0000000
--- a/Article-Understanding-Layouts/images/FillLayoutSampleVerticalResized.jpg
+++ /dev/null
Binary files differ
diff --git a/Article-Understanding-Layouts/images/FillLayoutSampleVerticalResized.png b/Article-Understanding-Layouts/images/FillLayoutSampleVerticalResized.png
new file mode 100644
index 0000000..5727be1
--- /dev/null
+++ b/Article-Understanding-Layouts/images/FillLayoutSampleVerticalResized.png
Binary files differ
diff --git a/Article-Understanding-Layouts/images/FormLayoutSample01.jpg b/Article-Understanding-Layouts/images/FormLayoutSample01.jpg
deleted file mode 100644
index 856a314..0000000
--- a/Article-Understanding-Layouts/images/FormLayoutSample01.jpg
+++ /dev/null
Binary files differ
diff --git a/Article-Understanding-Layouts/images/FormLayoutSample01.png b/Article-Understanding-Layouts/images/FormLayoutSample01.png
new file mode 100644
index 0000000..ea6d5be
--- /dev/null
+++ b/Article-Understanding-Layouts/images/FormLayoutSample01.png
Binary files differ
diff --git a/Article-Understanding-Layouts/images/FormLayoutSample5Buttons01.jpg b/Article-Understanding-Layouts/images/FormLayoutSample5Buttons01.jpg
deleted file mode 100644
index d51ba77..0000000
--- a/Article-Understanding-Layouts/images/FormLayoutSample5Buttons01.jpg
+++ /dev/null
Binary files differ
diff --git a/Article-Understanding-Layouts/images/FormLayoutSample5Buttons01.png b/Article-Understanding-Layouts/images/FormLayoutSample5Buttons01.png
new file mode 100644
index 0000000..8a9423c
--- /dev/null
+++ b/Article-Understanding-Layouts/images/FormLayoutSample5Buttons01.png
Binary files differ
diff --git a/Article-Understanding-Layouts/images/FormLayoutSample5Buttons01Resized.jpg b/Article-Understanding-Layouts/images/FormLayoutSample5Buttons01Resized.jpg
deleted file mode 100644
index fce81a7..0000000
--- a/Article-Understanding-Layouts/images/FormLayoutSample5Buttons01Resized.jpg
+++ /dev/null
Binary files differ
diff --git a/Article-Understanding-Layouts/images/FormLayoutSample5Buttons01Resized.png b/Article-Understanding-Layouts/images/FormLayoutSample5Buttons01Resized.png
new file mode 100644
index 0000000..d2a8318
--- /dev/null
+++ b/Article-Understanding-Layouts/images/FormLayoutSample5Buttons01Resized.png
Binary files differ
diff --git a/Article-Understanding-Layouts/images/FormLayoutSampleAttachWidget01.jpg b/Article-Understanding-Layouts/images/FormLayoutSampleAttachWidget01.jpg
deleted file mode 100644
index b49ac81..0000000
--- a/Article-Understanding-Layouts/images/FormLayoutSampleAttachWidget01.jpg
+++ /dev/null
Binary files differ
diff --git a/Article-Understanding-Layouts/images/FormLayoutSampleAttachWidget01.png b/Article-Understanding-Layouts/images/FormLayoutSampleAttachWidget01.png
new file mode 100644
index 0000000..9d7d631
--- /dev/null
+++ b/Article-Understanding-Layouts/images/FormLayoutSampleAttachWidget01.png
Binary files differ
diff --git a/Article-Understanding-Layouts/images/FormLayoutSampleAttachWidget01Resized.jpg b/Article-Understanding-Layouts/images/FormLayoutSampleAttachWidget01Resized.jpg
deleted file mode 100644
index 79081f6..0000000
--- a/Article-Understanding-Layouts/images/FormLayoutSampleAttachWidget01Resized.jpg
+++ /dev/null
Binary files differ
diff --git a/Article-Understanding-Layouts/images/FormLayoutSampleAttachWidget01Resized.png b/Article-Understanding-Layouts/images/FormLayoutSampleAttachWidget01Resized.png
new file mode 100644
index 0000000..d26b1c4
--- /dev/null
+++ b/Article-Understanding-Layouts/images/FormLayoutSampleAttachWidget01Resized.png
Binary files differ
diff --git a/Article-Understanding-Layouts/images/FormLayoutSampleAttachWidget02.jpg b/Article-Understanding-Layouts/images/FormLayoutSampleAttachWidget02.jpg
deleted file mode 100644
index 78ee3b1..0000000
--- a/Article-Understanding-Layouts/images/FormLayoutSampleAttachWidget02.jpg
+++ /dev/null
Binary files differ
diff --git a/Article-Understanding-Layouts/images/FormLayoutSampleAttachWidget02.png b/Article-Understanding-Layouts/images/FormLayoutSampleAttachWidget02.png
new file mode 100644
index 0000000..98414eb
--- /dev/null
+++ b/Article-Understanding-Layouts/images/FormLayoutSampleAttachWidget02.png
Binary files differ
diff --git a/Article-Understanding-Layouts/images/FormLayoutSampleAttachWidget03.jpg b/Article-Understanding-Layouts/images/FormLayoutSampleAttachWidget03.jpg
deleted file mode 100644
index 8f574bb..0000000
--- a/Article-Understanding-Layouts/images/FormLayoutSampleAttachWidget03.jpg
+++ /dev/null
Binary files differ
diff --git a/Article-Understanding-Layouts/images/FormLayoutSampleAttachWidget03.png b/Article-Understanding-Layouts/images/FormLayoutSampleAttachWidget03.png
new file mode 100644
index 0000000..7e77544
--- /dev/null
+++ b/Article-Understanding-Layouts/images/FormLayoutSampleAttachWidget03.png
Binary files differ
diff --git a/Article-Understanding-Layouts/images/FormLayoutSampleParent100.jpg b/Article-Understanding-Layouts/images/FormLayoutSampleParent100.jpg
deleted file mode 100644
index 96f8244..0000000
--- a/Article-Understanding-Layouts/images/FormLayoutSampleParent100.jpg
+++ /dev/null
Binary files differ
diff --git a/Article-Understanding-Layouts/images/FormLayoutSampleParent100.png b/Article-Understanding-Layouts/images/FormLayoutSampleParent100.png
new file mode 100644
index 0000000..cb66423
--- /dev/null
+++ b/Article-Understanding-Layouts/images/FormLayoutSampleParent100.png
Binary files differ
diff --git a/Article-Understanding-Layouts/images/FormLayoutSampleParent100Resized.jpg b/Article-Understanding-Layouts/images/FormLayoutSampleParent100Resized.jpg
deleted file mode 100644
index 153e385..0000000
--- a/Article-Understanding-Layouts/images/FormLayoutSampleParent100Resized.jpg
+++ /dev/null
Binary files differ
diff --git a/Article-Understanding-Layouts/images/FormLayoutSampleParent100Resized.png b/Article-Understanding-Layouts/images/FormLayoutSampleParent100Resized.png
new file mode 100644
index 0000000..e1e92f1
--- /dev/null
+++ b/Article-Understanding-Layouts/images/FormLayoutSampleParent100Resized.png
Binary files differ
diff --git a/Article-Understanding-Layouts/images/FormLayoutSamplePosition50.jpg b/Article-Understanding-Layouts/images/FormLayoutSamplePosition50.jpg
deleted file mode 100644
index 898915e..0000000
--- a/Article-Understanding-Layouts/images/FormLayoutSamplePosition50.jpg
+++ /dev/null
Binary files differ
diff --git a/Article-Understanding-Layouts/images/FormLayoutSamplePosition50.png b/Article-Understanding-Layouts/images/FormLayoutSamplePosition50.png
new file mode 100644
index 0000000..3e945a6
--- /dev/null
+++ b/Article-Understanding-Layouts/images/FormLayoutSamplePosition50.png
Binary files differ
diff --git a/Article-Understanding-Layouts/images/FormLayoutSamplePosition50Resized.jpg b/Article-Understanding-Layouts/images/FormLayoutSamplePosition50Resized.jpg
deleted file mode 100644
index 561f8d0..0000000
--- a/Article-Understanding-Layouts/images/FormLayoutSamplePosition50Resized.jpg
+++ /dev/null
Binary files differ
diff --git a/Article-Understanding-Layouts/images/FormLayoutSamplePosition50Resized.png b/Article-Understanding-Layouts/images/FormLayoutSamplePosition50Resized.png
new file mode 100644
index 0000000..020f642
--- /dev/null
+++ b/Article-Understanding-Layouts/images/FormLayoutSamplePosition50Resized.png
Binary files differ
diff --git a/Article-Understanding-Layouts/images/GridDataSampleBeginning.jpg b/Article-Understanding-Layouts/images/GridDataSampleBeginning.jpg
deleted file mode 100644
index b4e2d69..0000000
--- a/Article-Understanding-Layouts/images/GridDataSampleBeginning.jpg
+++ /dev/null
Binary files differ
diff --git a/Article-Understanding-Layouts/images/GridDataSampleBeginning.png b/Article-Understanding-Layouts/images/GridDataSampleBeginning.png
new file mode 100644
index 0000000..5ec6af6
--- /dev/null
+++ b/Article-Understanding-Layouts/images/GridDataSampleBeginning.png
Binary files differ
diff --git a/Article-Understanding-Layouts/images/GridDataSampleCenter.jpg b/Article-Understanding-Layouts/images/GridDataSampleCenter.jpg
deleted file mode 100644
index 15b5af9..0000000
--- a/Article-Understanding-Layouts/images/GridDataSampleCenter.jpg
+++ /dev/null
Binary files differ
diff --git a/Article-Understanding-Layouts/images/GridDataSampleCenter.png b/Article-Understanding-Layouts/images/GridDataSampleCenter.png
new file mode 100644
index 0000000..b235a77
--- /dev/null
+++ b/Article-Understanding-Layouts/images/GridDataSampleCenter.png
Binary files differ
diff --git a/Article-Understanding-Layouts/images/GridDataSampleEnd.jpg b/Article-Understanding-Layouts/images/GridDataSampleEnd.jpg
deleted file mode 100644
index c247a9d..0000000
--- a/Article-Understanding-Layouts/images/GridDataSampleEnd.jpg
+++ /dev/null
Binary files differ
diff --git a/Article-Understanding-Layouts/images/GridDataSampleEnd.png b/Article-Understanding-Layouts/images/GridDataSampleEnd.png
new file mode 100644
index 0000000..bf5c71a
--- /dev/null
+++ b/Article-Understanding-Layouts/images/GridDataSampleEnd.png
Binary files differ
diff --git a/Article-Understanding-Layouts/images/GridDataSampleFill.jpg b/Article-Understanding-Layouts/images/GridDataSampleFill.jpg
deleted file mode 100644
index 410416b..0000000
--- a/Article-Understanding-Layouts/images/GridDataSampleFill.jpg
+++ /dev/null
Binary files differ
diff --git a/Article-Understanding-Layouts/images/GridDataSampleFill.png b/Article-Understanding-Layouts/images/GridDataSampleFill.png
new file mode 100644
index 0000000..6109bea
--- /dev/null
+++ b/Article-Understanding-Layouts/images/GridDataSampleFill.png
Binary files differ
diff --git a/Article-Understanding-Layouts/images/GridDataSampleGrab01.jpg b/Article-Understanding-Layouts/images/GridDataSampleGrab01.jpg
deleted file mode 100644
index ccdfeb1..0000000
--- a/Article-Understanding-Layouts/images/GridDataSampleGrab01.jpg
+++ /dev/null
Binary files differ
diff --git a/Article-Understanding-Layouts/images/GridDataSampleGrab01.png b/Article-Understanding-Layouts/images/GridDataSampleGrab01.png
new file mode 100644
index 0000000..1ac1699
--- /dev/null
+++ b/Article-Understanding-Layouts/images/GridDataSampleGrab01.png
Binary files differ
diff --git a/Article-Understanding-Layouts/images/GridDataSampleHorizontalFill.jpg b/Article-Understanding-Layouts/images/GridDataSampleHorizontalFill.jpg
deleted file mode 100644
index c93da91..0000000
--- a/Article-Understanding-Layouts/images/GridDataSampleHorizontalFill.jpg
+++ /dev/null
Binary files differ
diff --git a/Article-Understanding-Layouts/images/GridDataSampleHorizontalFill.png b/Article-Understanding-Layouts/images/GridDataSampleHorizontalFill.png
new file mode 100644
index 0000000..5ec6af6
--- /dev/null
+++ b/Article-Understanding-Layouts/images/GridDataSampleHorizontalFill.png
Binary files differ
diff --git a/Article-Understanding-Layouts/images/GridDataSampleIndent.jpg b/Article-Understanding-Layouts/images/GridDataSampleIndent.jpg
deleted file mode 100644
index 32d10c0..0000000
--- a/Article-Understanding-Layouts/images/GridDataSampleIndent.jpg
+++ /dev/null
Binary files differ
diff --git a/Article-Understanding-Layouts/images/GridDataSampleIndent.png b/Article-Understanding-Layouts/images/GridDataSampleIndent.png
new file mode 100644
index 0000000..245280a
--- /dev/null
+++ b/Article-Understanding-Layouts/images/GridDataSampleIndent.png
Binary files differ
diff --git a/Article-Understanding-Layouts/images/GridDataSampleSpan01.jpg b/Article-Understanding-Layouts/images/GridDataSampleSpan01.jpg
deleted file mode 100644
index dbee8fa..0000000
--- a/Article-Understanding-Layouts/images/GridDataSampleSpan01.jpg
+++ /dev/null
Binary files differ
diff --git a/Article-Understanding-Layouts/images/GridDataSampleSpan01.png b/Article-Understanding-Layouts/images/GridDataSampleSpan01.png
new file mode 100644
index 0000000..dd23461
--- /dev/null
+++ b/Article-Understanding-Layouts/images/GridDataSampleSpan01.png
Binary files differ
diff --git a/Article-Understanding-Layouts/images/GridDataSampleSpan02.jpg b/Article-Understanding-Layouts/images/GridDataSampleSpan02.jpg
deleted file mode 100644
index 69dabb9..0000000
--- a/Article-Understanding-Layouts/images/GridDataSampleSpan02.jpg
+++ /dev/null
Binary files differ
diff --git a/Article-Understanding-Layouts/images/GridDataSampleSpan02.png b/Article-Understanding-Layouts/images/GridDataSampleSpan02.png
new file mode 100644
index 0000000..826d36e
--- /dev/null
+++ b/Article-Understanding-Layouts/images/GridDataSampleSpan02.png
Binary files differ
diff --git a/Article-Understanding-Layouts/images/GridDataSampleSpan03.jpg b/Article-Understanding-Layouts/images/GridDataSampleSpan03.jpg
deleted file mode 100644
index 9906bd7..0000000
--- a/Article-Understanding-Layouts/images/GridDataSampleSpan03.jpg
+++ /dev/null
Binary files differ
diff --git a/Article-Understanding-Layouts/images/GridDataSampleSpan03.png b/Article-Understanding-Layouts/images/GridDataSampleSpan03.png
new file mode 100644
index 0000000..c65d28f
--- /dev/null
+++ b/Article-Understanding-Layouts/images/GridDataSampleSpan03.png
Binary files differ
diff --git a/Article-Understanding-Layouts/images/GridDataSampleSpan03Resized.jpg b/Article-Understanding-Layouts/images/GridDataSampleSpan03Resized.jpg
deleted file mode 100644
index e3d3f73..0000000
--- a/Article-Understanding-Layouts/images/GridDataSampleSpan03Resized.jpg
+++ /dev/null
Binary files differ
diff --git a/Article-Understanding-Layouts/images/GridDataSampleSpan03Resized.png b/Article-Understanding-Layouts/images/GridDataSampleSpan03Resized.png
new file mode 100644
index 0000000..228c402
--- /dev/null
+++ b/Article-Understanding-Layouts/images/GridDataSampleSpan03Resized.png
Binary files differ
diff --git a/Article-Understanding-Layouts/images/GridDataSampleSpan04.jpg b/Article-Understanding-Layouts/images/GridDataSampleSpan04.jpg
deleted file mode 100644
index 6e71d6c..0000000
--- a/Article-Understanding-Layouts/images/GridDataSampleSpan04.jpg
+++ /dev/null
Binary files differ
diff --git a/Article-Understanding-Layouts/images/GridDataSampleSpan04.png b/Article-Understanding-Layouts/images/GridDataSampleSpan04.png
new file mode 100644
index 0000000..ee44e99
--- /dev/null
+++ b/Article-Understanding-Layouts/images/GridDataSampleSpan04.png
Binary files differ
diff --git a/Article-Understanding-Layouts/images/GridLayoutGrabExcess.jpg b/Article-Understanding-Layouts/images/GridLayoutGrabExcess.jpg
deleted file mode 100644
index 64bac5c..0000000
--- a/Article-Understanding-Layouts/images/GridLayoutGrabExcess.jpg
+++ /dev/null
Binary files differ
diff --git a/Article-Understanding-Layouts/images/GridLayoutGrabExcess.png b/Article-Understanding-Layouts/images/GridLayoutGrabExcess.png
new file mode 100644
index 0000000..eb1604b
--- /dev/null
+++ b/Article-Understanding-Layouts/images/GridLayoutGrabExcess.png
Binary files differ
diff --git a/Article-Understanding-Layouts/images/GridLayoutGrabExcessResized.jpg b/Article-Understanding-Layouts/images/GridLayoutGrabExcessResized.jpg
deleted file mode 100644
index f1e9533..0000000
--- a/Article-Understanding-Layouts/images/GridLayoutGrabExcessResized.jpg
+++ /dev/null
Binary files differ
diff --git a/Article-Understanding-Layouts/images/GridLayoutGrabExcessResized.png b/Article-Understanding-Layouts/images/GridLayoutGrabExcessResized.png
new file mode 100644
index 0000000..2eccda6
--- /dev/null
+++ b/Article-Understanding-Layouts/images/GridLayoutGrabExcessResized.png
Binary files differ
diff --git a/Article-Understanding-Layouts/images/GridLayoutSampleEqualWidth.jpg b/Article-Understanding-Layouts/images/GridLayoutSampleEqualWidth.jpg
deleted file mode 100644
index 652c864..0000000
--- a/Article-Understanding-Layouts/images/GridLayoutSampleEqualWidth.jpg
+++ /dev/null
Binary files differ
diff --git a/Article-Understanding-Layouts/images/GridLayoutSampleEqualWidth.png b/Article-Understanding-Layouts/images/GridLayoutSampleEqualWidth.png
new file mode 100644
index 0000000..549d2a5
--- /dev/null
+++ b/Article-Understanding-Layouts/images/GridLayoutSampleEqualWidth.png
Binary files differ
diff --git a/Article-Understanding-Layouts/images/GridLayoutSampleNumColumns1.jpg b/Article-Understanding-Layouts/images/GridLayoutSampleNumColumns1.jpg
deleted file mode 100644
index f3d37b6..0000000
--- a/Article-Understanding-Layouts/images/GridLayoutSampleNumColumns1.jpg
+++ /dev/null
Binary files differ
diff --git a/Article-Understanding-Layouts/images/GridLayoutSampleNumColumns1.png b/Article-Understanding-Layouts/images/GridLayoutSampleNumColumns1.png
new file mode 100644
index 0000000..ca40c26
--- /dev/null
+++ b/Article-Understanding-Layouts/images/GridLayoutSampleNumColumns1.png
Binary files differ
diff --git a/Article-Understanding-Layouts/images/GridLayoutSampleNumColumns2.jpg b/Article-Understanding-Layouts/images/GridLayoutSampleNumColumns2.jpg
deleted file mode 100644
index 62fe4a7..0000000
--- a/Article-Understanding-Layouts/images/GridLayoutSampleNumColumns2.jpg
+++ /dev/null
Binary files differ
diff --git a/Article-Understanding-Layouts/images/GridLayoutSampleNumColumns2.png b/Article-Understanding-Layouts/images/GridLayoutSampleNumColumns2.png
new file mode 100644
index 0000000..855cbd4
--- /dev/null
+++ b/Article-Understanding-Layouts/images/GridLayoutSampleNumColumns2.png
Binary files differ
diff --git a/Article-Understanding-Layouts/images/GridLayoutSampleNumColumns3.jpg b/Article-Understanding-Layouts/images/GridLayoutSampleNumColumns3.jpg
deleted file mode 100644
index c93da91..0000000
--- a/Article-Understanding-Layouts/images/GridLayoutSampleNumColumns3.jpg
+++ /dev/null
Binary files differ
diff --git a/Article-Understanding-Layouts/images/GridLayoutSampleNumColumns3.png b/Article-Understanding-Layouts/images/GridLayoutSampleNumColumns3.png
new file mode 100644
index 0000000..5ec6af6
--- /dev/null
+++ b/Article-Understanding-Layouts/images/GridLayoutSampleNumColumns3.png
Binary files differ
diff --git a/Article-Understanding-Layouts/images/LayoutExample.jpg b/Article-Understanding-Layouts/images/LayoutExample.jpg
deleted file mode 100644
index 5ca1fe1..0000000
--- a/Article-Understanding-Layouts/images/LayoutExample.jpg
+++ /dev/null
Binary files differ
diff --git a/Article-Understanding-Layouts/images/LayoutExample.png b/Article-Understanding-Layouts/images/LayoutExample.png
new file mode 100644
index 0000000..fbbbff2
--- /dev/null
+++ b/Article-Understanding-Layouts/images/LayoutExample.png
Binary files differ
diff --git a/Article-Understanding-Layouts/images/LayoutExampleResized.jpg b/Article-Understanding-Layouts/images/LayoutExampleResized.jpg
deleted file mode 100644
index 66aec84..0000000
--- a/Article-Understanding-Layouts/images/LayoutExampleResized.jpg
+++ /dev/null
Binary files differ
diff --git a/Article-Understanding-Layouts/images/LayoutExampleResized.png b/Article-Understanding-Layouts/images/LayoutExampleResized.png
new file mode 100644
index 0000000..bbd7c33
--- /dev/null
+++ b/Article-Understanding-Layouts/images/LayoutExampleResized.png
Binary files differ
diff --git a/Article-Understanding-Layouts/images/RowDataExample.jpg b/Article-Understanding-Layouts/images/RowDataExample.jpg
deleted file mode 100644
index a1da3ec..0000000
--- a/Article-Understanding-Layouts/images/RowDataExample.jpg
+++ /dev/null
Binary files differ
diff --git a/Article-Understanding-Layouts/images/RowDataExample.png b/Article-Understanding-Layouts/images/RowDataExample.png
new file mode 100644
index 0000000..d4591a8
--- /dev/null
+++ b/Article-Understanding-Layouts/images/RowDataExample.png
Binary files differ
diff --git a/Article-Understanding-Layouts/images/RowLayoutMargins.jpg b/Article-Understanding-Layouts/images/RowLayoutMargins.jpg
deleted file mode 100644
index 78e2686..0000000
--- a/Article-Understanding-Layouts/images/RowLayoutMargins.jpg
+++ /dev/null
Binary files differ
diff --git a/Article-Understanding-Layouts/images/RowLayoutMargins.png b/Article-Understanding-Layouts/images/RowLayoutMargins.png
new file mode 100644
index 0000000..44116ad
--- /dev/null
+++ b/Article-Understanding-Layouts/images/RowLayoutMargins.png
Binary files differ
diff --git a/Article-Understanding-Layouts/images/RowLayoutSample01.jpg b/Article-Understanding-Layouts/images/RowLayoutSample01.jpg
deleted file mode 100644
index 5ca1fe1..0000000
--- a/Article-Understanding-Layouts/images/RowLayoutSample01.jpg
+++ /dev/null
Binary files differ
diff --git a/Article-Understanding-Layouts/images/RowLayoutSample01.png b/Article-Understanding-Layouts/images/RowLayoutSample01.png
new file mode 100644
index 0000000..fbbbff2
--- /dev/null
+++ b/Article-Understanding-Layouts/images/RowLayoutSample01.png
Binary files differ
diff --git a/Article-Understanding-Layouts/images/RowLayoutSample01Resized.jpg b/Article-Understanding-Layouts/images/RowLayoutSample01Resized.jpg
deleted file mode 100644
index abed125..0000000
--- a/Article-Understanding-Layouts/images/RowLayoutSample01Resized.jpg
+++ /dev/null
Binary files differ
diff --git a/Article-Understanding-Layouts/images/RowLayoutSample01Resized.png b/Article-Understanding-Layouts/images/RowLayoutSample01Resized.png
new file mode 100644
index 0000000..d1d1c8c
--- /dev/null
+++ b/Article-Understanding-Layouts/images/RowLayoutSample01Resized.png
Binary files differ
diff --git a/Article-Understanding-Layouts/images/RowLayoutSample01ResizedNarrower.jpg b/Article-Understanding-Layouts/images/RowLayoutSample01ResizedNarrower.jpg
deleted file mode 100644
index d9054e9..0000000
--- a/Article-Understanding-Layouts/images/RowLayoutSample01ResizedNarrower.jpg
+++ /dev/null
Binary files differ
diff --git a/Article-Understanding-Layouts/images/RowLayoutSample01ResizedNarrower.png b/Article-Understanding-Layouts/images/RowLayoutSample01ResizedNarrower.png
new file mode 100644
index 0000000..bbd7c33
--- /dev/null
+++ b/Article-Understanding-Layouts/images/RowLayoutSample01ResizedNarrower.png
Binary files differ
diff --git a/Article-Understanding-Layouts/images/RowLayoutSample02.jpg b/Article-Understanding-Layouts/images/RowLayoutSample02.jpg
deleted file mode 100644
index 1416919..0000000
--- a/Article-Understanding-Layouts/images/RowLayoutSample02.jpg
+++ /dev/null
Binary files differ
diff --git a/Article-Understanding-Layouts/images/RowLayoutSample02.png b/Article-Understanding-Layouts/images/RowLayoutSample02.png
new file mode 100644
index 0000000..fbbbff2
--- /dev/null
+++ b/Article-Understanding-Layouts/images/RowLayoutSample02.png
Binary files differ
diff --git a/Article-Understanding-Layouts/images/RowLayoutSample02Resized.jpg b/Article-Understanding-Layouts/images/RowLayoutSample02Resized.jpg
deleted file mode 100644
index 8e07741..0000000
--- a/Article-Understanding-Layouts/images/RowLayoutSample02Resized.jpg
+++ /dev/null
Binary files differ
diff --git a/Article-Understanding-Layouts/images/RowLayoutSample02Resized.png b/Article-Understanding-Layouts/images/RowLayoutSample02Resized.png
new file mode 100644
index 0000000..66e5124
--- /dev/null
+++ b/Article-Understanding-Layouts/images/RowLayoutSample02Resized.png
Binary files differ
diff --git a/Article-Understanding-Layouts/images/RowLayoutSample03.jpg b/Article-Understanding-Layouts/images/RowLayoutSample03.jpg
deleted file mode 100644
index 78148f9..0000000
--- a/Article-Understanding-Layouts/images/RowLayoutSample03.jpg
+++ /dev/null
Binary files differ
diff --git a/Article-Understanding-Layouts/images/RowLayoutSample03.png b/Article-Understanding-Layouts/images/RowLayoutSample03.png
new file mode 100644
index 0000000..d5eec8c
--- /dev/null
+++ b/Article-Understanding-Layouts/images/RowLayoutSample03.png
Binary files differ
diff --git a/Article-Understanding-Layouts/images/RowLayoutSample03Resized.jpg b/Article-Understanding-Layouts/images/RowLayoutSample03Resized.jpg
deleted file mode 100644
index f82b2a8..0000000
--- a/Article-Understanding-Layouts/images/RowLayoutSample03Resized.jpg
+++ /dev/null
Binary files differ
diff --git a/Article-Understanding-Layouts/images/RowLayoutSample03Resized.png b/Article-Understanding-Layouts/images/RowLayoutSample03Resized.png
new file mode 100644
index 0000000..230d245
--- /dev/null
+++ b/Article-Understanding-Layouts/images/RowLayoutSample03Resized.png
Binary files differ
diff --git a/Article-Understanding-Layouts/images/RowLayoutSample04.jpg b/Article-Understanding-Layouts/images/RowLayoutSample04.jpg
deleted file mode 100644
index 1416919..0000000
--- a/Article-Understanding-Layouts/images/RowLayoutSample04.jpg
+++ /dev/null
Binary files differ
diff --git a/Article-Understanding-Layouts/images/RowLayoutSample04.png b/Article-Understanding-Layouts/images/RowLayoutSample04.png
new file mode 100644
index 0000000..fbbbff2
--- /dev/null
+++ b/Article-Understanding-Layouts/images/RowLayoutSample04.png
Binary files differ
diff --git a/Article-Understanding-Layouts/images/RowLayoutSample04Resized.jpg b/Article-Understanding-Layouts/images/RowLayoutSample04Resized.jpg
deleted file mode 100644
index 2a54b39..0000000
--- a/Article-Understanding-Layouts/images/RowLayoutSample04Resized.jpg
+++ /dev/null
Binary files differ
diff --git a/Article-Understanding-Layouts/images/RowLayoutSample04Resized.png b/Article-Understanding-Layouts/images/RowLayoutSample04Resized.png
new file mode 100644
index 0000000..6aca836
--- /dev/null
+++ b/Article-Understanding-Layouts/images/RowLayoutSample04Resized.png
Binary files differ
diff --git a/Article-Understanding-Layouts/images/RowLayoutSample05.jpg b/Article-Understanding-Layouts/images/RowLayoutSample05.jpg
deleted file mode 100644
index c7f3cf3..0000000
--- a/Article-Understanding-Layouts/images/RowLayoutSample05.jpg
+++ /dev/null
Binary files differ
diff --git a/Article-Understanding-Layouts/images/RowLayoutSample05.png b/Article-Understanding-Layouts/images/RowLayoutSample05.png
new file mode 100644
index 0000000..8dacc56
--- /dev/null
+++ b/Article-Understanding-Layouts/images/RowLayoutSample05.png
Binary files differ
diff --git a/Article-Understanding-Layouts/images/RowLayoutSample05Resized.jpg b/Article-Understanding-Layouts/images/RowLayoutSample05Resized.jpg
deleted file mode 100644
index 768dbe5..0000000
--- a/Article-Understanding-Layouts/images/RowLayoutSample05Resized.jpg
+++ /dev/null
Binary files differ
diff --git a/Article-Understanding-Layouts/images/RowLayoutSample05Resized.png b/Article-Understanding-Layouts/images/RowLayoutSample05Resized.png
new file mode 100644
index 0000000..84a105d
--- /dev/null
+++ b/Article-Understanding-Layouts/images/RowLayoutSample05Resized.png
Binary files differ
diff --git a/Article-Understanding-Layouts/index.html b/Article-Understanding-Layouts/index.html
index 6f2bc8e..a6be422 100644
--- a/Article-Understanding-Layouts/index.html
+++ b/Article-Understanding-Layouts/index.html
@@ -155,13 +155,13 @@
 
 <p>Running the above code results in the following:</p>
 
-<img src="images/LayoutExample.jpg" />
+<img src="images/LayoutExample.png" />
 
 <p>If the user resizes the shell so that there is no longer room for
 Button 3 on the right, the <code>RowLayout</code> wraps Button 3 to the
 next row, as follows:</p>
 
-<img src="images/LayoutExampleResized.jpg" />
+<img src="images/LayoutExampleResized.png" />
 
 <p>Using layouts is closely tied with resize, as we shall see.
 Consequently, most of the examples in this document show what would
@@ -214,13 +214,13 @@
 		<td><code>fillLayout.type = SWT.HORIZONTAL</code>
 		<p>(default)</p>
 		</td>
-		<td><img src="images/FillLayoutSampleHorizontal.jpg" /></td>
-		<td><img src="images/FillLayoutSampleHorizontalResized.jpg" /></td>
+		<td><img src="images/FillLayoutSampleHorizontal.png" /></td>
+		<td><img src="images/FillLayoutSampleHorizontalResized.png" /></td>
 	</tr>
 	<tr>
 		<td><code>fillLayout.type = SWT.VERTICAL</code></td>
-		<td><img src="images/FillLayoutSampleVertical.jpg" /></td>
-		<td><img src="images/FillLayoutSampleVerticalResized.jpg" /></td>
+		<td><img src="images/FillLayoutSampleVertical.png" /></td>
+		<td><img src="images/FillLayoutSampleVerticalResized.png" /></td>
 	</tr>
 </table>
 
@@ -267,7 +267,7 @@
 and spacing. The margin and spacing fields are shown in the following
 diagram.</p>
 
-<img src="images/RowLayoutMargins.jpg" />
+<img src="images/RowLayoutMargins.png" />
 
 <h3>RowLayout Examples</h3>
 
@@ -310,36 +310,36 @@
 rowLayout.type = SWT.HORIZONTAL;</pre>
 		<p>(defaults)</p>
 		</td>
-		<td><img src="images/RowLayoutSample01.jpg" /></td>
-		<td><img src="images/RowLayoutSample01Resized.jpg" /><p>and</p><img src="images/RowLayoutSample01ResizedNarrower.jpg" /></td>
+		<td><img src="images/RowLayoutSample01.png" /></td>
+		<td><img src="images/RowLayoutSample01Resized.png" /><p>and</p><img src="images/RowLayoutSample01ResizedNarrower.png" /></td>
 	</tr>
 	<tr>
 		<td><pre>wrap = false</pre>
 		<p>(clips if not enough space)</p>
 		</td>
-		<td><img src="images/RowLayoutSample02.jpg" /></td>
-		<td><img src="images/RowLayoutSample02Resized.jpg" /></td>
+		<td><img src="images/RowLayoutSample02.png" /></td>
+		<td><img src="images/RowLayoutSample02Resized.png" /></td>
 	</tr>
 	<tr>
 		<td><pre>pack = false</pre>
 		<p>(all widgets are the same size)</p>
 		</td>
-		<td><img src="images/RowLayoutSample03.jpg" /></td>
-		<td><img src="images/RowLayoutSample03Resized.jpg" /></td>
+		<td><img src="images/RowLayoutSample03.png" /></td>
+		<td><img src="images/RowLayoutSample03Resized.png" /></td>
 	</tr>
 	<tr>
 		<td><pre>justify = true</pre>
 		<p>(widgets are spread across the available space)</p>
 		</td>
-		<td><img src="images/RowLayoutSample04.jpg" /></td>
-		<td><img src="images/RowLayoutSample04Resized.jpg" /></td>
+		<td><img src="images/RowLayoutSample04.png" /></td>
+		<td><img src="images/RowLayoutSample04Resized.png" /></td>
 	</tr>
 	<tr>
 		<td><pre>type = SWT.VERTICAL</pre>
 		<p>(widgets are arranged vertically in columns)</p>
 		</td>
-		<td><img src="images/RowLayoutSample05.jpg" /></td>
-		<td><img src="images/RowLayoutSample05Resized.jpg" /></td>
+		<td><img src="images/RowLayoutSample05.png" /></td>
+		<td><img src="images/RowLayoutSample05Resized.png" /></td>
 	</tr>
 </table>
 
@@ -383,7 +383,7 @@
 
 <p>Here is what you see when you run this code.</p>
 
-<img src="images/RowDataExample.jpg" />
+<img src="images/RowDataExample.png" />
 
 <h2>GridLayout</h2>
 
@@ -431,9 +431,9 @@
 		<td><pre>numColumns = 3</pre></td>
 	</tr>
 	<tr>
-		<td><img src="images/GridLayoutSampleNumColumns1.jpg" /></td>
-		<td><img src="images/GridLayoutSampleNumColumns2.jpg" /></td>
-		<td><img src="images/GridLayoutSampleNumColumns3.jpg" /></td>
+		<td><img src="images/GridLayoutSampleNumColumns1.png" /></td>
+		<td><img src="images/GridLayoutSampleNumColumns2.png" /></td>
+		<td><img src="images/GridLayoutSampleNumColumns3.png" /></td>
 	</tr>
 </table>
 
@@ -443,7 +443,7 @@
 that in the absence of further instruction, widgets are left-justified
 in their columns).</p>
 
-<img src="images/GridLayoutSampleEqualWidth.jpg" />
+<img src="images/GridLayoutSampleEqualWidth.png" />
 
 <p>The <code>marginWidth</code>, <code>marginHeight</code>, <code>horizontalSpacing</code>,
 and <code>verticalSpacing</code> fields in a <code>GridLayout</code> are
@@ -475,7 +475,7 @@
 gridData.horizontalAlignment = GridData.FILL;
 gridData.grabExcessHorizontalSpace = true;
 button1.setLayoutData(gridData);</pre> <img
-	src="images/GridDataSampleHorizontalFill.jpg" />
+	src="images/GridDataSampleHorizontalFill.png" />
 
 <p>One final note about <code>GridData</code> objects before we get
 into their fields: do not reuse <code>GridData</code> objects. Every
@@ -507,19 +507,19 @@
 		<td><pre>horizontalAlignment = GridData.BEGINNING</pre>
 		<p>(default)</p>
 		</td>
-		<td><img src="images/GridDataSampleBeginning.jpg" /></td>
+		<td><img src="images/GridDataSampleBeginning.png" /></td>
 	</tr>
 	<tr>
 		<td><pre>horizontalAlignment = GridData.CENTER</pre></td>
-		<td><img src="images/GridDataSampleCenter.jpg" /></td>
+		<td><img src="images/GridDataSampleCenter.png" /></td>
 	</tr>
 	<tr>
 		<td><pre>horizontalAlignment = GridData.END</pre></td>
-		<td><img src="images/GridDataSampleEnd.jpg" /></td>
+		<td><img src="images/GridDataSampleEnd.png" /></td>
 	</tr>
 	<tr>
 		<td><pre>horizontalAlignment = GridData.FILL</pre></td>
-		<td><img src="images/GridDataSampleFill.jpg" /></td>
+		<td><img src="images/GridDataSampleFill.png" /></td>
 	</tr>
 </table>
 
@@ -532,7 +532,7 @@
 <pre>GridData gridData = new GridData();
 gridData.horizontalIndent = 4;
 button5.setLayoutData(gridData);</pre> <img
-	src="images/GridDataSampleIndent.jpg" />
+	src="images/GridDataSampleIndent.png" />
 
 <p>The <code>horizontalSpan</code> and <code>verticalSpan</code>
 fields let widgets occupy more than one grid cell. They are often used
@@ -543,7 +543,7 @@
 gridData.horizontalAlignment = GridData.FILL;
 gridData.horizontalSpan = 2;
 button5.setLayoutData(gridData);</pre> <img
-	src="images/GridDataSampleSpan01.jpg" />
+	src="images/GridDataSampleSpan01.png" />
 
 <p>If we decide to make &quot;Wide Button 2&quot; span two cells instead, we
 would end up with this:</p>
@@ -552,7 +552,7 @@
 gridData.horizontalAlignment = GridData.FILL;
 gridData.horizontalSpan = 2;
 button2.setLayoutData(gridData);</pre> <img
-	src="images/GridDataSampleSpan02.jpg" />
+	src="images/GridDataSampleSpan02.png" />
 
 <p>Or we could make &quot;Button 3&quot; span two cells vertically:</p>
 
@@ -560,7 +560,7 @@
 gridData.verticalAlignment = GridData.FILL;
 gridData.verticalSpan = 2;
 button3.setLayoutData(gridData);</pre> <img
-	src="images/GridDataSampleSpan03.jpg" />
+	src="images/GridDataSampleSpan03.png" />
 
 <p>The <code>grabExcessHorizontalSpace</code> and <code>grabExcessVerticalSpace</code>
 fields are typically used for larger widgets such as <code>Text,</code>
@@ -575,12 +575,12 @@
 resizing. For a simple example, let's reuse the previous example where
 &quot;Button 3&quot; spanned two cells vertically. Here it is again:</p>
 
-<img src="images/GridDataSampleSpan03.jpg" />
+<img src="images/GridDataSampleSpan03.png" />
 
 <p>If we resize this window, the only thing that happens is that the
 window gets bigger:</p>
 
-<img src="images/GridDataSampleSpan03Resized.jpg" />
+<img src="images/GridDataSampleSpan03Resized.png" />
 
 <p>Now we will tell &quot;Button 3&quot; to grab excess horizontal and vertical
 space, and &quot;B1&quot; and &quot;B4&quot; to fill vertically (without grabbing), and we
@@ -611,7 +611,7 @@
 button4.setLayoutData(gridData);
 
 new Button(shell, SWT.PUSH).setText(&quot;Button 5&quot;);</pre> <img
-	src="images/GridDataSampleGrab01.jpg" />
+	src="images/GridDataSampleGrab01.png" />
 
 <p>This time, &quot;Button 3&quot; grew in both directions, and &quot;B4&quot; grew
 vertically. The other buttons stayed their original sizes. Because
@@ -694,14 +694,14 @@
 	}
 }</pre> 
 
-<p><img src="images/GridLayoutGrabExcess.jpg" /></p>
+<p><img src="images/GridLayoutGrabExcess.png" /></p>
 
 <p>When resized, the single line (top-most) <code>Text</code> grows
 to consume all available horizontal space, and the second <code>Text</code>
 and the <code>List</code> grow to consume all remaining space (both
 vertically and horizontally):</p>
 
-<p><img src="images/GridLayoutGrabExcessResized.jpg" /></p>
+<p><img src="images/GridLayoutGrabExcessResized.png" /></p>
 
 <p>One final point to note about grabbing: if a widget is set to
 grab excess horizontal space and its parent <code>Composite</code> grows
@@ -729,8 +729,8 @@
 <p>The natural size of &quot;Button 5&quot; is shown in the window on the left,
 below, and the 70-pixel wide, 40-pixel tall &quot;Button 5&quot; is on the right.</p>
 
-<img src="images/GridLayoutSampleNumColumns3.jpg" /> <img
-	src="images/GridDataSampleSpan04.jpg" />
+<img src="images/GridLayoutSampleNumColumns3.png" /> <img
+	src="images/GridDataSampleSpan04.png" />
 
 <p>Note, however, that if the <code>horizontalAlignment</code> of
 &quot;Button 5&quot; was <code>FILL</code>, then the <code>GridLayout</code> would not have been
@@ -938,11 +938,11 @@
 
 <p>Here is what the window looks like after Mary Smith enters
 Bifford in the dog show:</p>
-<img src="images/DogShowBiff.jpg" />
+<img src="images/DogShowBiff.png" />
 
 <p>If this window is resized larger, the layout adjusts as follows:</p>
 
-<img src="images/DogShowBiffResized.jpg" />
+<img src="images/DogShowBiffResized.png" />
 
 <p>Notice the following:</p>
 <ul>
@@ -1063,7 +1063,7 @@
 formData.left = new FormAttachment(20,0);
 formData.right = new FormAttachment(100,-3);
 button1.setLayoutData(formData);</pre> <img
-	src="images/FormLayoutSample01.jpg" />
+	src="images/FormLayoutSample01.png" />
 
 <p>A <code>FormAttachment</code> object defines the attachment of a
 specific side of a widget. There are many ways that a side can be
@@ -1132,14 +1132,14 @@
 <pre>FormData formData = new FormData();
 formData.top = new FormAttachment(50,0);
 button1.setLayoutData(formData);</pre> <img
-	src="images/FormLayoutSamplePosition50.jpg" />
+	src="images/FormLayoutSamplePosition50.png" />
 
 <p>This sets the top of the <code>Button</code> to a position that
 represents 50% of the height of the parent <code>Composite</code> (a <code>Shell</code>),
 with an offset of 0. When the shell is resized, the top side of the <code>Button</code>
 will still be at 50%, like so:</p>
 
-<img src="images/FormLayoutSamplePosition50Resized.jpg" />
+<img src="images/FormLayoutSamplePosition50Resized.png" />
 
 <p>If we chose to set an offset value, the top side of the <code>Button</code>
 would have been set to 50% of the <code>Composite</code> plus or minus
@@ -1167,7 +1167,7 @@
 <pre>FormData formData = new FormData();
 formData.right = new FormAttachment(100,-5);
 button1.setLayoutData(formData);</pre> <img
-	src="images/FormLayoutSampleParent100.jpg" />
+	src="images/FormLayoutSampleParent100.png" />
 
 <p>This attaches the right side of the <code>Button</code> to the
 right edge of the parent (a <code>Shell</code>), with an offset of five
@@ -1177,7 +1177,7 @@
 negative. When the <code>Shell</code> is resized, the <code>Button</code>
 will always be five pixels away from the right edge:</p>
 
-<img src="images/FormLayoutSampleParent100Resized.jpg" />
+<img src="images/FormLayoutSampleParent100Resized.png" />
 
 <h3>Attaching to Another Widget</h3>
 <p>The third type of attachment is to attach the side of the widget
@@ -1196,7 +1196,7 @@
 FormData formData2 = new FormData();
 formData2.top = new FormAttachment(button1,10);
 button2.setLayoutData(formData2);</pre> <img
-	src="images/FormLayoutSampleAttachWidget01.jpg" />
+	src="images/FormLayoutSampleAttachWidget01.png" />
 
 <p>This example attaches the top of button2 to the bottom of
 button1. Note that when the window is resized, button1 will move so that
@@ -1204,7 +1204,7 @@
 button2 will move so that its top side is always 10 pixels below the
 adjacent (bottom) side of button1.</p>
 
-<img src="images/FormLayoutSampleAttachWidget01Resized.jpg" />
+<img src="images/FormLayoutSampleAttachWidget01Resized.png" />
 
 <p>While the default is to attach the side of a widget to the
 adjacent side of a control, <code>FormAttachment</code>s can also be
@@ -1232,7 +1232,7 @@
 formData2.left = new FormAttachment(button1,5);
 formData2.top = new FormAttachment(button1,0,SWT.TOP); 
 button2.setLayoutData(formData2);</pre> <img
-	src="images/FormLayoutSampleAttachWidget02.jpg" />
+	src="images/FormLayoutSampleAttachWidget02.png" />
 
 <p>The final way to attach a widget to another control is to center
 it on the other control. This is useful when the widgets are different
@@ -1255,7 +1255,7 @@
 formData2.left = new FormAttachment (button1,5);
 formData2.top = new FormAttachment (button1,0,SWT.CENTER);
 button2.setLayoutData(formData2);</pre> <img
-	src="images/FormLayoutSampleAttachWidget03.jpg" />
+	src="images/FormLayoutSampleAttachWidget03.png" />
 
 <p>Using the different types of <code>FormAttachment</code> allows
 layouts to be defined in many different ways. <code>FormLayout</code>
@@ -1316,7 +1316,7 @@
 <code>button4</code> and <code>button5</code> are attached to the bottom of the layout with a five
 pixel offset.</p>
 
-<img src="images/FormLayoutSample5Buttons01.jpg" />
+<img src="images/FormLayoutSample5Buttons01.png" />
 
 <p>When we resize, the attachments become more visible. <code>button1</code> is
 attached on the left and the right side, so when the window is resized,
@@ -1330,7 +1330,7 @@
 shrink, but it will always stay five pixels away from <code>button4</code> on the left,
 and five pixels away from the bottom of the window.</p>
 
-<img src="images/FormLayoutSample5Buttons01Resized.jpg" />
+<img src="images/FormLayoutSample5Buttons01Resized.png" />
 
 <h3>A Complex FormLayout Example</h3>
 
@@ -1560,12 +1560,12 @@
 <p>This is what the layout looks like after Mary Smith enters
 Bifford in the dog show:</p>
 
-<img src="images/DogShowBiffWithFormLayout.jpg" />
+<img src="images/DogShowBiffWithFormLayout.png" />
 
 <p>When the window is resized, the same controls are resized as in
 the <code>GridLayout</code> example.</p>
 
-<img src="images/DogShowBiffWithFormLayoutResized.jpg" />
+<img src="images/DogShowBiffWithFormLayoutResized.png" />
 
 <h2>Writing Your Own Layout Class</h2>
 
@@ -1834,8 +1834,8 @@
 the window with the mouse will also make the buttons wider (or narrower)
 but they do not grow taller.</p>
 
-<img src="images/CustomLayout.jpg" /> <img
-	src="images/CustomLayoutResized.jpg" />
+<img src="images/CustomLayout.png" /> <img
+	src="images/CustomLayoutResized.png" />
 
 <h3>Overriding Composite</h3>