离线 · 无上传 · 浏览器本地完成Offline · no uploads · runs in the browser
WebP 转 Markdown——离线、一行内联、不减帧WebP to Markdown offline — one inline tag, no frame loss
两步:`webp>html` 把文件的原始字节编成 data URI 放进一个 `<img>`(`alt` 与 `title` 都是文件名主干,去扩展名、无名时 `converted`,并做属性转义),`html>md` 再用 Turndown 序列化。实测产物是**一行图片语法**:那张 `<img>` 是页面 `body` 里唯一的元素,样式表在 `<head>`、序列化只取 `body`,所以 CSS 不会漏进 `.md`。这一路的价值在**不做减帧这一步**——动图 WebP 的每一帧与 alpha 都在负载里;反过来说,WebP→PNG / JPG 会只剩一帧,而本扩展**当前的帧检查只覆盖 GIF**(动图 WebP 的 `VP8X` ANIM 位不在量测范围),所以那一趟丢了多少动画没人报数,这条限制写在页面上而不是藏起来。两个「由别人决定」也要说明白:播不播、循环几遍由打开这份 `.md` 的阅读器决定;`data:` 图片能不能显示同样由收件端决定(网页端邮件客户端与一些托管站会剥掉它),那种场合请用外链图片。体积按每三字节四字符走,整段负载挤在同一行,这是内联换来的代价——好处是拷走单个 `.md` 就带着图。全程只有 storage 权限,不联网。Two steps: `webp>html` encodes the file’s raw bytes into a data URI inside one `<img>` (`alt` and `title` both carry the basename of your file, extension dropped, `converted` when there is no usable name, escaped for attribute position), and `html>md` then serialises it with Turndown. Measured, the artifact is **one line of image syntax**: that `<img>` is the only element in the page’s body, and the stylesheet sits in `<head>` while the serialisation reads only the body, so no CSS leaks in. The value here is the absence of a frame-reduction step — every frame of an animated WebP and its alpha are inside the payload. Conversely, WebP to PNG or JPG keeps one frame, and this extension’s frame check **currently covers GIF only** (animated WebP’s `VP8X` ANIM flag is outside what it measures), so nobody reports how much animation that trip cost; that limit is stated on the page rather than hidden. Two things are other people’s decisions: playback and looping belong to whichever reader opens the `.md`, and whether a `data:` picture displays at all belongs to the recipient — webmail clients and some hosting sites strip it, so use an external reference there. The size runs at four characters per three bytes and the whole payload sits on one line; that is the cost of inlining, and the reason a single copied `.md` carries the picture with it. All of it on the storage permission, with no network at all.
这条链路怎么走How the route runs
WebPWebP HTMLHTML MarkdownMarkdown
共 2 步,由扩展的路径搜索自动选出,中间产物不落盘。2 steps, chosen by the extension's own path search; intermediate results never touch the disk.
会保留什么What carries over
- 不减帧、不重编码:动图 WebP 的每一帧与 alpha 都在 base64 负载里No frame reduction and no re-encode: every frame of an animated WebP plus its alpha live in the base64 payload
- 自包含的一行图片语法:拷走单个 `.md` 就带着图,不必带附件目录One self-contained image tag: copying a single `.md` carries the picture with it, no attachments folder needed
- `alt` 与 `title` 带你的文件名主干,可继续编辑成有意义的描述`alt` and `title` carry your file’s basename, ready for you to edit into something meaningful
- 样式表不会漏进产物:那一步只取文档 `body`,head 里的 CSS 不参与No stylesheet leaks: the serialisation reads the document body only, leaving the head’s CSS out
- 一批最多 200 个文件、单个 100 MB,与其他路线共用同一道闸门Up to 200 files per batch and 100 MB each — the same gate every other route shares
如实说明的限制What it does not do
- 不保证会动,也不保证会显示:播放由阅读器决定,`data:` 图片能否出现由收件端决定Neither playback nor display is promised: the reader decides whether it animates, the recipient decides whether a `data:` picture appears
- 帧丢失的检查目前只覆盖 GIF,而且提示是一句固定的「只保留第一帧」,不报帧数:动图 WebP 走需要重编码的路线时连这句都没有Frame-loss disclosure covers GIF only today, so a route that re-encodes will not count the animation for you
- 体积只增不减,而且整段 base64 挤在同一行——想要可 diff 的形状请改外链图片The file only grows and the whole payload sits on one line — use an external reference if you want the diffable shape
- 不做 OCR:图里印着的文字不会变成 Markdown 文字No OCR: text printed in the picture never becomes Markdown text
- 一行一文件:只包一张图,多张请分别转换或自己写外链语法One picture per file: convert separately, or write an external reference for several
实操提示Working with it
- 只想放进网页:WebP→HTML 就是这条的第一步,产物是 HTML 而不是 `.md`To put it in a web page: WebP to HTML is this route’s first step, and the artifact is HTML rather than `.md`
- 要单帧位图:WebP→PNG / JPG 只剩一帧,且动画丢失目前不数给你看For a single-frame bitmap: WebP to PNG or JPG keeps one frame, and since the frame check covers GIF only, nothing at all is said about a WebP animation
- 要固定像素尺寸:图片转图片那几页才有最长边与质量开关For a fixed pixel size: the image-to-image pages are where the longest-edge and quality controls live
常见问题Questions people actually ask
动图 WebP 进 Markdown 还能播吗?Can an animated WebP still play inside Markdown?
数据侧没有被删减——这一路不取首帧、不重编码,每一帧都在负载里。但显示与播放是阅读器的事:有的会动,有的只画第一帧,有的干脆不显示 `data:` 图片。本页只承诺前者(字节完整),后者一律标成由收件端决定。Nothing is subtracted on the data side: no first-frame grab, no re-encode, every frame in the payload. Display and playback, though, are the reader’s business — some animate, some draw only the first frame, and some refuse a `data:` picture outright. This page promises the first part only, and marks the rest as the recipient’s call.
为什么不直接外链图片文件?Why not just reference the image file instead?
两种形状服务两个目的:外链让 `.md` 保持小、可 diff、能被版本控制友好阅读,但图必须另存且跟着走;内联让单个 `.md` 自包含、拷走就带图,代价是体积按 base64 上浮、审阅时那一行极长。要发给只收纯文本的地方(工单、搜索索引)时外链更稳。The two shapes serve two goals: an external reference keeps the `.md` small, diffable and pleasant to read under version control, but the picture must live somewhere and travel with it; inlining makes a single `.md` self-contained, at the cost of base64 growth and one very long line in review. For places that take plain text only — a ticket, a search index — the external form is the safer one.
产物长什么样,能给个例子吗?What does the artifact look like — an example?
一行:``。`alt` 与 `title` 都来自你的文件名(去掉扩展名;没有可用名字时是 `converted`),中间是整份文件的 base64 负载。实测就这一行——上一步的 `body` 里只有那张 `<img>`,没有别的正文会被序列化下来。One line: ``. `alt` and `title` both come from your file name (extension dropped; `converted` when there is no usable name), and between them sits the file’s full base64 payload. Measured, that single line is the artifact — the previous step’s body holds nothing but that `<img>`, so no other prose is left to serialise.
不需要账号,也不需要联网:装好扩展后点图标,在新标签页里打开工作台,文件从磁盘直接选。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