thoughtasylumTOOLBOX Preview Guides Use offline Automate Feedback

Guides › Images

Screenshots for a blog post, slide or app store

A raw screenshot has the wrong shape, a messy desktop background and a file that is bigger than it needs to be. These tools get it ready for a blog post, a slide, a product page or a store listing, in your browser, without uploading anything. Screenshots often show names, emails and tokens, so look at each before you publish it.

1. Know the shape you need

Places that show screenshots want a particular shape: a slide is 16:9, a blog header is often wider, a store listing has its own sizes and limits. Those change, so check the current figures where you’re publishing.

Type your screenshot’s Width and Height in Aspect Ratio to see its ratio and the nearest common one. To find the other side for a shape you need, leave one box empty and type a Ratio such as 16:9: a table lists the height for common widths. If your picture is the wrong shape, crop it (or resize it) in Image Convert / Resize, where Crop keeps only the part you give and the Width and Height boxes set the size. Cropping to the shape first stops the next steps from stretching it.

2. Make it look finished

Open the screenshot in Screenshot Frame. Frame can be None, a Browser window (a plain bar with dots and an address pill, with no names or logos) or a Phone (a plain rounded body, not any particular device). Frame colour is Light or Dark. Then set:

  • Padding (% of the width): space round the frame, so it doesn’t touch the edge of the page.
  • Rounded corners (% of the width) and Shadow (0–100): a little of each lifts it off the page.
  • Background: Gradient, One colour, The picture, blurred, or Transparent. Choose a background that suits the page it will sit on, and one that keeps the text of the screenshot as the thing you see.

Save as PNG saves it at the picture’s full size plus the padding. A transparent background is only useful on a page that shows what’s behind it.

3. Put several in one picture

A before and after, or the screens of a flow, read better together. In Photo Collage, choose two to nine pictures and a Layout: Grid, Rows, one above another, Columns, side by side, or One big, the rest small. Drag one picture onto another to swap them. Picture in its cell chooses between Fill it, cropping the edges and Show all of it; for screenshots, Show all of it doesn’t cut off any of the interface. Shape and Width (pixels) set the size, and Gap and Rounded corners the spacing. Save as PNG keeps text sharp; Save as JPEG is smaller for photos.

4. Mark it as yours

If the picture will be copied around, stamp it in Watermark Image. Choose Text or A picture (such as a logo) under Stamp with, a Position, and set Width (% of the picture) and Opacity (%) so it can be read without covering the interface. Several pictures at once come back in a ZIP, each named with -watermarked. A watermark deters casual reuse, but it can be cropped or edited out, so it is not protection.

5. Check what changed between versions

For a new release’s screenshots, compare them with the old ones in Image Compare. Choose the first picture (before) and the second (after) and set Show to Differences: every changed pixel is marked and a box shows where. Raise Tolerance to ignore slight shading or JPEG noise. Slider and Onion skin (fade) are better for showing someone the change; Save this view as PNG saves what you see. It is also useful for catching an accidental change, such as a different name or date in the corner, before a screenshot is published.

6. Make the files small

Screenshots with large flat areas shrink a lot. Add them to Image Compressor. Quality sets how close the result must be to the original: Visually lossless (score 90) or High (score 85) suit screenshots with small text, and Lossless: no pixel changed changes no pixels. Save as keeps the format, or tries them all and keeps the smallest; AVIF is usually smallest for photos, but some apps and site builders don’t take it yet. Each result shows its new size, with Compare to check it by eye, and Download all as ZIP saves them all. Look at small text in each result before you publish it.

All 62 guides, grouped by what they help with.

Saved you a few minutes? Say thanks with a coffee.

Something wrong or unclear in this guide? Report it or suggest a guide.

↑ ↓ move↵ openesc close