Name: hexo-filter-lqip
Owner: Hexo
Description: A Hexo plugins which helps to introduce low quality image placeholders to the theme
Created: 2018-04-17 20:04:56.0
Updated: 2018-05-22 18:49:23.0
Pushed: 2018-05-22 18:49:24.0
Homepage: null
Size: 13135
Language: JavaScript
GitHub Committers
| User | Most Recent Commit | # Commits |
|---|
Other Committers
| User | Most Recent Commit | # Commits |
|---|
A Hexo plugins which helps to introduce low quality image placeholders to the theme
i hexo-filter-lqip --save
Install this plugin for the theme and use the view helper to render a placeholder.
For(path_to_asset, options)
default_type as configuredReturns a CSS value for background-image property, which is a simplified version of the original image.
Example for EJS
yle="background-image: <%- lqip_for('/content/my-photo.jpg') %>"
iv>
To make it work as a real placeholder, there must be a piece of JavaScript code, which will eventually replace the placeholder with the original image. It can be done by adding a data attribute with the original image path:
yle="background-image: <%- lqip_for('/content/my-photo.jpg') %>"
ta-lazy-src="/content/my-photo.jpg"
iv>
and replacing the background-image CSS property with the original image once it's loaded:
ction () {
r lazyImages = document.querySelectorAll('[data-lazy-src]')
zyImages.forEach(function (img) {
var url = img.dataset.lazySrc
var image = new Image()
image.onload = function () {
img.style.backgroundImage = 'url(' + url + ')'
}
image.src = url
For even more improvement, the script could load only images that are visible on the screen.
Type name: potrace
Uses the posterize function from potrace to generate simplified SVG version of the image. The output
is optimized with SVGO and inlined.
Type name: color
Plain background, the dominant color extracted from the image.
Put your configuration in the theme _config.yml under lqip key.
You can also use the overriding theme config
feature of Hexo. Available options are the following:
Defaults to 'lqip-cache.json'. Could be a string with a file name of the cache.
You can also set to false to disable caching.
Ideally, the cache file should not be checked in into repository.
The priority of the after_generate filter. Defaults to 10.
You can find more information about priority in Filter documentation.
Defaults to potrace. Use this type if not specified as a param to lqip_for helper.
Configuration specific to potrace type. All keys except canvas_size are passed to the posterize function of potrace
Before the image is passed to potrace, it's resized to this size.
:
fault_type: potrace
trace:
canvas_size:
width: 140
steps: 2
color: '#dedede'
background: transparent
You can see it put together in the hexo-lqip-example repository.