离线 · 无上传 · 浏览器本地完成Offline · no uploads · runs in the browser
PNG 转 HTML——原始字节内嵌，透明与像素不丢PNG to HTML offline — the original bytes, embedded
需要把一张图交给“只收网页”的地方——内网文章、单文件归档、图文一起存的笔记——最稳的做法是不碰像素。这条路径用 FileReader 把上传的 PNG 字节直接读成 data URI，写进一个 `<img src>`：没有 canvas、没有重编码，透明通道与原始像素一个字节都不变。`alt` 与 `title` 取源文件名的主干（去扩展名，做 HTML 转义），页面自带居中版式与 `max-width: 100%`，窄屏上按比例缩显，但内嵌的仍是原始分辨率。When an image has to go somewhere that only accepts a web page — an intranet article, a single-file archive, a note that keeps its picture beside its text — the safest move is not to touch the pixels. This route reads the uploaded PNG’s bytes into a data URI with FileReader and writes them into one `<img src>`: no canvas, no re-encode, with alpha and every original pixel unchanged. `alt` and `title` come from the source file name with its extension dropped (HTML-escaped), and the page centres the image with `max-width: 100%`, so it scales down on narrow screens while the embedded data keeps its full resolution.
这条链路怎么走How the route runs
PNGPNG HTMLHTML
共 1 步，由扩展的路径搜索自动选出，中间产物不落盘。1 step, chosen by the extension's own path search; intermediate results never touch the disk.
会保留什么What carries over
- 原始字节：不做解码与重编码，透明、像素与 PNG 自带的元数据都在The original bytes: no decode or re-encode, so alpha, pixels and the PNG’s own metadata all remain
- `alt` / `title` 取源文件名的主干（去扩展名）并做转义，读屏与悬停都有说明`alt` and `title` come from the source file name, extension dropped, and are escaped, giving both screen readers and hover a label
- 单文件自包含：图片以 data URI 内嵌，没有外部引用，断网也能打开Self-contained in one file: the image is a data URI, with no external reference, and opens offline
- 页面在窄屏上按比例缩显，不改变内嵌的分辨率The page scales the image down on narrow screens without changing the embedded resolution
- 一批最多 200 个文件、单个 100 MBUp to 200 files per batch at 100 MB each
如实说明的限制What it does not do
- 体积会变大：base64 让图片部分约为原字节的 4/3，再加一层 HTML 包装；这是“单文件自包含”的代价The file grows: base64 makes the image portion about 4/3 of the original bytes, plus the HTML wrapper — the cost of a self-contained file
- 没有重编码也就没有优化：无法借这次转换降分辨率、换格式或压体积；需要那些请走 PNG → JPEG / WebPNo re-encode means no optimisation: this route cannot downscale, change format or shrink the file; use PNG → JPEG or WebP for that
- `alt` 只有文件名，不是对画面内容的描述；要让读屏用户知道图里是什么，请下载后自行改写`alt` is only the file name, not a description of the picture; rewrite it afterwards if screen-reader users need to know what is shown
- 邮件里不保显示：网页端邮件客户端（Gmail 便是）会剥掉 `data:` 图片，能不能显示由收件端决定——要进邮件正文请用外链图片或邮件自己的附件No guarantee in email: webmail clients — Gmail among them — strip `data:` images and the recipient decides, so use an external picture or the mail attachment itself
- PNG 之外的源（JPEG / WebP / BMP / GIF）走同一条包装路径，但这一页只描述 PNG 的行为Sources other than PNG (JPEG, WebP, BMP, GIF) take the same wrapping path, but this page describes the PNG behaviour only
实操提示Working with it
- 适合单文件交付、离线归档，以及把图塞进不允许外链的富文本编辑器Good for single-file delivery, offline archiving and rich-text editors that refuse external links
- 需要更小的体积或 JPEG / WebP 格式，请走图片转换；需要可搜索文字，得从有文字层的源出发For a smaller file or JPEG / WebP, take an image conversion; for searchable text, start from a source with a text layer
常见问题Questions people actually ask
图片会被压缩吗？Is the image compressed?
不会。这条路径直接内嵌原始字节，不经过 canvas；体积变大是因为 base64 编码约 4/3 的膨胀与 HTML 包装，不是因为重新压缩。No. This route embeds the original bytes without touching a canvas; the larger file comes from base64’s roughly 4/3 expansion plus the HTML wrapper, not from re-compression.
透明背景还在吗？Is the transparent background still there?
在。没有解码再编码这一步，alpha 通道与原始 PNG 完全一致；页面样式也不会给它加底色。Yes. There is no decode-then-encode step, so the alpha channel matches the original PNG exactly, and the page styling adds no background colour.
能把原图从 HTML 里取回来吗？Can the original image be recovered from the HTML?
能。`<img src>` 里的 data URI 就是原始 PNG 字节的 base64；把它解码出来与上传的文件逐字节相同。Yes. The data URI in `<img src>` is the base64 of the original PNG bytes; decoding it yields a file byte-identical to the one uploaded.
不需要账号，也不需要联网：装好扩展后点图标，在新标签页里打开工作台，文件从磁盘直接选。No account and no network: install the extension, click its icon, and the workbench opens in a new tab reading straight off your disk.
从 Chrome 应用商店安装Install from the Chrome Web Store 安装步骤Install steps GitHub 源码Source on GitHub