如何在 Gatsby 中自动优化响应式图像

fatimakanij204

图像优化——至少根据我的经验——一直是构建快速网站时的一大难题。如果没有合适的工具，平衡图像质量和带宽效率是一项艰巨的任务。Photoshop 等照片编辑工具非常适合修饰、裁剪位图图像和调整位图图像大小。不幸的是，他们并不擅长为网络创建 100% 优化的图像。 Backward Skip 10s Play Video Forward Skip 10s 幸运的是，我们有构建工具的扩展包，可以快速为我们优化图像包裹：包裹插件-imagemin 不幸的是，仅靠图像优化是不够的。您需要确保整个网站具有响应能力并且在所有屏幕尺寸上看起来都很棒。这可以通过 CSS 轻松完成，但问题在于： 您应该针对大屏幕还是小屏幕优化图像？ 如果大多数受众使用移动设备访问您的网站，那么合理的选择是针对小屏幕优化图像。

然而，重要的收入来源很可能来自拥有 17 英寸以上大屏幕的访客。你绝对不想忽视他们。 幸运的是，我们拥有的技术使我们能够为不同的屏幕尺寸提供优化的响应式图像。这意味着我们需要生成多个具有不同分辨率的优化图像，适合特定的屏幕尺寸或响应断点。 对于 WordPress 网站 黎巴嫩电话号码表 所有者来说，这种图像优化需要使用插件和第三方服务。这些响应图像的创建不能在托管服务器上完成，否则会显着减慢用户的网站速度，因此需要第三方服务。 如果您使用 Gatsby 来运行您的网站，那么您很幸运。此功能是内置的，并且已为您配置以优化响应式图像。您只需放入一些图像并编写一些代码即可将响应式图像与网页链接起来。当您运行该gatsby build命令时，图像会为您优化。这使您无需第三方服务为您执行优化。



这只需在您的部署计算机上完成即可。 在接下来的部分中，我们将学习： Gatsby 中图像优化的工作原理 如何优化网页上的图像 如何优化 Markdown 帖子中的图像 先决条件 在开始之前，我想指出，本教程适用于刚刚开始使用 Gatsby 并希望专门学习如何处理图像的开发人员。我假设您已经在以下主题方面拥有良好的基础： 反应 GraphQL 本教程不涵盖 Gatsby 的初学者概念 - 我们在这里有 Gatsby 入门指南。完成这些后，请转到下一部分来设置我们的演示项目。您可以在此处查看已完成的源项目。 演示项目设置 假设您的系统上已经安装了最新版本的 Node.js，让我们快速设置一个 Gatsby 入门项目 此入门项目包括创建和渲染响应式优化图像所需的必要依赖项和配置。