在前端开发中，压缩图片通常是必不可少的一步，以减少页面加载时间和提高用户体验。然而，手动压缩图片往往十分耗时且效率低下。为了解决这个问题，许多开发者选择使用 tinypng 来自动地进行图片压缩。而 tinypng-compress 包提供了快速、简单的方法来使用 tinypng 压缩图片，从而使我们的开发流程更加轻松、高效。本文将详细介绍如何在前端项目中使用 tinypng-compress 进行图片压缩。
安装 tinypng-compress
首先，我们需要在项目中安装 tinypng-compress。通过 npm，我们可以直接在终端中进行安装：
npm install --save-dev tinypng-compress
现在，我们可以通过以下命令来验证安装是否成功：
npx tinypng
如果输出了一段帮助文本，则说明安装成功。
压缩单张图片
现在我们已经安装好了 tinypng-compress，接下来让我们来看看如何压缩一张图片。我们可以使用以下命令：
npx tinypng /path/to/image.png
其中 /path/to/image.png 需要替换成你的图片路径，从而将其压缩。
需要注意的是，如果你的图片已经被压缩过了，tinypng 将只返回原始图像的 URL。因此，请确保在运行这个命令之前，你的图片还没有被压缩过。
压缩多张图片
当我们需要压缩多张图片时，通常需要一次性处理所有图片。我们可以用以下命令来压缩一个目录中的所有图片：
npx tinypng /path/to/images/*
其中 /path/to/images/ 是你存放图片的目录。这个命令将会对该目录下的所有文件进行压缩，将它们压缩到同一目录下并保持原有文件名。注意，这个命令也将会过滤所有已经被压缩过的图片。
配置 API 密钥
为了使用 tinypng-compress ，我们需要先获取一个 API 密钥。你可以在 tinypng 官网上申请 API 密钥，或直接到此处申请。一旦你获得了 API 密钥，你需要将它配置到项目中。
在项目根目录下创建一个 .env 文件，并将以下内容复制进去:
TINYPNG_API_KEY=<Your API Key>
把 <your> 替换成你在 tinypng 官网上获取的 API 密钥。完成之后，你就可以使用 tinypng-compress 来压缩图片了。
压缩图片并将它们保存到指定目录
默认情况下，tinypng-compress 会将压缩后的图片保存在同一目录下。我们也可以指定另一个目录，将图片保存到指定目录中。例如：
npx tinypng -s /path/to/image.png -d /path/to/output
其中，-s 参数表示需要压缩的文件或文件夹，-d 参数指定了压缩结果的输出目录。如果该目录不存在，则会自动创建。
全局使用 tinypng-compress
我们也可以将 tinypng-compress 安装到全局中，从而可以在任何项目中使用它，而不仅仅是在当前项目中。你可以在终端中运行以下命令将它安装到全局中：
npm install -g tinypng-compress
安装完成后，你可以在任何项目中使用以下命令来压缩图片：
tinypng /path/to/image.png
结语
通过本文的介绍，相信你已经理解了 tinypng-compress 的使用方法了。这个包可以帮助你快速、简单地压缩图片，从而提高你的开发效率。如果你还没有使用过它，那么赶快试一试吧！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600572c781e8991b448e8ee0