[Investigation] Image Processing & Manipulation

This issue replaces (at least for now) issues #1688, #1734, and #4333 as the one true place to discuss all of our image processing needs in Ghost, and the possible solutions.

Please note that this issue is not about storing or managing uploaded images, only about processing them on the way to the server 😉

---

Image Processing Features

When it comes to uploading images in Ghost, there are a few issues we need to be able to resolve:

• cropping an image to a square (see #4333 for full details)
• removing exif orientation data (see #1688 for full details)
• simple 90° rotations (so that we get the right orientation of an image)
• optimising an image for display (resizing enormous digital camera photos to a sensible file and display size see #1734)
• generating different sizes of an uploaded image for use in different situations (see Multiple image sizes below for more detail).

Multiple image sizes

There are a few ideas for Ghost features that have been floating around forever that would require us to be able to generate multiple sizes of any one image:

• serving different sized images to different devices, so that a blog is more optmised for mobile
• providing themes various image sizes to display in different places (i.e. featured image might be small on the index, and a huge cover image on the post page) which would be accessible by doing something like `{{image size=“small”}}
• allowing themes or apps to define the image sizes they use (and Ghost generating them)
• any sort of image management app would need a thumbnail

The current state of Image Processing

Ghost doesn’t currently have any form of image processing built in because we haven’t yet found a good solution for doing this. Pretty much all node libraries for image processing have imagemagick as a dependency - and that is not a viable solution for Ghost due it it being a c++ program that’s ridiculously hard to install. This leaves us with a few alternative options:

1. Client - Do the processing on the client side
2. PureJS - Find a pure JS module for image processing
3. Compiler - Compile imagemagick using something like emscripten
4. node-pre-gyp - Create or change an existing node module which wraps imagemagick to use node-pre-gyp which is the same thing we use to install sqlite3
5. API - Use a 3rd party API for image processing
6. Other Some other solution we haven’t thought of yet.

Several of these solutions have been discussed or covered in the comments on #1688 and #1734, so they are worth a read 😉

What we know so far

1. Client - it may be possible to do simple cropping or resizing using the canvas element and/or File API, but this won’t work for any sort of regeneration of sizes, so it won’t present a full solution. JavaScript-Load-Image (mentioned here is probably worth looking into though).
2. PureJS - lwip is the only one I knew of, mentioned in #1734, but it turns out even that is actually largely written in C/C++! Is there really not a single PureJS one out there?! This needs investigating.
3. Compilers - there was quite an extensive discussion on modules that we could potentially compile into JS and how on https://github.com/TryGhost/Ghost/issues/1688#issuecomment-30776652, this is worth further investigation as we might be a few small steps from a solution here.
4. node-pre-gyp - if we could identify one of the imagemagick wrapper projects which has the features we need and might be active and willing to accept a PR this might be a viable option. node-pre-gyp has taken pretty much all of the pain out of sqlite3 installs. Still, as this is nowhere near as important a dependency as sqlite, I wonder if it will resolve the issue quite enough to be worth the problems some people will still have.
5. API - there are a few that have been mentioned although I can’t find the references now. Worth investigating, but this is likely to require keys and other complexities.
6. Other - anyone got any bright ideas?

---

In summary, there’s quite a bit of research and investigation to be done to come up with a couple of potential solutions for image processing in Ghost, and weigh up their pros and cons. I don’t think there is going to be an obvious winner, but we need to gather together a clear picture of what’s available to us so we can make a decision. The key thing is that we only* need crop, rotate, resize, exif modification & some optimisation tools - we aren’t trying to detect faces or anything!

Anyone and everyone is welcome to jump in on this, with any solution they can come up with - I’m not looking for one person to do all the research but rather for people to volunteer their suggestions.

* I know I know only… haha

[ErisDS]

Yes 😁

I worked on a demo, we are formulating plans around functionality for after we ship 1.0 😍

[kevinansfield]

It’s definitely on the roadmap but there are higher priority issues at the moment. Any updates will be added to this issue.