Compare images

Two images stacked in one frame with a draggable wipe handle, so a reader can slide between a before and an after.

Compare images is for showing a change rather than describing it - a light and a dark theme of the same screen, a before and after of a redesign, two revisions of a diagram, a retouched and an original photo. The reader drags a divider across the frame (or up and down, if you set it vertical) and the second image is revealed underneath. You pick the two pictures, choose the wipe direction and the frame proportions, and set how wide the frame should be.

#See it

Every example below is a real macro on this page, not a screenshot, and each one is a configuration taken from a page somebody actually built. Open this page in the editor to see how any of them is set up.

#Horizontal, center, wider

#Settings

Part of the Compare images configuration panel showing horizontal and vertical direction buttons and left, centre and right alignment buttons, with a callout pointing at the direction control. — Direction decides whether the handle is dragged across the pair or up and down it, and align places the pair on the page.

Setting	Values	What it changes
Left Image / Top Image	A picked attachment, an uploaded file, a recently-used URL, or a pasted URL. Placeholder 'No media selected'. Description: 'URL of the image to display on the left' (or 'top').	The image revealed by the wipe - the one clipped by the divider. The label and its description change to 'Top Image' automatically when Direction is Vertical.
Right Image / Bottom Image	Same picker as above.	The image that sits underneath and fills the rest of the frame. Label switches to 'Bottom Image' when Direction is Vertical.
Direction	horizontal, vertical (radio buttons, shown with those literal words). Description: 'Choose how to display the images'.	Which way the divider wipes. Horizontal gives a left/right wipe with an east-west drag cursor; vertical gives a top/bottom wipe with a north-south cursor.
Aspect Ratio	wider, taller (radio buttons, shown with those literal words). Description: 'Select the aspect ratio of the images'.	The shape of the frame. 'wider' is 16:9; 'taller' is 3:4. This decides the frame's rendered HEIGHT, because Height (below) actually sets the frame's width.
Align	left, center, right (radio buttons). Description: 'Choose how to align the images'.	Where the comparison frame sits across the page width.
Height	Number box, 100 to 2000, stepping by 50. Description: 'Specify the height of the image'.	MISLABELLED. This is the frame's WIDTH in pixels, not its height. The frame's actual height is derived from the Aspect Ratio: width × 9/16 for 'wider', or width × 4/3 for 'taller'. So the default 600 gives a 600 × 338 frame, and s
Corner radius	Slider, 0 to 24 px	Rounds the corners of the comparison frame.
Border	Off / On. When On, a Width slider (0 to 6 px) and a colour swatch appear.	Draws an outline around the comparison frame.
Image fit	Cover, Contain. Hint: 'Cover fills and crops; contain fits the whole image.'	How each image sits inside the frame. Cover fills it edge to edge and crops, which keeps the wipe clean. Contain fits the whole picture and may letterbox - which is what every comparison saved before this control existed does.

Cards

A grid of up to six coloured cards, each with a title, description, optional image and optional

Gallery

A set of images shown either as a grid of equal-height cells or as a swipeable carousel, with t

Cards, images and media

The rest of this family.

A landing page, not a document.