Web Image Optimizer
Turn one image into a ready-to-use responsive pack: WebP/AVIF at multiple widths, srcset & picture HTML, one ZIP download.
Drop an image here
or browse files
Supports: JPG, PNG, WebP, GIF (first frame), BMP, AVIF, HEIC
Ctrl + V Paste from clipboard
Format
Dimensions
File size
Assets
Animated input detected — the first frame will be used for the responsive pack.
Web Image Pack
| File | Dimensions | Format | Size | vs original | |
|---|---|---|---|---|---|
ZIP contains all assets, picture.html and a README with placement advice.
Ready-to-use HTML
picture — AVIF → WebP fallback chain (best compression)
img + srcset — single-format version (WebP only)
Pack Settings
Widths larger than the original are disabled.
Used to build the sizes attribute: (max-width: Npx) 100vw, Npx
🔒This image stays on your device.
⚡Tip: keep 2× your largest layout width for retina screens.
ImageTiny
压缩 + 批量处理经常在 iPhone 上压缩照片?
ImageTiny 支持本地离线压缩、裁剪、缩放、格式转换和 EXIF 清理,单次最多批量处理 200 张照片。
适合 HEIC、JPG、PNG、WebP 等常见 iPhone 照片流程。
相關工具
One upload, a complete responsive image set
Browsers pick the smallest file they can render. This tool produces the whole set for you — no server, no upload, no guessing filenames by hand.
Multiple widths
480 / 768 / 1280 / 1920 px versions (auto-clamped to your original), encoded as WebP, optionally AVIF.
HTML that works
A <picture> block with AVIF → WebP fallback sources, and a plain img[srcset] alternative. Filenames match the generated assets exactly.
One ZIP download
Every asset plus picture.html and a README with placement advice — drop it into your site and go.
How the HTML works
<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>
- The browser tries each <source> top to bottom and uses the first type it supports.
- Inside srcset, the "480w" descriptors describe each file's real pixel width — the browser then picks by viewport and device pixel ratio.
- sizes tells the browser how wide the image will render, so it downloads the smallest sufficient file.
Edge cases
- AVIF encoding is only available in some browsers (Chrome/Edge 121+). When unavailable, the AVIF option is disabled and the HTML omits the AVIF source.
- PNG transparency is preserved in WebP and AVIF outputs.
- Animated GIF/WebP inputs use the first frame — use the dedicated GIF tools for animations.
- Images narrower than 480px generate a single asset at the original width.
- HEIC/HEIF photos (iPhone default) are decoded locally in a worker and enter the pack like any other input.
最後更新: 2026年9月20日