Mac 网页图片优化

营销网站在其他指标上得分良好，唯独图片体积偏大。首屏大图是宽度 2800 px 的 PNG，内联照片是满分辨率的相机 JPEG，CDN 忠实缓存了每一个字节。通过调整至布局宽度、选择合适格式并在部署前调优质量，即可优化网页图片。

网页图片加载慢的原因

即使 CSS 缩小了显示尺寸，浏览器仍会下载完整的文件字节。大尺寸源文件会影响 LCP、移动数据流量以及 CMS 上传限制。

参考 如何在 Mac 上压缩图片 中的显示尺寸规则。每次转换格式前请先调整尺寸。

网页图片格式选择

根据内容类型和栈中的浏览器支持情况选择格式。

在将所有照片编码为无损格式前，请先阅读 有损与无损压缩 。经过正确缩放后，质量 80 至 85 的有损 WebP 或 JPEG 通常足以满足首屏大图需求。

关于 PNG 转 WebP 的步骤，请参阅 Mac 上 PNG 转 WebP 。在 <picture> 标签或静态站点生成器配置中保留 JPEG 备用。

尺寸、质量与响应式交付

针对高 DPI 屏幕，导出宽度约为 CSS 列宽的 2 倍。

缩放后的质量建议：

• 照片类首屏大图：WebP 或 JPEG 质量 80 至 85
• 博客内联照片：75 至 82
• 含文字截图：100% 缩放查看；优先使用 PNG 或更高质量的 WebP

HTML 中的响应式图片使用 srcset 配合多种宽度。若构建流水线支持，可从单一主导出文件生成 1x 和 2x 变体。

Google 的 图片 SEO 指南 推荐使用标准图片元素、带备用 src 的响应式候选项、描述性文件名以及有用的 alt 文本。压缩有助于提升交付效率，但无法替代可爬取的标记或准确的图片描述。

懒加载可改善感知速度，但若每位访客都滚动完整篇文章，总下载字节数并不会减少。即使图片在视口下方加载，较小的源文件对移动数据限额和 CDN 账单仍至关重要。

在替换首屏大图后，使用浏览器开发者工具在限速的 4G 配置下测试单个页面。当宽度匹配布局时，网络瀑布流应显示典型博客内联照片的文件大小在 200 KB 以下。

Mac 导出流程

可重复的本地流程优于一次性上传：

1. 从设计稿导出布局宽度尺寸，而非显示器截图尺寸。
2. 若导出尺寸过大，在 预览 中调整 (工具 → 调整大小…)。
3. 在 终端 中使用 cwebp 将首屏大图转换为 WebP：

brew install webp
cwebp -q 82 -m 6 hero.png -o hero.webp

4. 从同一缩放后的 PNG 源文件导出匹配的 JPEG 备用文件。
5. 合并前在浏览器开发者工具网络面板中抽查。

缩放后使用 oxipng 可优化必须保留为 PNG 的带透明度资产：

oxipng -o 4 --strip safe icon.png

在仓库中记录宽度、质量和格式规则，以便后续项目不再回退至 3 倍画板导出。

预发布资产的本地处理

未发布的首屏大图、定价截图和测试版 UI 应保留在磁盘上，直至上线。在线优化工具会在上传时接收满分辨率源文件。

关于第三方上传对机密创意资产的影响，请参阅 在线文件压缩器安全吗 。本地应用和 终端 工具可在不将文件发送至压缩网站的情况下进行处理。

若 GPS 标签不打算在公开页面显示，请剥离照片首屏大图的地理位置 EXIF 信息。元数据移除是独立于字节优化的步骤，但对隐私保护至关重要。

GetCompress 在网页资产准备中的适用场景

对于偶尔处理的资产，预览工具、cwebp 或构建插件已足够。当设计团队反复向工程团队交付混合的 PNG、JPEG、HEIC 及其他源文件，且需要一致的宽度、预览图和网页格式变体时，GetCompress 是更合适的选择。预设和批量队列可在文件进入构建流程前在本地完成处理。

GetCompress 无法替代响应式标记、CDN 配置、缓存策略或性能测量。测试部署后的页面，并保持源文件与生成的网页资产分离。