根据 Http Archive 的数据，图像是网站加载速度的最大贡献者。因此，如果你的应用程序包含图像或图标，请务必对它们进行优化！

你可以选择多种手动选项（GIMP、Photoshop、Squoosh），或使用你喜欢的前端构建工具的插件（vite-imagetools、vite-plugin-imagemin、image-minimizer-webpack-plugin）。

请注意，大多数插件使用的 imagemin 库已经官方停止维护。

使用现代图像格式 像 Webp 或 Avif 这样的格式相对于 JPEG 可以实现高达 95% 的尺寸减小，同时保持出色的视觉精度。你可以使用像 Squoosh 这样的工具来尝试不同的格式对你的图像进行压缩。

按照图像的大小选择尺寸 没有人会感激你在应用程序中包含了 6K 像素的未经处理图像，所以请确保按照图像的实际需要来选择尺寸。在屏幕上显示较大的图像应该要比占用较少屏幕空间的图像更大一些。

不要使用响应式图像 在 Web 环境中，应该使用响应式图像来根据每个用户的需要动态加载正确的图像尺寸。由于你不会动态分发图像到网页上，使用响应式图像只会在你的应用程序中不必要地膨胀，增加了冗余拷贝。

去除元数据 直接从相机或图片库中获取的图像通常包含有关相机和镜头型号或摄影师的元数据。这些不仅是浪费的字节，而且元数据属性还可能包含潜在的敏感信息，如照片的拍摄时间、日期和地点。