如果你正在使用Gatsby.js进行网站开发，且需要对网站中的图片进行裁剪、优化和压缩，使其更加优美和高效，那么 gatsby-remark-images-without-bg 这个npm包是一个不错的选择。通过使用这个包，我们可以轻松地对图片进行裁剪、去除背景色、压缩和优化，并实现对图片的懒加载、图片占位符等一系列优化功能。
安装
安装 gatsby-remark-images-without-bg ：
npm install gatsby-remark-images-without-bg
配置
修改 gatsby-config.js 文件中的remarkPlugins：
-- -------------------- ---- -------
-
-------- ----------------------------
-------- -
-------- -
-----------------------
-
-------- ----------------------------------
-------- -
---------------- ----------
-------- ---
--------- ----
-
--
------------------------
--------------------------------
-
-
-在这里我们可以配置背景色（backgroundColor）、图片质量（quality）、是否启用webp格式（withWebp）等。
使用方法
在Markdown中插入图片时，加上参数 background-size: contain;，例如：
这样图片裁剪时就会默认将空白区域裁剪掉，达到去除背景色的效果。同时在编译时，图片将自动压缩、优化和懒加载。
示例代码
下面是一个示例代码，可以直接复制到你的文章中进行使用。
结语
gatsby-remark-images-without-bg 包使用起来非常方便，可以轻松实现图片的优化处理。同时，本文介绍了该包的安装、配置与使用方法以及示例代码，希望能帮助到大家。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6006733f890c4f727758362f