What is the difference between an overlay and a watermark?

A watermark is a specific type of overlay — usually a semi-transparent logo or text placed on an image to indicate ownership. An overlay is the broader concept of layering any visual element on top of another image.

Do overlays increase file size?

Yes, but the impact depends on the overlay type. Simple solid shapes or text add minimal data. Complex semi-transparent overlays with gradients or images can increase file size noticeably, especially in PNG format which preserves transparency.

Can I remove an overlay after saving?

Only if the image was saved in a format that preserves layers, such as PSD or a project file. Once an overlay is flattened into a PNG or JPG, the original pixels beneath it are permanently replaced and cannot be recovered.

What format should I use for images with overlays?

PNG is the most reliable choice because it supports full transparency. JPG does not support transparency, so semi-transparent overlays will lose their blending when saved as JPG. WebP also supports transparency and offers smaller file sizes.

How do I overlay a screenshot onto a device mockup?

Place the screenshot layer inside the screen area of a device frame image, scaling and positioning it to fit the display boundaries. Many screenshot tools automate this by providing device templates that accept a screenshot and produce a finished mockup.

What Is Image Overlay? | Glossary

Image overlay is layering one image, shape, or visual element on top of another — used in annotations, device mockups, comparison views, and branded screenshots.

Types of overlays

Overlays come in several forms, each serving a different purpose in visual communication.

Annotation overlays add arrows, circles, text labels, and highlight boxes on top of a screenshot to draw attention to specific areas. These are the most common overlays in documentation and bug reports.

Device frame overlays wrap a screenshot inside a phone, tablet, or laptop mockup. The device image sits on top (or around) the screenshot, giving it a realistic context that works well in marketing materials and app store listings.

Comparison overlays place two images side by side or stack them with a slider to show before-and-after states. These are used in visual regression testing, design reviews, and product demos.

Branding overlays apply logos, watermarks, or color tints to establish ownership or visual identity. These range from subtle corner logos to full-image semi-transparent patterns.

Where overlays are used

Product marketing — device mockups with screenshots placed inside phone or laptop frames create polished visuals for landing pages and app stores.
Documentation — annotation overlays with numbered callouts guide readers through step-by-step instructions, making complex interfaces easier to understand.
Bug reports — highlighted areas and arrow overlays pinpoint the exact location of a visual defect, reducing back-and-forth between reporters and developers.
Social media — branded overlays with logos, gradients, or text banners turn plain screenshots into shareable, on-brand visuals.
Design reviews — comparison overlays show the difference between design mockups and implemented UIs, helping teams spot discrepancies quickly.

How overlays work

At a technical level, an overlay is a second layer composited on top of a base image. The compositing process uses alpha (transparency) values to determine how the overlay blends with the base. Fully opaque pixels replace the base entirely. Semi-transparent pixels blend with the base, producing effects like tinted highlights or ghosted watermarks.

Most screenshot and image-editing tools handle overlays nondestructively during editing — the base image and overlay remain separate until the final export. On export, the layers are flattened into a single image, permanently merging the overlay into the pixel data.

Automated screenshot pipelines often apply overlays programmatically. A tool might accept a raw screenshot, position it inside a device template, add a branded footer, and export the finished composite — all without manual positioning. This consistency is valuable when producing dozens or hundreds of marketing screenshots across device sizes.

For repeatable screenshot production, overlays work best as templates rather than one-off edits. Locking placement, opacity, and export size once prevents every marketing image or help-center visual from drifting stylistically over time.

Common mistakes

Using JPG for overlays with transparency. JPG does not support alpha channels. Any semi-transparent overlay will be flattened to a solid background color, destroying the blending effect. Use PNG or WebP instead.
Overlaying at the wrong resolution. Placing a low-resolution overlay on a high-resolution screenshot (or vice versa) produces visible scaling artifacts. Match the overlay resolution to the base image.
Forgetting to flatten before sharing. Sharing a project file with editable layers may allow recipients to remove or modify overlays. Export as a flattened PNG or JPG to lock the overlay in place.
Overloading with overlays. Stacking too many annotations, highlights, and labels on a single screenshot creates visual noise. Keep overlays focused — highlight one or two areas per image for maximum clarity.

Image Overlay