OC
一张 JPEG 也能像动画一样变化:有人利用了浏览器“边下载边重画”的老机制
科技 · 2026-07-19 · 开发 / 图像技术 / 趣闻 · 阅读 18

一张 JPEG 也能像动画一样变化:有人利用了浏览器“边下载边重画”的老机制

林岚|OC 开发者生态编辑

林岚|OC 开发者生态编辑

开发者 Maurycy 在文章 Regressive JPEGs 中展示了一种非常规实验:把多张同尺寸图片的 JPEG 扫描数据拼进同一个文件,过滤重复的文件头与结束标记,再通过慢速网络发送。部分解码器会把后来的扫描继续应用到已经显示的图像上,于是浏览器里的同一个 .jpg 会依次变成不同画面。

一句话结论: 这不是 JPEG 突然支持了正式视频,而是利用渐进式解码允许后续扫描补充甚至覆盖频率数据,让“图片逐渐变清晰”变成了“图片逐渐变成另一张”。

普通 baseline JPEG 往往等到足够数据后从上到下显示。progressive JPEG 会把图像分成多个 scan:第一轮只传最重要的低频信息,让用户先看见模糊全图;后续再增加亮度、颜色和高频细节,最终收敛到完整图片。

JPEG 并不是逐像素保存颜色。它把图像转换到 YCbCr,再把小块内容表示成离散余弦变换系数。低频决定大致亮暗和轮廓,高频补充边缘与纹理。渐进扫描可以指定本轮包含哪些颜色通道、哪些 DCT 频段和哪一位精度。

Maurycy 发现,既然后续 scan 能继续写解码状态,就可以把另一张同尺寸图片的扫描接在后面。网络足够慢时,浏览器每收到一批数据便重新绘制,用户看到的就不再只是清晰度变化,而是多个画面依次出现。

渐进式JPEG从DC低频预览到后续扫描覆盖为不同画面的结构

为什么只有慢慢加载时才能看见

文件里没有帧率、时间戳和播放控制。画面变化速度完全取决于服务器发送速度、网络缓冲和解码器何时刷新。文件下载完成后,它通常只剩最后状态,看起来还是一张静态图片。

这也是它和 GIF、APNG、WebP 动画或视频格式的根本区别。正式动画格式知道每帧持续多久、是否循环,也能随机访问和稳定解码;这个 JPEG 实验把网络传输过程本身当作时间轴。

多数解码器还会限制 scan 数量,以防止恶意文件消耗过多 CPU 或制造类似压缩炸弹的问题。作者最初拼接多幅完整渐进 JPEG 时,很快撞上限制,因此继续尝试让每个画面只使用最少扫描。渐进模式中 DC 与 AC 数据不能在同一扫描里随意混放,这又限制了画质和帧数。

它能用来绕过图片审核吗

理论上,一些只解码首帧或最终状态的系统可能错过传输中出现的中间画面,但实际利用取决于具体解码器、缓存和扫描限制。不能仅凭演示断言主流平台审核已经可以被普遍绕过。

对安全工程更实际的提醒是:文件扩展名和最终截图不足以描述一个媒体文件的所有状态。上传服务应使用成熟解码库完整解析输入,限制尺寸、扫描数与解码资源,并重新编码用户图片,而不是原样转发任意扫描结构。

重新编码通常会把异常 JPEG 归一化成平台自己的 baseline 或 progressive 结构,从而消除拼接扫描。不过,解码本身仍要在资源受限环境中完成,避免格式解析漏洞和拒绝服务。

为什么这种小实验值得看

现代开发者经常把文件格式当作黑箱:浏览器能显示就行。这个实验提醒我们,几十年前的格式包含丰富状态机,很多看似固定的对象其实是逐步计算出来的。渐进式 JPEG 原本是为拨号网络改善体验,现在被重新组合成一种近似动画的视觉效果。

它大概不会替代任何视频格式,却非常适合作为协议设计课程:兼容性允许的行为,未必等同于产品设计者当初希望用户拿它做的行为。

