Adding lazy loading to images in Jekyll- 1 min
To achieve this, you simple add the relevant attribute to your image tags. Adding the height and width helps to prevent any reflow as a result of loading images at a later date.
<img src="image.png" loading="lazy" alt="…" width="200" height="200">
I’ve been slowly adding this to projects as they’ve been updated in recent months. The most recent of which is a Jekyll blog. Jekyll uses markdown files as the source for individual posts. To add lazy loading to a markdown image, assuming you are using kramdown:
The only downside here is that you need to add this extra snippet each time you add a new image.
There are three options when using this method to lazy load images. To quote this article on web.dev:
Here are the supported values for the loading attribute:
- auto: Default lazy-loading behavior of the browser, which is the same as not including the attribute.
- lazy: Defer loading of the resource until it reaches a calculated distance from the viewport.
- eager: Load the resource immediately, regardless of where it’s located on the page.
There you have it. A simple and straight forward way to include lazy loading on a Jekyll website.