图片

Parcel 内置支持调整大小、转换和优化图像。图像可以从 HTML、CSS、JavaScript 或任何其他文件类型中引用。

调整图像大小和转换图像

Parcel 包含一个开箱即用的图像转换器，允许您调整图像大小、将其转换为不同的格式或调整质量以减小文件大小。这可以通过引用图像时使用查询参数来完成，也可以使用配置文件来完成。

图像转换器依赖于 Sharp 图像转换库，该库将在需要时自动安装为您的项目的开发依赖项。

您可以使用的查询参数是

width – 要调整图像大小的宽度
height – 要调整图像大小的高度
quality – 您想要的图像质量百分比，例如 ?quality=75
as – 要将图像转换为的文件格式，例如：?as=webp

图像格式

以下图像格式受支持，既作为输入，也作为通过 as 查询参数输出的格式

jpeg / jpg - JPEG 是一种非常广泛支持的有损图像格式。它通常用于照片，并提供相当好的压缩，但不支持透明度或无损压缩。
png - 可移植网络图形 (PNG) 是一种无损图像格式。PNG 通常比 JPEG 或其他有损图像格式大得多，但支持透明度并为精细细节提供更高的质量。
webp – WebP 支持有损和无损压缩以及动画和透明度。它在所有现代浏览器中都受支持，并且在相同质量下比 JPEG 和 PNG 提供更好的压缩。
avif – AVIF 是一种基于 AV1 视频编解码器的新有损图像格式，与 JPEG 和 WebP 相比，它提供了显着的压缩和质量改进。它目前在 Chrome 和 Firefox 的最新版本中受支持。

以下格式也作为输入受支持，但通常不受浏览器支持：tiff、heic / heif 和 raw。

如果您设置了自定义 libvips 构建，GIF 也受支持，但是，由于 GIF 的文件大小很大，因此不建议使用 GIF。请改用视频格式。

有关选择正确图像格式的更多指导，请参阅 web.dev 上的指南。

JavaScript

要从 JavaScript 引用图像，请使用 URL 构造函数。有关更多详细信息，请参阅 JavaScript 文档中的 URL 依赖项。

main.js

const imageUrl = new URL(
  'image.jpeg?as=webp&width=250',
  import.meta.url
);

HTML

要从 HTML 引用图像，请使用 <img> 或 <picture> 元素。可以使用不同的查询参数多次引用同一图像，以创建不同格式或大小的多个版本。有关更多详细信息，请参阅 HTML 文档。

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>HTML Example</title>
  </head>
  <body>
    <picture>
      <source srcset="image.jpeg?as=avif&width=800" type="image/avif" />
      <source srcset="image.jpeg?as=webp&width=800" type="image/webp" />
      <source srcset="image.jpeg?width=800" type="image/jpeg" />
      <img src="image.jpeg?width=200" alt="test image" />
    </picture>
  </body>
</html>

配置

除了查询参数之外，Parcel 还支持使用配置文件来定义适用于项目中所有图像的选项。例如，您可以将所有图像重新编码为特定质量设置以减小文件大小，或者为每种输出格式定义更高级的选项。

要设置项目中所有图像的质量，请在项目中创建一个 sharp.config.json 文件并定义 quality 字段。这将重新编码每个图像，而不仅仅是使用查询参数引用的图像。

sharp.config.json

{
  "quality": 80
}

您还可以为每种格式定义更高级的选项。在 sharp.config.json 中定义了选项的格式中的所有图像都将被重新编码。请参阅此处的支持选项的完整列表。

sharp.config.json

{
  "jpeg": {
    "quality": 75,
    "chromaSubsampling": "4:4:4"
  },
  "webp": {
    "nearLossless": true
  },
  "png": {
    "palette": true
  }
}

图像优化

Parcel 默认在生产模式下为 JPEG 和 PNG 包含无损图像优化，这会减小图像的大小而不会影响其质量。这不需要任何查询参数或配置即可使用。但是，由于优化是无损的，因此与使用 quality 查询参数或使用 WebP 或 AVIF 等现代格式相比，可能的大小减少可能更少。

禁用图像优化

要在生产模式下禁用 JPEG 和 PNG 的默认图像优化，请将以下内容添加到您的 .parcelrc 配置文件中

.parcelrc

{
  "extends": "@parcel/config-default",
  "optimizers": {
    "*.{jpg,jpeg,png}": []
  }
}