The Image Overlay browser tool combines two images into a single PNG by drawing a chosen overlay on top of a base image at one of five fixed positions, with an explicit scale percentage and an opacity value, all running locally in your browser so neither source file is uploaded to a server.
Cities: Skylines players regularly need to combine two images into one. The use cases are familiar: drop a transparent channel logo or watermark onto a city screenshot before sharing it, layer a heightmap reference over an in-game map view for a tutorial, mark a thumbnail with a corner badge, or preview a UI mockup over a base terrain capture for a modding guide. In every case the underlying task is the same: place one picture on top of another at a specific position, scale, and transparency. Cities: Skylines itself does not ship with a built-in image overlay editor for screenshots, and most heavyweight photo apps either require uploads to a remote server or expect you to learn a multi-layer workflow just to stack two pictures. The Image Overlay tool closes that gap with a focused, predictable workflow that runs entirely inside your browser tab, so you can produce a combined PNG without ever sending a screenshot of your city to a third-party service.
Why Cities: Skylines Players Reach for an Image Overlay
Cities: Skylines is a sandbox city-building game, and a lot of the content around it on YouTube, Reddit, Discord, and modding forums depends on combining images. A common need is overlaying a transparent channel logo or watermark on a city capture before publishing it, because raw screenshots rarely carry any identifying mark of their own. Another frequent task is overlaying a planning diagram, heightmap reference, or zoning plan on top of an in-game screenshot for a tutorial or a community guide. Modders sometimes preview an overlay image (a custom asset silhouette, a UI mockup, a building footprint) over a base terrain capture to compare layouts without opening a full design program. Across all of those cases the workflow reduces to: pick a base image, pick an overlay image, choose a position, decide how big the overlay should be, decide how transparent it should be, and export one PNG.
A browser-based image overlay fits this workflow especially well because Cities: Skylines captures are already saved as JPG or PNG on your computer. You do not need to send a multi-megabyte city screenshot to a cloud editor, wait for a download link, or read a privacy policy on a hobby-game screenshot. The Image Overlay tool keeps the full base resolution intact, which matters for sharp thumbnails and high-DPI displays, and it gives you five fixed positions instead of a freeform drag tool that can be tricky to align by eye. Because the output always matches the base image's exact width and height, the resulting PNG drops straight into the same thumbnail slot or social-media layout as your original screenshot.
What the Image Overlay Tool Actually Does
The Image Overlay tool accepts two static images, a base and an overlay, and produces one PNG that contains both. The base image defines the output canvas, so a 1920x1080 Cities: Skylines screenshot produces a 1920x1080 PNG with no hidden resizing, no automatic fit-to-screen, and no silent export-limit cropping. The overlay is drawn on top of the base at one of five positions: top left, top right, bottom left, bottom right, or center. The position is mathematical, not eyeballed, so corner placements line up exactly with the base edges and center placements remain mathematically centered even when the dimensions are odd.
You control two things about the overlay: its scale, expressed as a percentage of its own natural dimensions, and its opacity, expressed as a percentage. Scale can run from 10% up to 200%, which covers everything from a tiny corner badge to an overlay that is twice its natural size. Opacity can run from 0% (fully transparent, but still rendered) up to 100% (the overlay's own alpha, unchanged). Every output is a PNG, the format that preserves transparency where neither image contributes a color. Under the hood the renderer clears the canvas, draws the base at full size with alpha 1, saves the drawing state, applies the chosen overlay alpha, draws the scaled overlay at the planned coordinates, and restores the state, which mirrors the behavior documented in the MDN drawImage reference.
Layer a Second Image Onto Your Screenshot
This is the exact workflow to follow when you want to combine a Cities: Skylines screenshot with a second image, such as a logo, watermark, badge, or reference overlay.
- Pick the base image. This is your Cities: Skylines screenshot, map view, or terrain capture. It must be a JPG, PNG, or WebP file at or under 25 MiB (26,214,400 bytes), with edges at or under 20,000 pixels and a total pixel budget at or under 40,000,000 pixels after the browser decodes it.
- Pick the overlay image. This is the logo, watermark graphic, badge, or reference image you want to place on top. The same format and size rules apply, and each input is checked independently.
- Choose a position. Pick center, top left, top right, bottom left, or bottom right. Top left starts the overlay at x=0 and y=0. Top right subtracts the scaled overlay width from the base width. Bottom left subtracts the scaled overlay height from the base height. Bottom right does both. Center subtracts the scaled dimensions from the corresponding base dimensions and divides each difference by two.
- Set the overlay scale. Enter a percentage from 10% to 200%. A value of 100% draws the overlay at its own natural width and height. 50% draws half of each dimension. 200% doubles each dimension. The aspect ratio of the overlay is preserved because both dimensions use the same factor.
- Set the opacity. Enter a percentage from 0% to 100%. Zero makes the overlay fully transparent while still producing a base-size PNG. One hundred uses the overlay's own alpha unchanged. Intermediate values multiply the overlay contribution by that global alpha, and any transparent pixels already present in a PNG or WebP remain transparent.
- Create the composition. Click the action to build the PNG. The tool clears the canvas, draws the base at full size, saves the drawing state, applies the chosen overlay alpha, draws the scaled overlay at the planned coordinates, and restores the state.
- Inspect the preview and download the PNG. The preview on the page is sized for the page layout, but the actual download always uses the base image's natural width and height. Save the PNG and check it at full size to confirm alignment.
If you want to make changes - swap a file, change the position, change the scale, or change the opacity - selecting a new file or editing a control revokes the previous result immediately, so you cannot accidentally download a stale PNG.
Understanding Position, Scale, and Opacity
The position choice is deterministic, which makes it easy to plan a result before you click. The table below shows the planned coordinates for a 1920x1080 base and a 400x100 overlay at 100% scale. The values are exactly what the renderer uses when it draws the overlay.
| Position | Planned x | Planned y | Notes |
|---|---|---|---|
| Top left | 0 | 0 | Overlay sits flush with the top-left corner. |
| Top right | 1920 - 400 = 1520 | 0 | Overlay flush with the top-right corner. |
| Bottom left | 0 | 1080 - 100 = 980 | Overlay flush with the bottom-left corner. |
| Bottom right | 1520 | 980 | Overlay flush with the bottom-right corner. |
| Center | (1920 - 400) / 2 = 760 | (1080 - 100) / 2 = 490 | Mathematically centered, half-pixel offsets allowed. |
If your overlay at the chosen scale is larger than the base in either dimension, the planned coordinates can go negative or exceed the base width, and the renderer clips the overlay at the base canvas rather than resizing the base to fit. That is intentional behavior, not a hidden resize. If important content falls outside the base, lower the scale or crop the overlay source first.
File Limits, Formats, and Output Details
Cities: Skylines screenshots can be quite large, especially at 4K, so it is worth knowing exactly what the tool accepts. Both inputs must be JPG, PNG, or WebP. GIF, SVG, AVIF, and other formats are out of scope. Each compressed file can be up to 25 MiB. After the browser decodes the image, the tool independently checks that neither edge exceeds 20,000 pixels and that the total pixel count stays at or under 40,000,000 pixels. These decoded limits protect browser canvas memory, since a small compressed file can expand into a very large pixel buffer.
| Limit | Boundary value | Behavior at the boundary |
|---|---|---|
| Accepted MIME types | image/jpeg, image/png, image/webp | Other formats are rejected with an explicit error. |
| Compressed file size | 25 MiB (26,214,400 bytes) | Equal to the cap is accepted; one byte over is rejected. |
| Decoded edge length | 20,000 pixels per side | Equal is accepted; one pixel over is rejected. |
| Decoded pixel budget | 40,000,000 pixels per image | Equal is accepted; one pixel over is rejected. |
| Overlay scale | 10% to 200% | Both edges of the range are accepted. |
| Overlay opacity | 0% to 100% | Both edges of the range are accepted. |
| Output format | PNG | Transparency is preserved where neither source contributes color. |
The output PNG uses the base image's exact width and height, which is important for Cities: Skylines captures where you want the result to drop into the same thumbnail slot or social-media layout as the original screenshot. EXIF metadata, camera fields, animation, and original compression are not promised to survive re-encoding. JPEG inputs have no transparency, so transparent regions in the output come only from the base or overlay PNG/WebP. The browser's built-in interpolation is used when scale is not 100%, so a heavily reduced or enlarged overlay can soften slightly at the edges - inspect the downloaded PNG at full size if pixel-perfect edges matter.
Worked Example: Adding a Watermark to a City Screenshot
Suppose you have a 1920x1080 Cities: Skylines screenshot (the base) and a 600x120 transparent PNG logo (the overlay) you want to drop into the bottom-right corner at half opacity. Here is how the numbers work out step by step.
You choose Bottom right. With scale at 100% and the base at 1920x1080, the overlay's planned coordinates are x = 1920 - 600 = 1320 and y = 1080 - 120 = 960. The renderer draws the overlay at (1320, 960), exactly flush with the bottom-right corner of the base.
If you decide the logo is too big and switch the scale to 50%, both overlay dimensions are halved because the tool applies the same factor to width and height. The new planned dimensions are 600 x 50 / 100 = 300 pixels wide and 120 x 50 / 100 = 60 pixels tall. The new planned coordinates become x = 1920 - 300 = 1620 and y = 1080 - 60 = 1020. The logo is now a small badge in the bottom-right corner, and its aspect ratio of 5:1 is preserved as 300:60.
Set opacity to 50%. The renderer multiplies the overlay's alpha contribution by 0.5 globally, so the logo is visible through the city screenshot but the buildings behind it still show clearly. Transparent pixels already present in the PNG logo stay transparent, which keeps the surrounding sky or terrain crisp. Create the composition, download the PNG, and you have a 1920x1080 PNG with a small semi-transparent watermark ready for YouTube, Reddit, or Discord.
If you later decide the watermark should sit in the top-right instead, simply pick Top right. The renderer recomputes the coordinates: x = 1920 - 300 = 1620, y = 0. The same scaled 300x60 logo now sits flush with the top-right corner. You do not need to re-edit the overlay file.
What the Tool Does Not Offer
The Image Overlay tool is intentionally limited to one predictable overlay, which is why the math above stays simple. It does not include rotation, free dragging, arbitrary x/y coordinates, margins or padding around the overlay, blend modes (multiply, screen, overlay, and so on), masks, background removal, repeated tiling, or multi-layer editing. There is only one overlay on top of one base, drawn at one of five positions.
For most Cities: Skylines capture tasks - a corner logo, a channel watermark, a small reference badge, a centered thumbnail label, or a single transparency texture - this scope is enough. If you need a different angle, a non-rectangular mask, or several stacked overlays, edit the overlay source first or use a full design tool. The Image Overlay tool is meant to be the predictable, local-to-your-browser step for the simple case.
You can pair the overlay with other browser tools in the same workflow. After exporting the combined PNG, you can crop it, resize it, add a border, or convert it to JPG for a smaller attachment, all without uploading anything. To compress the final PNG before uploading it to a forum, a focused image compressor can shrink the file size while keeping the dimensions you just exported.
Tips for a Clean Result on the First Try
A few habits help Cities: Skylines screenshots come out clean on the first attempt.
First, prepare the overlay as a transparent PNG or WebP so the part outside the logo is already see-through. The tool respects transparent pixels in the overlay, which keeps the city screenshot visible everywhere except where the logo actually lives.
Second, calculate the scaled overlay size before exporting. The formula is scaled width = overlay natural width x scale / 100. With a 600-pixel-wide logo at 50% scale, the scaled width is 300 pixels. If that is the exact width you want in the final image, you have already done the math the tool will do.
Third, check the downloaded PNG at full size, not at the page preview size. The preview is sized for the page layout and does not change the pixel dimensions used for rendering or download. A 1920x1080 base produces a 1920x1080 PNG even when the preview on the page looks like a 600-pixel thumbnail.
Fourth, watch the limits. A 4K Cities: Skylines capture is well inside the 20,000-pixel edge cap and the 40,000,000-pixel budget, but an 8K modding screenshot can approach those limits. Resize the capture first if it pushes past the boundary, then overlay as usual.
Finally, keep both originals. The PNG export does not promise to preserve EXIF metadata, animation, or original compression, so if you need to revise the overlay later you can re-run the same step against the same base file.
For a quick start, open the Image Overlay tool, choose your Cities: Skylines screenshot as the base, choose your logo or reference as the overlay, pick a position, set a scale, set an opacity, and download the PNG. Everything stays in your current browser tab throughout the workflow.