前言
在 Web 前端开发中，写博客是比较常见的事情。博客中通常会插入一些图片来展示内容，但是，将大量的图片直接放在文章中会使得博客加载速度变得很慢。为了优化网页加载速度，我们可以使用 gatsby-remark-images 这个 npm 包来实现对图片的优化。
什么是 Gatsby？
Gatsby 是一款基于 React 和 GraphQL 的前端应用框架。相对于传统的静态资源生成器，它支持一些更加高级的场景，比如动态数据获取，自适应图片处理，路由映射等。
对于博客网站来说，我们可以使用 Gatsby 来生成一个静态资源站点，使得访问者可以更快地获取需要的资源，同时也可以有效的减少服务器压力，提升网站的稳定性。
那么 Gatsby-Remark-Images 就是 Gatsby 中固有的一个 Remark 插件，用于为 Markdown 文档中的图片生成格式化的图片数据（比如尺寸大小、缩略图等信息），优化图片加载体验。
怎么使用 Gatsby-Remark-Images ？
下面我们依次介绍 Gatsby-Remark-Images 的安装、使用和配置。
安装
安装 Gatsby-Remark-Images 包：
--- ------- ------ --------------------
使用
在 Gatsby 中使用 Remark 插件时，只要将 Remark 插件指定在 gatsby-transformer-remark 的 plugins 数组中即可生效。所以我们需要在在 Gatsby 的配置文件 gatsby-config.js 中加入以下配置：
-------------- - -
-------- -
-
-------- ----------------------------
-------- -
-------- -
-- ------------
-----------------------
-- ---------
--
--
--
--
-我们需要将这个插件放在插件列表的第一个位置，这是因为在做图片优化时，它会先做图片处理，再将生成的图片数据替换 Markdown 文件中的图片链接。
最后，在你的 Markdown 文件中，你可以使用以下 Markdown 语法向文章中插入图片：
----- ----------------------- ----- ---------------------- --------- -------
配置
可以传入 gatsby-remark-images 的配置参数嵌套在 gatsby-transformer-remark 插件的 parameters 里面,例如
-------------- - -
-------- -
-
-------- ----------------------------
-------- -
-------- -
-
-------- -----------------------
-------- -
-- --------------------------------------------------------------
--------- -----
--------------------- ------
---------- - ------ ------ --
--
--
--
--
--
--
-可以有以下选项：
maxWidth图片最大宽度（单位像素），默认情况下展示的图片为原尺寸，不会有固定宽度和高度，会影响页面主题。linkImagesToOriginal图片是否要生成 (链接到原图)，参数默认值是 true 。withWebp添加(转化)Webp 格式的图片，默认值是 false。tracedSVG添加使用 SVG 方式的 placeholder 或占位符的占位符对象，您可以在任何唯一placeholder / bitmap处理阈值下使用其颜色 。quality图片的质量范围(0-100)，默认值是 90。backgroundColor设置颜色表示生成的base64图片 background 。showCaptions控制是否显示图片的名字(来自alt属性)，默认为 false。
示例代码
完整的使用示例代码如下：
------ ----- ---- -------
------ - ------- - ---- --------
------ --- ---- --------------
------ ------- -- ---- -- -- -
-----
------------------------------------------------
---- -------------------------- ------- ------------------------ -- --
--------------------------------------------------- --- -- -
----
--------
-----------------------------------
-------------------
--
---
------
-
------ ----- ----- - --------
---------- -------- -
------------------ - --- --- -- -
----------- -
-----
------ -
-------
--
--------------- -
----- -
------------------------
-
-
-
-
----
-
-
-总结
使用 Gatsby-Remark-Images 插件可以极大地提高网站图片的加载速度，同时也可以优化访客的使用体验。如果你正在构建自己的博客网站，可以尝试使用这个插件来为你的网站提供更好的图片加载体验。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/5eedb6a0b5cbfe1ea06115a5