图片

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

¥Parcel has built in support for resizing, converting, and optimizing images. Images can be referenced from HTML, CSS, JavaScript, or any other file type.

调整图片大小和转换图片

#

¥Resizing and converting images

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

¥Parcel includes an image transformer out of the box, which allows you to resize images, convert them to a different format, or adjust the quality to reduce file size. This can be done using query parameters when referencing the image, or using a configuration file.

图片转换器依赖于 锋利的 图片转换库，该库将在需要时作为开发依赖自动安装到你的项目中。

¥The image transformer relies on the Sharp image transformation library, which will be automatically installed as a dev dependency into your project when needed.

你可以使用的查询参数是：

¥The query parameters you can use are:

图片格式

#

¥Image formats

支持以下图片格式，通过 as 查询参数作为输入和输出：

¥The following image formats are supported, both as input and as output via the as query parameter:

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

¥The following formats are also supported as inputs, but are not generally supported by browsers: tiff, heic / heif, and raw.

如果你 设置自定义 libvips 构建，也支持 GIF，但是，由于文件较大，不鼓励使用 GIF。使用视频格式代替。

¥GIFs are also supported if you setup a custom libvips build, however, using GIFs is discouraged due to their large file sizes. Use a video format instead.

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

¥For more guidance on choosing the right image formats, see the guide on web.dev.

JavaScript

#

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

¥To reference an image from JavaScript, use the URL constructor. For more details, see URL dependencies in the JavaScript docs.

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

HTML

#

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

¥To reference an image from HTML, use the <img> or <picture> element. The same image can be referenced multiple times with different query parameters to create multiple versions in different formats or sizes. See the HTML docs for more details.

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>

配置

#

¥Configuration

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

¥In addition to query parameters, Parcel also supports using a configuration file to define options that apply to all of the images in your project. For example, you could re-encode all images at a certain quality setting to reduce file size, or define more advanced options for each output format.

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

¥To set the quality across all images in your project, create a sharp.config.json file in your project and define the quality field. This will re-encode every image, not just ones referenced with query params.

sharp.config.json: 
{
  "quality": 80
}

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

¥You can also define more advanced options per format. All images in formats with options defined in sharp.config.json will be re-encoded. See the full list of supported options here.

sharp.config.json: 
{
  "jpeg": {
    "quality": 75,
    "chromaSubsampling": "4:4:4"
  },
  "webp": {
    "nearLossless": true
  },
  "png": {
    "palette": true
  }
}

图片优化

#

¥Image optimization

Parcel 还默认在生产模式下对 JPEG 和 PNG 进行无损图片优化，从而在不影响图片质量的情况下减小图片的大小。这不需要任何查询参数或配置即可使用。但是，由于优化是无损的，因此与使用 quality 查询参数或使用现代格式（例如 WebP 或 AVIF）相比，可能减少的大小可能会更少。

¥Parcel also includes lossless image optimization for JPEGs and PNGs by default in production mode, which reduces the size of images without affecting their quality. This does not require any query parameters or configuration to use. However, since the optimization is lossless, the size reduction possible may be less than if you use the quality query param, or use a modern format such as WebP or AVIF.

禁用图片优化

#

¥Disabling image optimization

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

¥To disable the default image optimization for JPEGs and PNGs in production mode, add the following to your .parcelrc configuration file:

.parcelrc: 
{
  "extends": "@parcel/config-default",
  "optimizers": {
    "*.{jpg,jpeg,png}": []
  }
}
Parcel 中文网 - 粤ICP备13048890号