image-js · EscapedGibbon · Oct 1, 2025 · Sep 30, 2025 · Sep 30, 2025 · Oct 1, 2025
diff --git a/docs/basics/images/workingWithImages/coordinatesImage.jpg b/docs/basics/images/workingWithImages/coordinatesImage.jpg
diff --git a/docs/basics/images/workingWithImages/imageCoordOrigin.svg b/docs/basics/images/workingWithImages/imageCoordOrigin.svg
diff --git a/docs/basics/working-with-images.md b/docs/basics/working-with-images.md
@@ -26,7 +26,7 @@ In the context of digital technology and computing, images are represented as a
 
 The origin point has coordinates (0,0) and is located in the top-left corner of an image.
 
-![Image coordinates](./images/workingWithImages/coordinatesImage.jpg)
+![Image coordinates](./images/workingWithImages/imageCoordOrigin.svg)
 
 So, if we want to get a certain pixel on the image we will be counting the distance from image's top-left corner.
 

diff --git a/docs/tutorials/applying-transform-function-on-images.md b/docs/tutorials/applying-transform-function-on-images.md
@@ -103,10 +103,10 @@ const transformationMatrix = [
   [0, 2, 0], // d=0, e=2 (vertical scale), f=0
 ];
 
-const scaledImage = image.transform(transformationMatrix);
+const scaledImage = image.transform(transformationMatrix, { fullImage: true });
 ```
 
-![Scaled image](./images/transformations/lennaScaled.png)
+![Scaled image](./images/transformations/barbaraScaleDemo.png)
 
 ### Non-uniform Scaling
 
@@ -116,11 +116,11 @@ const transformationMatrix = [
   [3, 0, 0], // Horizontal stretch
   [0, 0.5, 0], // Vertical compression
 ];
-
-const stretchedImage = image.transform(transformationMatrix);
+// Added trueImage to include all pixels into a destination image
+const stretchedImage = image.transform(transformationMatrix,, { fullImage: true });
 ```
 
-![Stretched image](./images/transformations/lennaStretched.png)
+![Stretched image](./images/transformations/barbaraStretchDemo.png)
 
 :::note
 ImageJS also has [`resize`](../features/geometry/resize.md) function that allows to scale an image.
@@ -135,32 +135,32 @@ const shrinkMatrix = [
   [0.5, 0, 0],
   [0, 0.5, 0],
 ];
-const shrunkImage = image.transform(shrinkMatrix);
+const shrunkImage = image.transform(shrinkMatrix, { fullImage: true });
 ```
 
-![Shrunk image](./images/transformations/lennaShrunk.png)
+![Shrunk image](./images/transformations/barbaraShrinkDemo.png)
 
 ```ts
 // Mirror horizontally (flip left-right)
 const mirrorMatrix = [
   [-1, 0, 0],
   [0, 1, 0],
 ];
-const mirroredImage = image.transform(mirrorMatrix);
+const mirroredImage = image.transform(mirrorMatrix, { fullImage: true });
 ```
 
-![Mirrored image](./images/transformations/lennaMirrorred.png)
+![Mirrored image](./images/transformations/barbaraMirrorDemo.png)
 
 ```ts
 // Mirror vertically (flip up-down)
 const flipMatrix = [
   [1, 0, 0],
   [0, -1, 0],
 ];
-const flippedImage = image.transform(flipMatrix);
+const flippedImage = image.transform(flipMatrix, { fullImage: true });
 ```
 
-![Flipped image](./images/transformations/lennaFlipped.png)
+![Flipped image](./images/transformations/barbaraFlipDemo.png)
 :::note
 ImageJS also has [`flip`](../features/geometry/flip.md) function that allows to flip an image.
 Current tutorial just demonstrates the basic principle behind transformation of such kind.
@@ -180,7 +180,7 @@ const translationMatrix = [
 const translatedImage = image.transform(translationMatrix);
 ```
 
-![Translated image](./images/transformations/lennaTranslated.png)
+![Translated image](./images/transformations/barbaraTranslateDemo.png)
 
 ### Rotation
 
