替换网页图片

把新图片放进真实网页里预览

用本地文件或图片 URL 替换网页上的现有图片,立即检查尺寸、裁切和整体观感。适合广告图、商品图、头像和首屏视觉的快速确认。

支持 Chrome 和 Microsoft Edge · 免费开始 · 无需注册

替换网页图片

实现前先看真实效果

01

上传或粘贴链接

既可以选择电脑中的图片,也可以使用已经上线的图片 URL。

02

保留原有布局

在网页现有尺寸、间距和上下文中观察新图片。

03

只做本地预览

替换仅在浏览器中显示,不会改动网站源文件。

最新功能指南

导入图片、选择适配方式,再直接在网页上调整大小

“更改图片”不只是一次简单替换。你可以导入本地文件或图片 URL,决定替换后是否保持原布局,并通过手柄直接调整已经替换的图片。

Henri Z. 产品指南

本地文件或图片 URL

根据素材来源选择导入方式

既可以上传电脑里的图片,也可以粘贴以 http 或 https 开头的图片 URL。保存前,Edit Page 会先确认该 URL 能够作为图片加载。

  • 加载失败的 URL 会被拒绝,不会在预览中留下破损图片。
  • 图片不存在、内容不是图片、请求超时或来源网站限制外链访问时,都可能验证失败。
  • 每次导入计一次;同一张已导入图片随后替换多个元素不会重复计数。
Edit Page 在真实网页中替换图片,Popup 的更改图片模式保持开启
在真实网页中开启更改图片
替换图片后

选择保持原框,或让页面跟随新图尺寸

“设置 → 更改图片”决定每次替换的默认行为。快速制作版式预览时可保留原有图片框;需要观察新素材真实尺寸对布局的影响时,则让页面使用新图自己的尺寸。

  • “保持原尺寸并裁剪填满”保留原盒子,并按 cover 方式填充和裁剪。
  • “使用新图自己的尺寸”采用替换图片的自身尺寸,页面可能因此重新排版。
  • 同一套替换流程适用于普通图片和能够选中的背景图。
Edit Page 设置中的保持原尺寸并裁剪填满与使用新图自己的尺寸选项
两种替换尺寸设置
替换后调整大小

拖动八个手柄,同时保持干净的撤回历史

图片成功替换后,目标元素立即获得四个角点和四条边上的调整大小手柄。页面滚动或元素尺寸变化时,覆盖层会继续贴合。

  • 拖动角点默认保持宽高比;拖动边线默认只改变一个方向。
  • 按住 Alt 可反转当前规则;拖动过程中按 Esc 会取消并恢复开始时的尺寸。
  • 一次完成的拖拽只生成一步撤回;取消或尺寸未变化的拖拽不会进入历史。
网页中已替换的图片被选中,四个角点和四条边显示 Edit Page 调整大小手柄
替换图片后的八个调整大小手柄
隐私优先

所有编辑都在当前浏览器标签页中完成,不上传网页内容。刷新页面即可恢复原状。

使用方法

如何替换网页图片

  1. 1
    步骤 1

    选择“更改图片”

    在目标网页打开 Edit Page,并从控制面板选择图片工具。

  2. 2
    步骤 2

    选择目标和新图片

    点击网页图片,然后上传本地文件或粘贴图片直链。

  3. 3
    步骤 3

    对比最终效果

    检查构图和裁切,需要时撤销;刷新页面即可全部恢复。

实际场景

常见图片预览场景

营销素材确认

把新 Banner 或活动视觉直接放入落地页中审核。

电商陈列

对比不同商品图,并检查裁切在商品列表中的表现。

作品集与方案演示

无需重建页面,也能制作可信的前后对比效果。

操作建议

图片替换提示

  • 尽量选择与原图宽高比接近的图片,预览效果会更真实。
  • 部分视觉是 CSS 背景而非普通图片元素,可能无法直接选中。
  • 浏览器受保护页面不允许插件运行。
FAQ

替换网页图片常见问题

可以上传电脑里的图片吗?

可以,也可以粘贴已经在线的图片 URL。

网站管理员会看到我的替换吗?

不会。预览只存在于当前标签页,不会更新网站服务器。

为什么新图片被裁切了?

“保持原尺寸并裁剪填满”会保留原有盒子并用新图填满。若希望页面采用新图自己的尺寸,请在设置中选择“使用新图自己的尺寸”。

替换后可以直接调整图片大小吗?

可以。替换后的图片会出现八个调整大小手柄。拖动角点默认保持宽高比,拖动边线默认只改变一个方向,按住 Alt 可反转当前规则。

调整大小会再次消耗免费次数吗?

不会。免费额度在导入本地图片或图片 URL 时计数;调整大小、撤回和重做都不消耗额度。

Edit Page

准备好直接修改网页了吗?

安装插件,在任意普通网页上开始编辑。

安装 Edit Page