Overlay Image Tool

Tracking since Apr 23, 2026.

Changelog

• Jun 7, 2026
  description

  UI 개발 시 디자인 시안을 페이지 위에 겹쳐 놓고 디자인과 일치하는지 비교하고 확인할 수 있는 도구입니다.
  
  사용법 1 : 확장 프로그램을 클릭해서 popup 안의 upload를 사용하거나 미리보기 영역에 붙여넣기를 하고 Generate 버튼을 누르면 됩니다.
  
  사용법 2 : Enable Directly Paste: 이 옵션을 체크하면 클립보드의 이미지를 브라우저에 직접 붙여넣을 수 있습니다. 이 경우에는 이미지의 위치를 방향키 키보드로 이동할 수 있습니다.
  
  이후에 개발자 도구를 통해서 html element의 css를 수정합니다.
  
  Tip: Figma를 사용한다면 오브젝트를 선택하고 Ctrl + Shift + C를 사용하여 클립보드로 이미지를 복사한 다음, 브라우저에 Ctrl + V로 현재 탭에 이미지를 붙여 넣을 수 있습니다.
  
  
  
  Compare images by overlaying them on websites.
  A tool that allows you to overlay design images on a website to compare and check if it matches the design when creating a website.
  
  1. Enable Directly Paste: When this option is checked, you can directly paste an image from the clipboard into the current tab. It can be used with basic options, and once pasted, the image's position can be adjusted using the arrow keys on the keyboard.
  
  2. Choose File: You can select a downloaded image and overlay it on the current tab. Position and size can be adjusted using option settings.
  
  3. Without selecting an image, you can copy it to the clipboard and then paste it into the extension's popup window. Afterward, you can overlay it on the current tab.
  
  4. After adding an image, you can fine-tune its position using the arrow keys on the keyboard. By default, it moves by 1px, and you can combine it with the Shift or Ctrl key for more precise adjustments.
  
  Tip: You can copy an image to the clipboard from Figma using Ctrl + Shift + C, and then paste the image into the current tab by Ctrl + V

  # Overlay Image Tool
  
  A Chrome extension for UI developers — overlay a design mockup on a live page as a semi-transparent layer to compare layout accuracy.
  
  ---
  
  ## Overview
  
  Overlay your design draft on any page to compare with the actual UI.
  
  ---
  
  ## Features
  
  - **File upload or clipboard paste** — load an image via file picker, or paste from clipboard (`Ctrl+V`) inside the popup
  - **Enable Directly Paste** — toggle on to paste an image overlay onto the page directly with `Ctrl+V`, without opening the popup
  - **Position & size control** — set `background-position` and `background-size` via free-text input
  - **Opacity** — adjust overlay transparency
  - **Gray effect** — convert the overlay to grayscale to reduce visual noise
  - **Arrow key move** — enable keyboard nudging to fine-tune overlay position after applying
  - **Session memory** — last used image and all settings are restored automatically on next open
  - **One-click remove** — clear the overlay from the current page instantly
  
  ---
  
  ## Keyboard Shortcuts
  
  Arrow key move must be enabled in the popup options.
  
  | Key | Movement |
  |---|---|
  | `↑` `↓` `←` `→` | 1px |
  | `Shift` + arrow | 10px |
  | `Ctrl` / `⌘` + arrow | 100px |
  
  > Arrow key move is automatically disabled when focus is inside a text field, select box, or any editable element, to avoid conflicts with native browser behavior.
  
  ---
  
  ## Usage
  
  1. Click the **Overlay Image Tool** icon in the Chrome toolbar
  2. Select an image file, or paste one from clipboard inside the popup
  3. Adjust position, size, opacity, and options as needed
  4. Click **Generate** — the overlay appears on the current page
  5. Click **Remove** to clear the overlay
  
  ---
  
  
  ## License
  
  MIT

• Jun 7, 2026
  short_description

  Compare images by overlaying them on websites.

  Overlay your design draft on any page to compare with the actual UI.

• Jun 7, 2026
  host_permissions

  <all_urls>

  (empty)

Permissions & access

Permissions

activeTabscriptingstorage

Host access

None declared

Screenshots

Similar extensions

Alternatives to Overlay Image Tool, ranked by description similarity.

Yakkuracy

A Chrome extension built with Vite and React

2

★ 5.0

Overlayly - Pixel Perfect Design Comparison

Overlay design screenshots on websites for pixel-perfect development. Free and open source.

97

Figgly

Your design to dev bridge

7

Figgy

Figma 디자인을 브라우저 우측 대시보드에 오버레이하는 도구

—

Image Overlay Tool

Overlay images on any website with draggable positioning and opacity control

406

★ 5.0

Design Overlay Tool

Overlay design mockups on web pages for pixel-perfect implementation verification

32

★ 5.0

Pixelay for Figma

Compare your Figma designs with real websites.

5.0K

★ 4.2

Over.fig – Compare design to website in real time

Bridge the gap between design and code. Convert your Figma into a pixel-perfect semi-transparent overlay directly on your web page.

1.0K

★ 4.6