关键事实

  • 实验把同尺寸图片的扫描数据拼入一个 JPEG,并依赖渐进解码刷新画面。
  • 文件没有动画时间信息,播放速度由网络传输和解码器决定。
  • 多数解码器限制扫描数量,因此目前很难形成长而稳定的动画。
  • 该技术是格式实验,不等于 JPEG 标准新增动画功能,也不是成熟视频方案。

OC 判断

这项实验的新闻价值不在“JPEG 打败 GIF”,而在于它把一个熟悉格式的隐藏状态暴露出来。对普通开发者是有趣的编码课,对平台工程师则是提醒:任何允许增量解释的格式,都要考虑中间状态、资源上限和重新编码边界。

为什么重要

  • 对开发者: 媒体格式是状态机,不能只检查扩展名或最终渲染结果。
  • 对平台: 完整解码、资源限制和重新编码比依赖客户端行为更可靠。
  • 对普通用户: 这类文件的变化依赖加载过程,下载后看到的通常只会是最后一幅图。

参考来源

相关阅读

基于标题、摘要和正文内容自动匹配。

更多科技

评论

围绕这篇文章补充信息、提出问题或分享观察。

0
暂无评论。

发表评论

继续看看 OC 用户围绕这个话题说了什么、做了什么。

相关帖子

更多

你们的Codex额度提前耗完了没?戒断反应如何?

<p>我在第三天就消耗了只剩1%,忍了一天,然后今天干脆用这最后的1%,开着5.6 Sol 极高 强推我一个提示词笔记本应用的功能落地。最终用时3小时,居然还是跑完了。但是现在还是出现一些戒断反应,感觉啥也做不了,就无精打采的,困。</p> <p>我做了一个Prompt Notebook,专门用来收藏或者记录自己手搓的生图提示词。带Chrome一键收藏插件。支持AI优化提示词。支持提示词中提取常用字段作为提示词百科词汇。也自带生图功能用来测提示词。但是要搭配Cloudflare R2+Worker的图床。</p> <p>今天主要是做一个AI模特的资产库。将常用的AI模特固定下来,进行身份设定,以及模特的一些角色定妆图。之后生图可以直接调用AI模特自动作为垫图。</p> <p>这是AI模特资产库的界面: <img src="/upload/thread/202608/42b5f73e-938f-45de-b74e-da69da9d72a8.webp" alt="1bb0d28b-c7dd-4327-bafa-26b60323cbed" /> 这是主界面的提示词瀑布流,支持关键词或标签搜索: <img src="/upload/thread/202608/3e15b6e7-345f-48b4-aeff-1bbd89afe9d3.webp" alt="ab998e2f-9ccc-4173-832f-223aa6c6fa81" /> 这是提示词笔记的预览界面,可以复制提示词,分享提示词,点击分享还有分享短链:(https://prompt.jintao.co.uk/share/20260806LfsmY) <img src="/upload/thread/202608/bab31972-0468-4582-b873-6309233254a6.webp" alt="20260806-201213" /> 可惜现在没额度了,我又不想换模型折腾。现在还有些界面细节和小功能需要落地完善,可能还要虫子要抓。弄好了,打算放GitHub开源。</p> <p>有朋友想试试的么?</p>

shynloc 2 4

做 AI 语音产品时,授权、撤回和审计日志应该怎么落地?

<p>最近看到越来越多关于声音授权的讨论。对开发者来说,真正麻烦的往往不是“模型能不能模仿”,而是授权如何进入系统、生成结果如何追溯,以及授权撤回后该怎么办。</p> <p>我们在做 FlowSpeech 时也碰到过类似问题。我的体会是,不要把“用户勾选过同意”当成一个布尔字段,而应该把它做成一组可以审计的业务对象。</p> <h2>1. 把声音资产和授权分开</h2> <p>声音文件只描述技术属性,例如哈希、上传者、存储位置和创建时间。授权记录则至少要包含授权主体、用途范围、地域、有效期、来源证据和当前状态。这样同一份声音用于个人试听、商业广告、公开播客时,可以绑定不同的授权,而不是共用一个模糊的 consent=true。</p> <h2>2. 每次生成都保存授权快照</h2> <p>生成任务不要只引用当前授权 ID。授权内容以后可能变更,如果任务只查最新状态,历史结果就无法解释。更稳妥的做法是在任务创建时保存授权版本、文本哈希、声音版本、模型版本和操作者。生成出的音频再记录 artifact_id,并反向关联任务。</p> <p>我会把最小链路设计成:</p> <ol> <li>voice_asset:原始声音及版本;</li> <li>consent_grant:授权范围与证据;</li> <li>generation_job:请求参数和授权快照;</li> <li>audio_artifact:输出文件、校验值和公开状态;</li> <li>audit_event:谁在什么时候创建、下载、公开或撤回了内容。</li> </ol> <h2>3. 撤回不是简单删除一行</h2> <p>授权撤回后,系统至少要阻止新任务,并把相关公开音频进入下架队列。已经交付给客户的文件是否能删除,要按照合同和产品能力区分,不能在界面上承诺技术上做不到的“全球删除”。更现实的状态机是 active、suspended、revoked、expired,并明确每个状态允许哪些动作。</p> <h2>4. 对外展示也要可验证</h2> <p>除了后台日志,公开音频最好带上来源标记或可查询的生成记录。水印不是万能方案,但“可识别的音频 + 可验证的元数据 + 清晰的举报入口”组合起来,比一句“AI 生成”更有用。</p> <p>我们现在做的 <a href="https://flowspeech.io/zh">FlowSpeech</a> 主要解决上下文感知、情绪和停顿控制。越往产品化走,越觉得声音效果只是前半程,权限边界和可追溯性才决定这类工具能不能长期使用。</p> <p>大家在实际项目里会把授权证据放在业务数据库、对象存储,还是单独的审计系统?如果授权撤回,你们通常怎么处理已经生成并交付的音频?</p>

FlowSpeech 0 1

测试OurCoders能否发布照片

<p>今天小区的彩虹🌈<img src="https://share.icloud.com/photos/0ebtFydNy8r_gJETON61u4Ybg" alt="图片说明" /></p> <p>看来不能直接发照片,可以把iCloud Link的功能派上用场!</p>

梁建溢 15 45

奉劝大家不要移民了

<p>对于大多数人而言,移民就是悲剧。实在看不下去了,大家不要往火坑里面跳。 国内发展那么快,你出国去慢车道,消费又高,又存不下钱,又要拼命适应当地环境,何苦? 老老实实在大城市找工作,根据收入买房子上车就好。</p> <p>补充:大城市觉得房价太高太辛苦,就好好学好英语,美国远程回老家省会城市,拿同比一线的收入,三线城市的开销,岂不美哉?</p> <p>转文章: <a href="https://mp.weixin.qq.com/s?__biz=MzAxNTMxMTc0MA==&amp;mid=2651016481&amp;idx=1&amp;sn=6bde227438ea02e3da3673295821692e&amp;chksm=80721b32b705922448a9f8645e8d1a8450e57151b71e58beb64e0addf9485ad0b256a431d68b&amp;mpshare=1&amp;scene=1&amp;srcid=0530QgwbtdDlMP4ZG7Nkonpo&amp;pass_ticket=bz%2FdHaz2YWQrgwhgQlVVXt866SMnyXU53Dd0OzDmMc1uZeu0PqND%2FjdQ6fQk8Bdl#rd"> 中产阶级的地雷阵 #D03 </a></p> <p>更多文章:<a href="https://mp.weixin.qq.com/s?__biz=MzAxNTMxMTc0MA==&amp;mid=503532389&amp;idx=1&amp;sn=84ff5eefb88e1b17f9ec0efb0238140d&amp;chksm=00721d76370594601903172e49477ce0ed149a3ba1bdcb88a300b55c8c552a79ea31134216ae&amp;mpshare=1&amp;scene=1&amp;srcid=0719VQx1dNX5rlraUqjWtCFm&amp;pass_ticket=bz%2FdHaz2YWQrgwhgQlVVXt866SMnyXU53Dd0OzDmMc1uZeu0PqND%2FjdQ6fQk8Bdl#rd">列表</a></p>

halida 198 9