网站图片优化

网站图片优化: 用途

选择一张或多张照片，并设置宽度（默认 480、800、1200 和 1600 px）、格式（WebP 或 JPG）和质量。工具会生成每个版本且不会把图片放大到超过原始尺寸，显示每个文件的大小，并生成带 srcset、sizes、width、height 的响应式 HTML，顶部图片使用 loading=lazy 或 fetchpriority=high。

使用方法

1. 选择网站图片。
2. 调整宽度、格式、质量和文件夹。
3. 下载 .zip 并把 HTML 复制到页面中。

使用场景

• 让网站在手机上更快。
• 改善 Core Web Vitals 的 LCP 和 CLS。
• 准备商品图和图库照片。

常见问题

为什么要生成多种宽度？

手机不需要下载为大显示器准备的 1600 px 照片。有了 srcset，浏览器会选择仍然清晰的最小版本，页面加载更快，也有助于 Core Web Vitals（LCP）。

所有浏览器都支持 WebP 吗？

是的，所有主流现代浏览器都支持（Chrome、Safari 14 及以上、Firefox 和 Edge）。如需兼容非常旧的设备，请选择 JPG。

width、height 和 loading=lazy 有什么用？

width 和 height 会在图片加载前预留空间，避免页面跳动（CLS）。loading=lazy 会延迟加载屏幕外的图片。页面顶部的主图不要使用 lazy。

真的免费吗？

是的，100%免费。无需注册，无需订阅，不限使用次数。所有工具：Tools123是免费的。

相似工具