这是Nicolas Hoizey的一篇客座帖子，他是聪明时代的联合创始人和jekyllcloudinary插件的创建者。Nicolas的插件利用Cloudinary的图像存储、优化、调整大小和交付基础设施，在Jekyll生成的静态站点中自动化响应图像。我们认为这是蜜蜂的膝盖，并邀请尼古拉斯写一点背后的过程和动机。不费吹灰之力，这是尼古拉斯。我最近把我的个人网站迁移到了最新的主要版本的Jekyll上，并借此机会重新思考我的工具链。一些我一直在使用的插件不能满足我对响应图像的需求，所以我决定寻找其他方法来满足这些需求需要。到生成响应图像HTML（我真的需要说，现在使用本地响应图像应该是一个无需考虑的问题吗？），我尝试了Jekyll响应图像插件。它非常好；它允许您定义自己的图像标记模板，这意味着您可以随意使用srcset或。但这并没有解决我所有的顾虑：用这个插件从零开始生成一个Jekyll站点需要从主图像生成所有图像的变体。我目前在我的博客上有大约750张图片，这导致了一些非常长的构建时间。将所有这些变体发送到服务器也需要相当长的时间，因为我在家里没有快速的网络访问。当然，所有这些图片都是从同一个服务器提供的，在我的例子中，这是一个便宜（但不错）的共享主机。我想要一个简化和更快的工作流程，并且服务器负载更少侧面。大部分我的公司为客户构建的响应式web站点中，使用了针对响应映像的即席解决方案，但我知道有一些SaaS响应映像解决方案，所以我决定看看是否有适合我的需要。云端是可用的功能最丰富的解决方案之一，如果您的需求合理，它甚至可以免费使用。其他解决方案要与之竞争并不容易……有了免费帐户，我可以测试我想要的任何东西，尝试不同的功能，然后决定继续还是继续其他地方。那个我要寻找的主要功能是：使用该服务作为代理的能力：主映像存储在我的主机上，但是交付给我的访问者的所有图像都来自Cloudinary，由masters动态生成。更棒的是，我不需要手动上传主图片——Cloudinary会自动从我本地发布的版本中获取它们。换言之，我的原创作品唯一的"客户"是Cloudinary。因此，我主机上的图像带宽非常低。图像裁剪和调整大小选项：现在，我只是从大型主控形状缩小图像以适应响应的布局。但我肯定会考虑使用Cloudinary神奇的自动裁剪功能进行高级艺术指导的可能性。图像格式优化：如果我在帖子中发布JPEG图像，如果访问者的浏览器支持，Cloudinary可以向他们发送WebPs。上个月，Cloudinary向我的访问者提供的图片中有三分之二是WebPs，它是由Cloudinary自动生成并为我服务的。这对我的访问者的性能和数据计划以及我的云带宽配额来说都是一个巨大的胜利。图像压缩优化：Cloudinary能够计算出最佳的压缩级别，以降低每个图像的权重，同时保持较高的视觉质量。我确信Cloudinary提供了我所需要的一切，我仍然需要开发一个使用这些的Jekyll插件功能。之后经过考虑，我决定从一个{%cloudinary%}液体标签开始，它可以简化cloudinary的图像发布，同时仍然相对容易开发。我从其他插件中得到了灵感，在需要的时候找到了StackOverflow的帮助，最终在2016年7月发布了Jekyll Cloudinary插件的第一个版本，语法非常简洁htforward:复制到剪贴板{%cloudinary[preset]路径/到/图像.jpgalt="alt text"caption="image caption"%}根据这个输入，插件输出响应图像HTML，使用

标记的srcset和size属性（请参阅本文的"可变大小和密度"部分，以了解这些属性的工作原理，本文解释了为什么大多数情况下应该使用它们而不是）。srcset和fallback src包含Cloudinary url，这些url可以动态获取post的主映像，并将它们调整为多个，备用尺寸。适用于示例，如文档中所示，此代码在降价文件：复制到剪贴板{%cloudinary徽标/资产/徽标/cloudinary.pngalt="Cloudinary logo"%}将生成此HTML代码：抄送剪贴板您可以完全控制生成图像的数量、分辨率和大小属性（这有助于浏览器决定下载哪个图像）。此控件来自可以在_配置.yaml. 这是我的配置文件的一部分，我在其中定义了规则徽标：复制到剪贴板云数据库：云绰号：…预设：标志：最小宽度：80最大宽度：400回退最大宽度：200步骤：3尺寸：'（最小宽度：50rem）13rem，（最小宽度：40rem）25vw，45vw'资料图：从来没有属性：类别：logocloud iu name:…是您在Cloudinary的个人ID预设：启动为站点定义的预设列表logo：是我的一个预置的名称，我在Liquid标签中使用了这个名称，在图像文件的名称之前最小宽度：80定义生成的最窄图像max_width:400定义生成的最宽图像fallback_max_width:200定义回退（src）映像宽度步骤：3定义要生成的图像的数量大小：'（最小宽度：50rem）13rem，（minwidth:40rem）25vw，45vw'定义响应图像的大小属性，这取决于设计和断点图：永远不会阻止生成完整的/

/元素（我通常不希望它们出现在徽标上）attributes：启动一个属性列表以始终添加到生成的和/或

元素logo添加了一个带有logo值的class属性，我在CSS中使用它来确保logo永远不会超过容器宽度的四分之一，并且是右浮动的您可以为任意数量的预设定义所有这些规则需要。用这个插件和我的免费云数据库，我的网站建设时间减少了90%，我的服务器上的存储减少了60%，我不必再担心图像优化了。巨大的赢了。在哪里从这里走？最初，我想让作者对图像使用简单的标准降价语法，但是我还没有成功地构建这个语法，尽管Jekyll的主要维护者Parker Moore自己对我的问题给出了一些有价值的答案。我得深入研究未来。在最后，这是一个学习Ruby的好方法，了解了Jekyll的内部结构，插件是如何工作的，以及如何构建和发布gem……多亏了这个有用的小宠物，我在短时间内学到了很多东西项目，共个当然，欢迎帮助制作插件甚至更好。已经有一些问题需要添加到插件中。请随意添加您的bug报告和想法，甚至可以通过pull请求进行贡献！关于响应图像的进一步阅读具有Cloudinary的响应图像自动裁剪图像，实现响应式设计，提高图像质量响应图像：srcset和size HTML图像属性通过3个简单的步骤使网站上的所有图片都能响应响应式Web设计的最佳实践