Jekyll: Get width/height of an image without using an external plugin

Question

I want to automatically add height and width attributes to all my images. It is perfectly done via this nice plugin, but I host my site on GitHub Pages where external plugins are not supported.

Question: How to prefill height/width attributes of an image without using a plugin?

Why do I need this?

My site works well even without height and width but I want to specify them because it is important from SEO point of view (you can find some details on its importance here).

Bolme

"where external plugins are not supported.": That is why I recommended recently Hugo: https://mcmap.net/q/552932/-jekyll-how-to-use-custom-plugins-with-github-pages – Roux

@Roux thank you, but as I mentioned before it is not an option for me. First, I'd need to rework my project. Second, I'd need to change hosting as Hugo is not supported on GitHub pages (I would need to commit precompiled html files which I don't want). And finally, quick googling shown up that there is no built in solution for height and width calculation so I'd need to figure out that myself. I can't understand how can I benefit from using Hugo. Please explain if I'm missing something. – Bolme

Why do you need width and height calculations. I have never needed them. Am I missing something? – Biform

@JoostS updated the question – Bolme

Still unclear to me what your goal is... prevent reflow? And what has that to do with SEO? – Biform

@OleksandrShpota Sorry, I did not realize you were the one asking the previous question I reference here. – Roux

Height and width makes initial layout faster (the image does not need to be loaded to render it) and it makes scaling images with CSS easier. – Pepsin

Answer 1

Writing an internal filter to do this using the fastimage gem is fairly simple. You can define your filter in the _plugins directory of your project (this is outlined in the Jekyll documentation)

As a very rough example, you could do something like this:

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)

Which would be used like so:

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

Of course this still won't work with GitHub pages directly because custom plugins are not supported. To use custom plugins in general, one solution is to build the site locally and include it in the repository.

Auberbach

Answer 2

This question seems to apply to content images in markdown files. These images have no width or height set by default.

---

The short answer

You can just set the width and height directly in HTML in your markdown, like this:

# Markdown title

paragraph

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

---

The long answer

You cannot retreive the width and height of the image programmatically without a plugin, so when you use (pure) markdown you get an image without a width and height property. The question is WHY you wanted to add a width and a height in the first place. Setting the width and height prevents reflow, but it leaves a big gaping hole while loading. Is that truly better? It certainly does not look nice. Progressive JPG's are a very nice solution for this problem, but I do not prefer to set the width and height on them, as 'no image' looks good, and a progressive JPG also always looks good.

You say you want it for SEO reasons, but I cannot think of any.

If your website is so slow you actually want to interact with content below the image before the reflow, the logical solution is to make your website load faster.

However, if you have users with a really slow connection, you might want to manually add the image to the markdown in HTML. See the short answer for a code example.

Biform

Yes yes... alt attribute is missing... but that is done on purpose for brevity. – Biform