The Hexo Advanced Image Optimizer Plugin enhances your Hexo site by leveraging the power of wsrv.nl
, a high-performance image cache and resize service. Powered by Cloudflare’s CDN, it delivers images from over 300 global datacenters, ensuring lightning-fast load times and optimal performance. With support for advanced image processing using technologies like nginx and libvips, this plugin transforms and optimizes images on-the-fly. It’s open-source, free to use, and seamlessly integrates with Hexo to process markdown images, cover images, CSS background images, and <object>
tags.
Run the (any) following command in your Hexo project directory to install the plugin:
npm install hexo-adv-img-optimizer --save
bun add hexo-adv-img-optimizer --save
pnpm install hexo-adv-img-optimizer --save
After installing the plugin, all image urls will be converted to CDN urls automatically. For example, the origin markdown file is

Then it will be converted to

The local image urls will be also converted. For example, the original file is

It will be rendered as

where https://example.com
is the url of your blog that you set in _config.yml
.
The plugin can be configured globally in Hexo’s _config.yml
file under the cdn
section or per post using front-matter in Markdown files. Front-matter settings override global settings for specific posts.
_config.yml
file.cdn
section to configure global settings (see Configuration below).cdn:
cdn_server: //wsrv.nl
use_webp: true
max_width: [1920, 1200, 800, 400]
Add a cdn
section to _config.yml
to set default options for all images. All options are optional, and defaults are applied when not specified.
cdn:
cdn_server: //wsrv.nl
native: false
use_webp: true
max_width: 1200
filename: default-image
brightness: 0
quality: 75
fit: cover
.
.
.
Add a cdn
section to a post’s front-matter to override global settings for that post’s images (e.g., cover image, markdown images, background images). For example:
---
title: My Post
cdn:
brightness: 20
filename: post-specific-image
quality: 80
fit: contain
.
.
.
---
This page is getting way too longer so visit below link for full configration options.
Please Visit: https://git.hsinghhira.me/hexo-adv-img-optimizer/
cdn: ...
) in a post override global settings in _config.yml
. If neither is set, defaults like the page-title-based filename (hello-example
for “Hello Example”) or null
are used.brightness
) or aliases (e.g., bri
) in _config.yml
or front-matter.crop
as [10,20,100,100]
, brightness
as a number between -100 and 100) to avoid errors.images.weserv.nl
) supports the specified options. Invalid values may be ignored.hexo generate
and inspect the generated HTML to confirm CDN URLs include the desired parameters (e.g., https://images.weserv.nl/?url=...&bri=20&filename=post-specific-image
).exclude_domains
that might skip certain images.filename
setting in _config.yml
or front-matter. If using the page-title default, ensure posts have a title
in their front-matter.cdn_server
supports the configured options (e.g., images.weserv.nl
documentation: https://images.weserv.nl/).use_webp: true
and ensure the browser supports WebP. Check if output_format: webp
is set correctly for specific images.For additional help or feature requests, please open an issue on the plugin’s repository or contact the maintainer.
Made with ❤️ in Aotearoa.