> For the complete documentation index, see [llms.txt](https://nextsky.gitbook.io/purity-theme/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://nextsky.gitbook.io/purity-theme/group-blocks/decorative/image-comparison.md).

# Image comparison

The **Image Comparison** block allows customers to interactively compare two images (typically a 'before' and 'after' state) using a draggable slider. You can set the images, control the aspect ratio, and customize the styling.

<figure><img src="https://1059363070-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRcDJSoM26kdEZlVFekVW%2Fuploads%2FrYYBkCoBayqjkgM0onmy%2Fimage.png?alt=media&amp;token=c5dfa26f-17ca-461a-bc02-a1de1dce697d" alt=""><figcaption></figcaption></figure>

## General settings

| Setting                      | Description                                                                                                                                                                                                                                                                                                                                                                                                                    |
| ---------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| **Before / After**           | Choose the image to display for this section or feature. You can upload a new image or select one from your existing media library.                                                                                                                                                                                                                                                                                            |
| **Show before / after text** | <p>Specify the image to be displayed on mobile devices.</p><p>This allows you to use a mobile-optimized image that may differ from the desktop version for better performance and visual clarity.</p>                                                                                                                                                                                                                          |
| **Image ratio**              | <p>The image ratio for the featured images of the blog posts:</p><ul><li><strong>Adapt to image</strong> - Uses the aspect ratio of the images. This prevents the images from being cropped.</li><li><strong>Portrait</strong> - Crops the images to use a 3:4 ratio.</li><li><strong>Square</strong> - Crops the images to use a 1:1 ratio</li><li><strong>Landscape</strong> - Crops the images to use a 4:3 ratio</li></ul> |
| **Corner Radius**            | <p>Controls the rounding of the block's corners. Options include:</p><ul><li>Inherit (Default — adopts the Theme settings's radius)</li><li>None (Sharp corners)</li><li>Custom (Allows you to set a specific radius).</li></ul>                                                                                                                                                                                               |
| **Custom Radius**            | <p><em>Only visible when Corner Radius is Custom</em>.</p><p>Use the slider to set a specific corner radius for the block, measured in pixels (px) (Range: 0px to 50px).</p>                                                                                                                                                                                                                                                   |