An image overlay in Google Earth is a flat picture—such as a custom map, an aerial photo, or a survey chart—pinned to the 3D globe at specific latitude and longitude coordinates, where it can be rotated to match a real-world bearing, stretched to cover an area measured in degrees of arc, and adjusted between 0% and 100% transparency to reveal the satellite imagery beneath. The same term, image overlay, also describes the simpler act of laying one picture on top of another in a browser: a base image with a second image placed over it at a chosen position, scale, and opacity, then exported as a single PNG. The two share the same vocabulary but solve different problems—Google Earth's overlay is geographic and tied to the curved surface of the globe, while a browser overlay is purely pixel-based and ideal for preparing watermarks, badges, frames, or reference graphics before they ever reach Google Earth. This guide covers both: the native Google Earth image overlay workflow, plus a private browser method that never uploads either source file.
Image Overlay in Google Earth at a Glance
Google Earth treats an image overlay as a flat rectangular layer rather than a 3D model. The overlay is anchored to a point on the globe, can be rotated to align with a coastline or boundary, and can be stretched to cover any chosen footprint. Outside Google Earth, a browser overlay has the same ingredients—a base image, an overlay image, a position, a scale, and an opacity—but everything is measured in pixels rather than degrees of arc. A Google Earth overlay is geographic, so the same graphic can sit at the correct location for anyone who opens the project. A browser overlay is purely visual, which makes it the right place to bake in a watermark, a logo, or a frame before the image is uploaded to Google Earth or used anywhere else.
Adding an Image Overlay in Google Earth
Google's own desktop tutorial describes the image overlay feature as a way to place a flat image on the globe and adjust its position, scale, and rotation until it lines up with the real world. The steps below walk through the desktop interface and the parallel workflow in the web version of Google Earth, where the same controls live inside the project toolbar.
- Open Google Earth on your computer, or visit earth.google.com in a modern browser, and load or create a project.
- Navigate to the area where the overlay should appear. Use the search box or pan and zoom until the location is centered on screen.
- Open the Add menu. On Google Earth Desktop this lives in the top toolbar and is labelled Image Overlay; on the web app it appears in the project toolbar with the same label.
- Choose the image file from your computer. PNG and JPG are both common choices; the file is loaded as a flat rectangular layer rather than a 3D model.
- Drag the overlay by its center handle to fine-tune latitude and longitude. Drag the green corner handles to resize the footprint, and use the rotation handle to align with a coastline, boundary, or compass bearing.
- Adjust transparency with the opacity slider until the overlay and the satellite imagery beneath it are both legible. Historic maps often read best somewhere between 50% and 70%.
- Save the project so the overlay stays attached to the place you chose. The overlay then appears for anyone opening the same project file in Google Earth.
For overlays that need a clean watermark, badge, or label baked into the corner of the image before it reaches Google Earth, the next sections show how to build that PNG locally in the browser without uploading either source file.
Preparing an Overlay Image in Your Browser
Many image overlays start as a base picture plus a small graphic—a company logo tucked into a corner, a frame outline around a survey map, a north-arrow badge, or a watermark text plate. Combining those two pieces in the browser, rather than in a full image editor, gives you a predictable PNG with the overlay already in the right spot and at the right transparency. Once the PNG is ready, it drops straight into the Google Earth image overlay step above.
The Image Overlay tool runs entirely in the current browser tab. Both inputs are decoded locally, combined on a canvas, and exported as PNG. No server receives either file, no account is required, and the temporary object URLs the browser creates are revoked as soon as a file is replaced or the tool is closed.
How to Use the Image Overlay Tool
- Open the Image Overlay page in your browser.
- Click the base slot and pick the image that defines the output canvas. JPG, PNG, and WebP are all accepted, up to 25 MiB per file.
- Click the overlay slot and pick the second image you want to place on top. The same format and size limits apply.
- Choose a position: top-left, top-right, bottom-left, bottom-right, or center. Each option uses a deterministic formula based on the base width, base height, and the scaled overlay dimensions.
- Set the overlay scale. The default of 100% draws the overlay at its own natural width and height. Values from 10% to 200% are supported, and both dimensions scale together so the overlay's aspect ratio is preserved.
- Set the opacity. Zero makes the overlay invisible while still producing a base-size PNG. One hundred keeps the overlay's own alpha unchanged. Anything in between multiplies the overlay's contribution by that fraction.
- Click the create button to generate the composition. A preview appears that matches the pixel dimensions of the base image even when it is shown smaller on the page.
- Inspect the preview. If something is off, change the position, scale, or opacity and run it again; the previous result is cleared automatically.
- Download the PNG. The downloaded file's width and height always equal the base image's natural dimensions.
How Position, Scale, and Opacity Work
Three controls shape every composition. Position determines where the overlay is anchored on the base canvas, scale sets the size of the overlay relative to its own natural pixels, and opacity controls how much of the overlay shows through. The coordinates below are computed from the base width and height together with the scaled overlay width and height, so each choice is reproducible rather than approximated.
| Position | Top-left x | Top-left y | Notes |
|---|---|---|---|
| Top left | 0 | 0 | Overlay begins at the base's origin |
| Top right | base width − scaled overlay width | 0 | Right edge meets the base's right edge |
| Bottom left | 0 | base height − scaled overlay height | Bottom edge meets the base's bottom edge |
| Bottom right | base width − scaled overlay width | base height − scaled overlay height | Both edges meet the base's far corners |
| Center | (base width − scaled overlay width) / 2 | (base height − scaled overlay height) / 2 | Half-pixel offsets keep math centered when sizes differ by an odd number of pixels |
Scale is applied to the overlay only. A 1000×600 overlay at 50% renders at 500×300. At 200% it renders at 2000×1200, which can extend beyond the base canvas; any pixels outside the base are clipped rather than resizing the base. Opacity multiplies the overlay's alpha by the selected percentage, so 50% on an opaque white overlay produces a 50% gray patch, while 50% on a translucent PNG keeps the existing transparency and softens it further.
File Limits, Formats, and Privacy
The tool accepts a deliberately narrow set of inputs to keep decoding reliable in the browser. Each rule applies independently to the base and the overlay, and a file that fails any rule is rejected with no partial output.
| Limit | Value | Why it matters |
|---|---|---|
| Supported formats | JPEG, PNG, WebP | GIF, SVG, and AVIF are out of scope |
| File size | Up to 25 MiB per file (26,214,400 bytes) | Oversized files are rejected before decoding |
| Decoded pixels | Up to 40,000,000 per image | Protects browser canvas memory after compression is unpacked |
| Edge length | Up to 20,000 px on either side | Prevents accidental billion-pixel canvases |
| Boundary values | Accepted at the limit; one byte or pixel over is rejected | No partial output on invalid input |
| Upload behavior | Files are decoded locally; ObjectURLs are revoked on replace or unmount | Neither source nor result is sent to a server |
Because nothing leaves the browser, you can prepare an image that you intend to upload to Google Earth—say, a watermark for a historic map overlay—without ever sending the working draft to a third-party service. For additional positioning scenarios using the same browser approach, the guide on overlaying a picture on a picture in your browser walks through further examples.
When to Use Each Approach
Use Google Earth's native image overlay when the picture is geographic in nature—a historical survey, a city plan, a scientific chart, or an aerial photo that should align with real coordinates and sit on the curved surface of the globe. Use the browser Image Overlay tool when the goal is purely graphical: stamping a logo into a corner of a map, baking a watermark into a reference graphic, framing a chart with a decorative border, or combining a texture with a base image before the final file is uploaded anywhere.
The two workflows combine well. A common pattern is to start in the browser, drop a clean watermark or north-arrow badge onto a map export, download the PNG, and then add the finished PNG as a Google Earth image overlay so the result is geographically anchored on the globe. Because the browser output keeps the base image's exact pixel dimensions, the file behaves predictably when Google Earth interprets it as a flat rectangular layer.
For technical background on how the renderer combines the two images, the MDN reference for CanvasRenderingContext2D drawImage documents the same draw call used to place the scaled overlay at the planned coordinates, and the entry on globalAlpha covers the opacity mechanism the tool relies on for non-100% transparency values.