Jekyll Lazy Load Image

Edit img tag optimized lazy load images for your Jekyll site

Add the following to your site's Gemfile:

group :jekyll_plugins do
  gem 'jekyll-lazy-load-image', require: 'jekyll-lazy-load-image/auto-execution'
end

and run bundle.

Add the following to your site's _config.yml:

lazy_load_image:
  src_attr_name: data-src # [required] You need to specify the attributes to be saved for lazy loading
  preload_image: /path/to/image # [optional] you can add a data uri or loading image as fallback src
  class_attr_values: # [optional] if you want to add custom class value, please add values
    - lazyload
  ignore_selectors: # [optional] if you want to ignore applying lazy load image, please add selector (css or xpath)
    - ".ignore-lazy-image-load"
    - "/*[@class='ignore-lazy-image-load']"
  additional_attrs: # [optional] if you want to add attributes, please add key value
    "data-size": auto

Select your favorite library and add your site. For example:

• lazysizes [Recommend]
• Echo.js
• TADA

You can change applying jekyll hook container. This library is :posts by default.

See also: https://jekyllrb.com/docs/plugins/#hooks

Add the following to your site's Gemfile:

gem 'jekyll-lazy-load-image'

Add the following to your site's _plugins, for example create _plugins/lazy-load-image.rb:

JekyllLazyLoadImage.configure do |config|
  config.owners = %i[posts documents]
end

JekyllLazyLoadImage.execute

• Use bin/setup to setup your local development environment.
• Use bin/console to load a local Pry console with the Gem.

• bundle exec rake spec

1. Fork the project
2. Create a descriptively named feature branch
3. Add your feature
4. Submit a pull request