Zipic 使用指南
如何在 Mac 上优化网站图片
先准备尺寸合适的副本，比较格式和画质，上传选定版本，再检查网页在手机和桌面上的加载结果。Zipic 负责本机压缩，网站或 CMS 负责把图片提供给访客。
1. 按图片在网页中的位置确定尺寸
在网站编辑器或页面布局中确认图片的展示宽度，同时考虑手机窄屏和桌面宽屏。例如，一张展示宽度为 600 CSS 像素的图片，在 2× 屏幕上可使用宽 1200 像素的源图。宽高比也应适合图片所在的位置。
缩放前先保存工作副本。在 Mac 的“预览”中打开副本，选择“工具 → 调整大小”，勾选“重新采样图像”，单位选择像素；输入宽度，并保留“按比例缩放”，然后保存。只改 DPI 数值、不减少像素，并不能删减图片的像素数据。
如果 CMS 会生成响应式图片，按它建议的源图尺寸上传并检查页面结果，不必上传多份无人调用的副本。
2. 先比较样图，再处理整批素材
选一张有代表性的照片；如果素材包含截图或透明图形，也各选一张。保留原图，与候选副本放在一起比较。
- 打开 Zipic 的“压缩图片”。对于 JPG 和 PNG 源文件，在各自的输出设置中选择 WebP 或 JPG。
- 调整画质，用预览分隔线检查样图，再从 Finder 对准备好的副本运行“压缩图片”。
- 在“压缩图片”文件夹中逐一对比输出与源文件。在 Finder 的“显示简介”中查看文件大小，按网页实际展示尺寸检查画面。
- 只有必要细节仍然清晰时，才选用体积更小的版本。若画质不足，提高画质并从源图重新生成，不要继续压缩已经压缩过的结果。
照片重点看人脸、纹理和渐变；截图重点看小字和细线，转换后文字不够清楚就保留原始 PNG。透明图形应放在网页背景上检查效果：JPG 无法保留透明背景。
样图通过后再处理其他素材，并逐张检查结果。
3. 确认网页实际加载了新图片
通过网站正常发布流程上传选定文件。用 Chrome 打开发布后的页面，打开开发者工具的 Network（网络）面板，在开发者工具保持打开时勾选 Disable cache（停用缓存），重新加载并筛选 Img。打开对应请求，检查 URL、预览和传输大小。CMS 可能提供自动生成的版本，而不是直接提供上传的原文件。
分别在窄屏和桌面宽度下检查。如果页面仍请求旧图或尺寸过大的图片，先核对选用的素材与 CMS 响应式图片设置，再决定是否继续压缩。
4. 检查页面性能，而不只看图片字节数
修改前后都把页面 URL 放入 PageSpeed Insights，选择相同的移动端或桌面模式。查看图片相关诊断与 Largest Contentful Paint（LCP，最大内容绘制）；差异很小时重复实验室测试再判断。记下页面 URL、测试模式、采用的图片版本和结果，方便在相同条件下比较。
如果主要图片仍然很晚才出现，按报告的图片交付和渲染诊断继续排查。用实验室结果检查这次发布，再随真实用户数据更新观察趋势。
准备下一批图片时，保留原图，复用已经通过检查的尺寸和画质选择。查看 Finder 批量压缩步骤，或了解 Zipic Mac 版。
胖囧开发的 Zipic macOS App
Zipic 在 Mac 本机处理图片与 PDF，通过 Mac App Store 一次买断并获取更新。