@@ -204,7 +204,7 @@ const rotationMatrix = [
 const rotatedImage = image.transform(rotationMatrix);
 ```
 
-![Rotated image](./images/transformations/lennaRotated.png)
+![Rotated image](./images/transformations/barbaraRotateBy45Demo.png)
 
 ### Shearing
 
@@ -222,7 +222,7 @@ const horizontalShearMatrix = [
 const horizontalShearImage = image.transform(horizontalShearMatrix);
 ```
 
-![Horizontally sheared image](./images/transformations/lennaHorizontalShear.png)
+![Horizontally sheared image](./images/transformations/barbaraHorizontalShearDemo.png)
 
 #### Vertical shearing
 
@@ -236,7 +236,7 @@ const verticalShearMatrix = [
 const verticalShearImage = image.transform(verticalShearMatrix);
 ```
 
-![Vertically sheared image](./images/transformations/lennaVerticalShear.png)
+![Vertically sheared image](./images/transformations/barbaraVerticalShearDemo.png)
 
 #### Combined shearing
 
@@ -250,7 +250,7 @@ const combinedShearMatrix = [
 const combinedShearImage = image.transform(combinedShearMatrix);
 ```
 
-![Combined shearing](./images/transformations/lennaCombinedShear.png)
+![Combined shearing](./images/transformations/barbaraCombinedShearDemo.png)
 
 ### Complex Affine Transformations
 
@@ -299,7 +299,7 @@ const rotateAroundCenterImage = image.transform(
 );
 ```
 
-![Rotated by center image](./images/transformations/lennaRotatedCenter.png)
+![Rotated by center image](./images/transformations/barbaraRotateAroundCenterDemo.png)
 
 :::note
 Image-js also has [`rotate()`](../features/geometry/rotate.md) and [`transformRotate()`](../features/geometry/transform-and-rotate.md) functions. `rotate()` function allows rotating an image by multiple of 90 degrees.

diff --git a/docs/tutorials/images/transformations/barbaraCombinedShearDemo.png b/docs/tutorials/images/transformations/barbaraCombinedShearDemo.png
diff --git a/docs/tutorials/images/transformations/barbaraFlipDemo.png b/docs/tutorials/images/transformations/barbaraFlipDemo.png
diff --git a/docs/tutorials/images/transformations/barbaraHorizontalShearDemo.png b/docs/tutorials/images/transformations/barbaraHorizontalShearDemo.png
diff --git a/docs/tutorials/images/transformations/barbaraMirrorDemo.png b/docs/tutorials/images/transformations/barbaraMirrorDemo.png
diff --git a/docs/tutorials/images/transformations/barbaraRotateAroundCenterDemo.png b/docs/tutorials/images/transformations/barbaraRotateAroundCenterDemo.png
diff --git a/docs/tutorials/images/transformations/barbaraRotateBy45Demo.png b/docs/tutorials/images/transformations/barbaraRotateBy45Demo.png
diff --git a/docs/tutorials/images/transformations/barbaraScaleDemo.png b/docs/tutorials/images/transformations/barbaraScaleDemo.png
diff --git a/docs/tutorials/images/transformations/barbaraShrinkDemo.png b/docs/tutorials/images/transformations/barbaraShrinkDemo.png
diff --git a/docs/tutorials/images/transformations/barbaraStretchDemo.png b/docs/tutorials/images/transformations/barbaraStretchDemo.png
diff --git a/docs/tutorials/images/transformations/barbaraTranslateDemo.png b/docs/tutorials/images/transformations/barbaraTranslateDemo.png
diff --git a/docs/tutorials/images/transformations/barbaraVerticalShearDemo.png b/docs/tutorials/images/transformations/barbaraVerticalShearDemo.png
diff --git a/docs/tutorials/images/transformations/lennaCombinedShear.png b/docs/tutorials/images/transformations/lennaCombinedShear.png
diff --git a/docs/tutorials/images/transformations/lennaFlipped.png b/docs/tutorials/images/transformations/lennaFlipped.png
diff --git a/docs/tutorials/images/transformations/lennaHorizontalShear.png b/docs/tutorials/images/transformations/lennaHorizontalShear.png
diff --git a/docs/tutorials/images/transformations/lennaMirrorred.png b/docs/tutorials/images/transformations/lennaMirrorred.png
diff --git a/docs/tutorials/images/transformations/lennaRotated.png b/docs/tutorials/images/transformations/lennaRotated.png
diff --git a/docs/tutorials/images/transformations/lennaRotatedCenter.png b/docs/tutorials/images/transformations/lennaRotatedCenter.png
diff --git a/docs/tutorials/images/transformations/lennaScaled.png b/docs/tutorials/images/transformations/lennaScaled.png
diff --git a/docs/tutorials/images/transformations/lennaShrunk.png b/docs/tutorials/images/transformations/lennaShrunk.png
diff --git a/docs/tutorials/images/transformations/lennaStretched.png b/docs/tutorials/images/transformations/lennaStretched.png
diff --git a/docs/tutorials/images/transformations/lennaTranslated.png b/docs/tutorials/images/transformations/lennaTranslated.png
diff --git a/docs/tutorials/images/transformations/lennaVerticalShear.png b/docs/tutorials/images/transformations/lennaVerticalShear.png
diff --git a/docs/useful-tips/blurring-techniques-and-their-differences.md b/docs/useful-tips/blurring-techniques-and-their-differences.md
@@ -11,7 +11,7 @@ To be precise blur is a general term that refers to a reduction in the sharpness
 The key advantage of box blur compared to other filters is its speed. It is slightly faster than Gaussian Blur, and it doesn't need to sort all values within the cells, like median.
 However, this also means that every pixel has the same weight to the algorithm regardless of its position. Therefore the blurring quality drops compared to the gaussian blur and the output gets relatively blocky.
 
-![Difference in quality](./images/blurring/MBvsGB.png)
+![Difference in quality](./images/blurring/blurVsGaussianBlur.png)
 
 ## Gaussian Blur
 

diff --git a/docs/useful-tips/images/blurring/MBvsGB.png b/docs/useful-tips/images/blurring/MBvsGB.png
diff --git a/docs/useful-tips/images/blurring/blurVsGaussianBlur.png b/docs/useful-tips/images/blurring/blurVsGaussianBlur.png
diff --git a/src/demo/contexts/demo/defaultImages.ts b/src/demo/contexts/demo/defaultImages.ts
@@ -7,38 +7,62 @@ const morphologyMaskUrl = 'https://demo-dataset.image-js.org/morphology_mask';
 export const defaultImages: UrlOption[] = [
   {
     type: 'url',
-    value: `${standardUrl}/mandrill.png`,
-    label: 'Mandrill',
+    value: `${standardUrl}/jellybeans.png`,
+    label: 'Jelly beans (256x256)',
     imageType: 'image',
   },
   {
     type: 'url',
-    value: `${standardUrl}/barbara.jpg`,
-    label: 'Barbara',
+    value: `${standardUrl}/female.png`,
+    label: 'Female (256x256)',
     imageType: 'image',
   },
   {
     type: 'url',
-    value: `${standardUrl}/boat.png`,
-    label: 'Standard boat',
+    value: `${standardUrl}/femaleBellLabs.png`,
+    label: 'Female from Bell Labs (256x256)',
     imageType: 'image',
   },
   {
     type: 'url',
-    value: `${standardUrl}/peppers.png`,
-    label: 'Peppers',
+    value: `${standardUrl}/mandrill.png`,
+    label: 'Mandrill (267x256)',
     imageType: 'image',
   },
   {
     type: 'url',
     value: `${standardUrl}/house.png`,
-    label: 'House',
+    label: 'House (267x256)',
+    imageType: 'image',
+  },
+  {
+    type: 'url',
+    value: `${standardUrl}/peppers.png`,
+    label: 'Peppers (267x267)',
+    imageType: 'image',
+  },
+  {
+    type: 'url',
+    value: `${standardUrl}/barbara.jpg`,
+    label: 'Barbara (512x512)',
+    imageType: 'image',
+  },
+  {
+    type: 'url',
+    value: `${standardUrl}/boat.png`,
+    label: 'Standard boat (512x512)',
     imageType: 'image',
   },
   {
     type: 'url',
-    value: `${standardUrl}/lenna.png`,
-    label: 'Lenna',
+    value: `${standardUrl}/male.png`,
+    label: 'Male (1024x1024)',
+    imageType: 'image',
+  },
+  {
+    type: 'url',
+    value: `${standardUrl}/airport.png`,
+    label: 'Airport (1024x1024)',
     imageType: 'image',
   },
 ];
@@ -47,55 +71,56 @@ export const defaultMasks: UrlOption[] = [
   {
     type: 'url',
     value: `${morphologyMaskUrl}/circles.png`,
-    label: 'Circles',
+    label: 'Circles (507x509)',
     imageType: 'mask',
   },
   {
     type: 'url',
-    value: `${morphologyMaskUrl}/star.png`,
-    label: 'Star',
+    value: `${morphologyMaskUrl}/shapes.png`,
+    label: 'Shapes (640x612)',
     imageType: 'mask',
   },
   {
     type: 'url',
-    value: `${morphologyMaskUrl}/shapes.png`,
-    label: 'Shapes',
+    value: `${morphologyMaskUrl}/star.png`,
+    label: 'Star (716x716)',
     imageType: 'mask',
   },
   {
     type: 'url',
-    value: `${standardMaskUrl}/lenna.png`,
-    label: 'Lenna',
+    value: `${standardMaskUrl}/house.png`,
+    label: 'House (267x256)',
     imageType: 'mask',
   },
   {
     type: 'url',
-    value: `${standardMaskUrl}/barbara.png`,
-    label: 'Barbara',
+    value: `${standardMaskUrl}/mandrill.png`,
+    label: 'Mandrill (267x256)',
     imageType: 'mask',
   },
   {
     type: 'url',
-    value: `${standardMaskUrl}/boat.png`,
-    label: 'Standard boat',
+    value: `${standardMaskUrl}/peppers.png`,
+    label: 'Peppers (267x267)',
     imageType: 'mask',
   },
   {
     type: 'url',
-    value: `${standardMaskUrl}/mandrill.png`,
-    label: 'Mandrill',
+    value: `${standardMaskUrl}/barbara.png`,
+    label: 'Barbara (512x512)',
     imageType: 'mask',
   },
   {
     type: 'url',
-    value: `${standardMaskUrl}/peppers.png`,
-    label: 'Peppers',
+    value: `${standardMaskUrl}/boat.png`,
+    label: 'Standard boat (512x512)',
     imageType: 'mask',
   },
+
   {
     type: 'url',
-    value: `${standardMaskUrl}/house.png`,
-    label: 'House',
+    value: `${standardMaskUrl}/male.png`,
+    label: 'Male (1024x1024)',
     imageType: 'mask',
   },
 ];