Generate mutliple versions of images for responsive blogs using Hexo >= 3.x. It uses sharp library to transform images.
Comparison to similar plugins:
- hexo-img-optimization adds a separate command and doesn't work
hexo server. Requires ImageMagick to be installed. This plugin is integrated with
hexo generateand works with
- hexo-image-sizes is very similar, but this one is optimized for performance for local testing by being lazy - nothing is transformed unless requested.
npm i hexo-filter-responsive-images --save
Put all your configuration under
A micromatch pattern. All matching assets will use the assigned size rules.
sizes:[name]:width: Numberheight: Number...
Put a size name as a key. It will be used as a prefix for the generated file names.
height keys to configure dimensions. Skip one for auto-scale.
Everything else will be passed to the
resize method of sharp. See the most important
options listed below.
After sharp documentation:
cover: Default value. Crops to cover both provided dimensions.
contain: Embeds within both provided dimensions.
fill: Ignores the aspect ratio of the input and stretch to both provided dimensions.
inside: Resize the image to be as large as possible while ensuring its dimensions are less than or equal to both those specified. Preserves aspect ratio.
outside: Resize the image to be as small as possible while ensuring its dimensions are greater than or equal to both those specified. Preserves aspect ratio.
contain fit setting. Should be value from either
list, for example 'right' or 'northeast'
When true, do not enlarge if the width or height are already less than the specified dimensions
It's a number from 0 to 100, which controls quality of the output file. Works with jpg, webp and tiff format.
Full information about sharp API specific options can be found in the sharp documentation
Optionally, you can put
sizes configuration under
rules key and use
priority option to
set the priority of
after_generate filter. Can be handy, if you want to control the order of filters executed
on your files.
priority: 9rules: ...
You can find more information about priority in Filter documentation.
responsive_images:pattern: '**/*.+(png|jpg|jpeg)'sizes:small:width: 800medium:width: 1200large:width: 2000
photo.jpg it will generate the following files:
small_photo.jpg medium_photo.jpg large_photo.jpg
You can also use multiple patterns:
responsive_images:- pattern: squares/*.jpgsizes:square:width: 200height: 200- pattern: '**/*.+(png|jpg|jpeg)'sizes:thumb:width: 900
And the example with priority:
responsive_images:priority: 9rules:- pattern: squares/*.jpgsizes:square:width: 200height: 200- pattern: '**/*.+(png|jpg|jpeg)'sizes:thumb:width: 900
The following example uses sharp API specific options for advanced control:
responsive_images:pattern: '**/*.+(png|jpg|jpeg)'sizes:small:width: 800height: 800fit: insidelarge:width: 2000withoutEnlargement: true
To get the responsive image URL you can just refer to it's prefixed version. For a programmatic usage in theme templates, you can use a view helper:
For usage in generated content you can hook into the
const image_version = hexoextendhelper;hexoextendfilter;
To run specs use: