网页图片优化器
一次上传,生成可直接上线的响应式图片包:多宽度 WebP/AVIF、srcset 与 picture 代码、一键 ZIP 下载。
把图片拖到这里
或者 选择文件
支持格式:JPG、PNG、WebP、GIF(取首帧)、BMP、AVIF、HEIC
Ctrl + V 从剪贴板粘贴
格式
尺寸
文件大小
资产数
检测到动画图片——响应式资产包将使用第一帧。
响应式图片资产包
| 文件 | 尺寸 | 格式 | 大小 | 相对原图 | |
|---|---|---|---|---|---|
ZIP 包含全部资产、picture.html 与 README 使用说明。
可直接使用的 HTML
picture — AVIF → WebP 回退链(压缩率最好)
img + srcset — 单格式版本(仅 WebP)
生成设置
大于原始宽度的档位已禁用。
用于生成 sizes 属性:(max-width: Npx) 100vw, Npx
🔒图片保留在你的设备上。
⚡提示:保留布局最大宽度 2 倍的档位以覆盖高分屏。
ImageTiny
压缩 + 批量处理经常在 iPhone 上压缩照片?
ImageTiny 支持本地离线压缩、裁剪、缩放、格式转换和 EXIF 清理,单次最多批量处理 200 张照片。
适合 HEIC、JPG、PNG、WebP 等常见 iPhone 照片流程。
相关工具
一次上传,一套完整的响应式图片
浏览器会自动选择它能渲染的最小文件。这个工具直接帮你生成整套资产——无服务器、无上传、不用手写文件名。
多档宽度
生成 480 / 768 / 1280 / 1920 px 多个版本(自动限制在原始宽度内),编码为 WebP,可选 AVIF。
可直接用的 HTML
含 AVIF → WebP 回退源的 <picture> 代码,以及 img[srcset] 备选版本。文件名与生成的资产一一对应。
一个 ZIP 下载
全部资产 + picture.html + README 部署说明——解压放进网站即可使用。
HTML 的工作原理
<picture>
<source type="image/avif" srcset="photo-480w.avif 480w, photo-1920w.avif 1920w">
<source type="image/webp" srcset="photo-480w.webp 480w, photo-1920w.webp 1920w">
<img src="photo-1920w.webp" alt="..." loading="lazy" decoding="async">
</picture>
- 浏览器自上而下尝试每个 <source>,使用第一个支持的格式。
- srcset 中的 "480w" 描述每个文件的真实像素宽度——浏览器再根据视口与设备像素比选择。
- sizes 告诉浏览器图片的实际渲染宽度,从而下载够用的最小文件。
边界情况
- AVIF 编码仅在部分浏览器可用(Chrome/Edge 121+)。不可用时 AVIF 选项禁用,HTML 也会省略 AVIF 源。
- PNG 透明度会在 WebP 与 AVIF 输出中保留。
- 动画 GIF/WebP 输入取第一帧——动画请使用专用 GIF 工具。
- 宽度不足 480px 的图片只生成原始宽度的单资产。
- HEIC/HEIF 照片(iPhone 默认格式)会在本地 worker 中解码,与其他输入一样进入资产包。
最后更新: 2026年9月20日