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

Question

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

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

我为什么需要这个？

My site 即使没有 height 和 width 也能正常工作，但我想指定它们，因为从 SEO 的角度来看它很重要（您可以找到有关其重要性的一些详细信息 here）。

Answer 1

使用fastimage gem 编写一个内部过滤器来执行此操作相当简单。您可以在项目的_plugins 目录中定义您的过滤器（这在Jekyll documentation 中有概述）

作为一个非常粗略的例子，你可以这样做：

require 'fastimage'

module ImageSizeFilter
  def image_size(source, dimension = nil)
    # Get the image dimensions, throw an error on failure
    # NOTE: You may want to sanitize the input string provided here
    # see: https://github.com/sdsykes/fastimage#security
    size = FastImage.size(source, raise_on_failure: true)

    # Return the requested dimension, or both dimensions if nothing was specified
    return size[0] if dimension == 'w'
    return size[1] if dimension == 'h'
    return size unless dimension

    # Fail if the requested dimension is invalid
    raise 'Invalid image size dimension requested: ' + dimension
  end
end

Liquid::Template.register_filter(ImageSizeFilter)

这样使用：

<img src={{source}}
     width="{{source | image_size: 'w'}}"
     height="{{source | image_size: 'h'}}"/>

当然，这仍然不能直接用于 GitHub 页面，因为不支持自定义插件。一般来说，要使用自定义插件，一种解决方案是build the site locally and include it in the repository。

Answer 2

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

---

简短回答

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

# Markdown title

paragraph

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

---

长答案

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

你说你想要它是出于 SEO 的原因，但我想不出。

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

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