Add sync-by animation showing four modes

docs/DOWNLOAD_TUTORIAL.md

@@ -514,23 +514,22 @@ Once finished, close the Viewer — or explore it further using your own images!
 
 ## Set zoom synchronization mode
 
-Zoom can be synchronized by width, height, pixel size, or the fit-in-a-box method by right-clicking an image and selecting the mode under **Sync zoom by**.
+![Screenshots showing sync by fit-in-a-box, width, height, and pixel.](images/sync_by_modes.gif)
 
-![Screenshot showing right-click menu with the 'Sync zoom by...' submenu selected.](images/tutorial/right-click_sync_zoom.jpg)
+Zoom can be synchronized by one of four modes by right-clicking an image and selecting the mode under **Sync zoom by**:
+
+- Fit in a box (default): images are scaled to fit to the same sized square box.
 
-Fit in a box (default): images are scaled to fit to the same sized square box.
-![Screenshot showing sync by fit-in-a-box.](images/tutorial/sync_by_fit-in-a-box.jpg)
+- Width: images are scaled to appear equally as wide.
 
-Sync by width: images are scaled to appear equally as wide.
-![Screenshot showing sync by width.](images/tutorial/sync_by_width.jpg)
+- Height: images are scaled to appear equally as tall.
 
-Height: images are scaled to appear equally as tall.
-![Screenshot showing sync by height.](images/tutorial/sync_by_height.jpg)
+- Pixel (relative size): images are not scaled whereby pixels between images are the same size.
 
-Pixel (relative size): images are not scaled whereby pixels between images are the same size.
-![Screenshot showing sync by pixel.](images/tutorial/sync_by_pixel.jpg)
+![Screenshot showing right-click menu with the 'Sync zoom by...' submenu selected.](images/tutorial/right-click_sync_zoom.jpg)
 
 Sliding overlays scale their non-base images using the fit-in-a-box method.
+
 ![Animated screencapture showing a sliding overlay with the same image at four different resolutions.](images/viewer_sliding_overlay_scaling.gif)
 
 

docs/butterfly_viewer.html

@@ -660,24 +660,22 @@ <h2 id="alphascale-maps-with-sliding-overlays">Alphascale maps with sliding over
 
 <h2 id="set-zoom-synchronization-mode">Set zoom synchronization mode</h2>
 
-<p>Zoom can be synchronized by width, height, pixel size, or the fit-in-a-box method by right-clicking an image and selecting the mode under <strong>Sync zoom by</strong>.</p>
+<p><img src="images/sync_by_modes.gif" alt="Screenshots showing sync by fit-in-a-box, width, height, and pixel." /></p>
 
-<p><img src="images/tutorial/right-click_sync_zoom.jpg" alt="Screenshot showing right-click menu with the 'Sync zoom by...' submenu selected." /></p>
-
-<p>Fit in a box (default): images are scaled to fit to the same sized square box.
-<img src="images/tutorial/sync_by_fit-in-a-box.jpg" alt="Screenshot showing sync by fit-in-a-box." /></p>
+<p>Zoom can be synchronized by one of four modes by right-clicking an image and selecting the mode under <strong>Sync zoom by</strong>:</p>
 
-<p>Sync by width: images are scaled to appear equally as wide.
-<img src="images/tutorial/sync_by_width.jpg" alt="Screenshot showing sync by width." /></p>
+<ul>
+<li><p>Fit in a box (default): images are scaled to fit to the same sized square box.</p></li>
+<li><p>Width: images are scaled to appear equally as wide.</p></li>
+<li><p>Height: images are scaled to appear equally as tall.</p></li>
+<li><p>Pixel (relative size): images are not scaled whereby pixels between images are the same size.</p></li>
+</ul>
 
-<p>Height: images are scaled to appear equally as tall.
-<img src="images/tutorial/sync_by_height.jpg" alt="Screenshot showing sync by height." /></p>
+<p><img src="images/tutorial/right-click_sync_zoom.jpg" alt="Screenshot showing right-click menu with the 'Sync zoom by...' submenu selected." /></p>
 
-<p>Pixel (relative size): images are not scaled whereby pixels between images are the same size.
-<img src="images/tutorial/sync_by_pixel.jpg" alt="Screenshot showing sync by pixel." /></p>
+<p>Sliding overlays scale their non-base images using the fit-in-a-box method.</p>
 
-<p>Sliding overlays scale their non-base images using the fit-in-a-box method.
-<img src="images/viewer_sliding_overlay_scaling.gif" alt="Animated screencapture showing a sliding overlay with the same image at four different resolutions." /></p>
+<p><img src="images/viewer_sliding_overlay_scaling.gif" alt="Animated screencapture showing a sliding overlay with the same image at four different resolutions." /></p>
 
 <h1 id="common-questions">Common questions</h1>