Jekyll：在不使用外部插件的情况下获取图像的宽度/高度

Question

我想自动为我的所有图像添加height和width属性。这是通过这个不错的插件完美完成的，但我将我的网站托管在不支持外部插件的 GitHub 页面上。

问题：如何在不使用插件的情况下预填充图像的高度/宽度属性？

为什么我需要这个？

我的网站即使没有也能很好地运行height，width但我想指定它们，因为从 SEO 的角度来看它很重要（您可以在此处找到有关其重要性的一些详细信息）。

Answer 1

这个问题似乎适用于 Markdown 文件中的内容图像。默认情况下，这些图像没有设置宽度或高度。

简短的回答

您可以直接在 Markdown 中的 HTML 中设置宽度和高度，如下所示：

# Markdown title

paragraph

<img src="/path/to/image.jpg" width="400" height="300" />

长答案

如果没有插件，您无法以编程方式检索图像的宽度和高度，因此当您使用（纯）markdown 时，您会得到一个没有宽度和高度属性的图像。问题是为什么你想首先添加宽度和高度。设置宽度和高度可以防止回流，但在加载时会留下一个大的间隙。这样真的更好吗？它看起来当然不好看。渐进式 JPG 是解决此问题的一个非常好的解决方案，但我不喜欢设置它们的宽度和高度，因为“无图像”看起来不错，而渐进式 JPG 也总是看起来不错。

你说你想要它是出于搜索引擎优化的原因，但我想不出任何原因。

如果您的网站速度很慢，您实际上想在回流之前与图像下方的内容进行交互，那么合乎逻辑的解决方案是让您的网站加载速度更快。

但是，如果用户的连接速度非常慢，您可能需要手动将图像添加到 HTML 中的 Markdown 中。请参阅代码示例的简短答案。