# Before and after posts: a layout that tells the story [Canonical HTML page](https://gradiently.design/guide/before-and-after-post) Few formats persuade as quickly as a before and after. Few are as easy to get wrong, through mismatched photos, cramped layouts or results that were helped along. ## The short version - A before and after post shows two matching photos of the same subject so the change between them is the only thing that differs. - Shoot both photos from the same angle, distance and light, or the comparison stops being fair. - Side by side suits square and landscape posts, stacked suits stories, and a two page carousel lets the after arrive as a reveal. - Label each half clearly and keep labels in the same place on both sides. - Only post real results, with the client's consent, and avoid editing either photo beyond matching exposure. A good **before and after post** shows the same subject twice, photographed the same way, so the only thing that changes is the work you did. The layout's job is to make that change obvious at a glance: two halves, clear labels, nothing competing. Salons, cleaners, decorators, landscapers, detailers, physios and designers all rely on the format, because a result is more convincing than any description of it. ## Start with photos that match Most weak before and after posts fail before anyone opens a design tool. The before was shot in dim evening light on a wide lens; the after was shot in bright daylight from a flattering angle. Viewers notice, even if they can't say why, and the whole post feels staged. 1. **Mark your spot** Stand in the same place for both photos. A strip of tape on the floor, or a note of the doorway you shot from, is enough. 2. **Match the height and lens** Hold the phone at the same height and use the same zoom. Switching to the wide lens for one shot changes the room's proportions. 3. **Match the light** Same time of day, same lamps on or off. If you can't, shoot both with the main lights on and the blinds in the same position. 4. **Keep the frame orientation** Both portrait or both landscape. A portrait before beside a landscape after can never line up. 5. **Take a few of each** Choose the pair that matches best later. It is far easier than recreating a before once the work is done. ## Before and after layouts that work There are three reliable layouts. Which one to use depends on the platform and on how dramatic the change is. | Layout | Best for | Size | | --- | --- | --- | | Side by side | Feed posts, rooms, cars, gardens | Square 1080×1080 or landscape 1080×566 | | Stacked | Stories, Reels covers, portraits of people | Story 1080×1920 or post 1080×1350 | | Two page carousel | Big reveals where the after should land as a surprise | Post 1080×1350, two pages | Three layouts and the sizes that suit them. A stacked layout gives each photo the full width, which helps on a phone. - Side by side 1080×1080: 1080 × 1080 - Stacked 1080×1920: 1080 × 1920 - Carousel page 1080×1350: 1080 × 1350 Split a square down the middle and each photo becomes a tall 540×1080 strip. Split a story across the middle and each half is a near square 1080×960. Notice what splitting does to each photo. Side by side on a square leaves each half tall and narrow, which suits a doorway or a person standing, but crops a wide room hard. Stacked in a story leaves each half almost square, which suits most subjects. If your photos are landscape, a stacked layout usually wastes less of them. In a story, keep the labels clear of the top and bottom 250 pixels, where the app's own interface sits, as [social media safe zones](https://gradiently.design/guide/social-media-safe-zones) explains. ### The carousel reveal A carousel lets the before stand alone first. Page one shows the problem with a short line ("Six years of moss."), page two shows the result. The swipe becomes the reveal, which tends to hold attention better than seeing both at once. Keep the photos framed identically so the swipe feels like a single image changing. [Instagram carousel size](https://gradiently.design/guide/instagram-carousel-size) has the page dimensions. The first page of a carousel labelled Before, with the line Six years of moss Page one: the before, labelled, with one line that sets up the problem. The second page of the carousel labelled After, with the line Same driveway, Sunday Page two: the after, with the label in the same place so the eye compares directly. ## Labels, lines and branding Label each half "Before" and "After" in the same position, the same size, the same colour. Readers compare by flicking their eyes between matching spots, and a label in the top left on one side and bottom right on the other breaks that rhythm. Small caps or a short tab works well. - Put a thin divider between the halves, or a gap in your brand colour, so the photos don't blur together. - Add one line of context: the job, the time it took, or the product used. Not a paragraph. - Keep your logo small and in a corner. The result is the advert. - Use the same frame for every before and after you post, so they become a recognisable series. Words on top of photos need care, because a bright window or white wall can swallow a white label. [Make text readable on photos](https://gradiently.design/guide/readable-text-on-photos) covers the options. Keeping labels on a branded band above or below the photos, rather than on them, sidesteps the problem entirely. ## Ethics: show real results only The format's power is also its risk. A before and after is a claim: this is what we can do. If the result was retouched, borrowed or exceptional, the claim is false, and in some fields, such as cosmetic treatments, health and weight loss, advertising rules on these images are strict. Check the rules for your industry and country before you post. ### Avoid - Retouching the after, or darkening the before - Different lighting that flatters the result - Stock or another business's photos - Your single best result presented as typical - A client's face or home without their consent ### Do - Match exposure and white balance only - Same angle, distance and light for both - Your own work, photographed by you - Say how long it took and what was involved - Written permission, and the option to stay anonymous For people rather than places, consent matters even more. Ask before the before photo is taken, explain where it will appear, and offer to crop out faces or tattoos. Many clients are happy to share their result once they know they can say no. ## Make the frame yours When every cleaner and every salon posts the same white split template, the frame is where you can stand apart. A consistent background around the photos, the same label style and the same typeface turn a run of results into something people recognise as yours in the feed. [Small business Instagram ideas](https://gradiently.design/guide/small-business-instagram) and [salon social media posts](https://gradiently.design/guide/salon-social-media-posts) show how this fits a wider plan. In Gradiently, a carousel is simply pages of one design, so the before and the after share every setting, and resizing makes the story size from the same design, ready for you to stack the photos. The background is your Mark, a look no other business can use once it is yours. ## FAQ ### How do you make a before and after post? Photograph the subject from the same spot, height and light before and after the work, then place the photos side by side or stacked with matching Before and After labels. ### What size is a before and after post on Instagram? Use 1080×1080 for side by side, 1080×1920 for a stacked story, or two 1080×1350 carousel pages for a swipe reveal. ### Is it OK to edit before and after photos? Matching exposure and white balance is fine. Retouching the result or making the before look worse misleads people and may break advertising rules. ### Do I need permission for client before and after photos? Yes. Ask before taking the before photo, explain where it will appear, and offer to hide faces or identifying details. ### Should a before and after be side by side or a carousel? Side by side shows the change instantly and suits a single feed post. A two page carousel holds the after back for a swipe, which works best when the change is dramatic.