Optimise images with imagemin

[Buzut]

Hey there,
I think that could be an even moe complete plugin if you could include an image asset compression (in addition to SVG):

• compress jpeg, png and gif (mozjpeg & optipng, gifsicle),
• create webp version of images.

All of this can be done with imagemin.

Let me know what you think about it.

[curbengh]

I have been considering image compression since this plugin's creation. I previously wanted to use Sharp, the fastest library; Sharp is used to compress screenshots on Hexo.io, which I helped to integrate (hexojs/site#1138).

I hold off this feature because I've been using Statically.io CDN that optimize image on-the-fly, on my blog. Previously there was also installation issue, because Sharp requires installation of native library specific to Node version. The installation thing could've improved recently, so I might revisit it.

[Buzut]

Sounds cool, I might give statically a try! How did you integrate it with Hexo?
It's obviously less user friendly when one needs to manually install dependencies in addition to npming.

I know that imagemin plugins don't require any manual intall (at least for the most part of them).

Kudos for Sharp, the API looks very nice. And it looks like there no external dependencies outside of npm:

Most modern macOS, Windows and Linux systems running Node.js v10+ do not require any additional install or runtime dependencies.

So far, I manually optimised my assets and then convert images to webp with the find command and imagemin directly via a package.json script.

Works well enough but not very integrated to Hexo…

"scripts": {
    "webp": "find ./source/assets \\( -name '*.jpg' -o -name '*.jpeg' -o -name '*.png' -o -name '*.gif' \\) -exec bash -c 'imagemin -p=webp $1 > $1.webp' _ {} \\;"
},

[curbengh]

How did you integrate it with Hexo

1. My images are available in site branch.
2. I embed an image example by ![some description](20181001/snyk-api.png).
3. I have an internal script to look for image embed (that starts with 20, as not to interfere with external image embed that starts with https://), then prepends /img/ to the image link.
4. the image embed now links to "/img/20181001/snyk-api.png".
5. I configured Netlify to reverse proxy /img/* to reverse proxy to https://cdn.statically.io/img/gitlab.com/curben/blog/raw/site/.
6. The step3 script also appends ?format=webp to request Statically to convert image.
7. In the background, 20181001/snyk-api.png actually links to https://cdn.statically.io/img/gitlab.com/curben/blog/raw/site/20181001/snyk-api.png?format=webp.

If there is no reverse proxy, you can modify the script to prepend https://cdn.statically.io/img/gitlab.com/curben/blog/raw/site/ instead.

I don't need to upload image to Statically, just add an image link after https://cdn.statically.io/img/.

To resize an image, for example to 320 pixels wide, https://cdn.statically.io/img/gitlab.com/curben/blog/raw/site/20181001/snyk-api.png?format=webp&w=320.

---

Another point is, I'm reluctant to add image compression because I haven't find a sane default, there are too many parameters, particularly the responsive image. For instance, Safari hasn't support webp, so you need responsive image element for safe fallback; responsive image element has no sane default, I don't think the one I use in step3 script can apply to everyone.

For now, I recommend hexo-filter-responsive-images. Possible enhancement to that plugin is webp support.

[Buzut]

It is pretty involved indeed. Responsive is another thing. I was just referring to compression without changing its definition: a 1000px * 1000px would be left untouched, but with proper compression it could go from 1.5Mb to 120Kb and also be converted to WebP.

But as you highlighted, hexo-filter-responsive-images might be a good option. I'll take a look at it and see if there's a way to also generate WebP images.

As for WebP, they can't replace jpeg as some browsers don't (and probably won't in the near future) support them. So images must be referrenced as jpeg (or gif or png, depending on the source format) and then it's the role of the web server to serve the more appropriate image based on the HTTP support header sent by the client browser.