Automatically resize and losslessly compress images after they are uploaded.
Serve different image resolutions based on device
Serve WebP images where supported
Yep, this is needed! We’re looking into how we can do this best. One challenge here is that there are far fewer good image processing libraries written for Node, because it’s still relatively young. We’re on the case
I'd suggest you implement something like cloudinary. However I'm having trouble with the image source set property as suggested when processing an image here: http://www.responsivebreakpoints.com/
Ghost Markdown does not seem to support it.
What's the progress on this? It's been almost two years and any updates?
Ken Jones commented
This seems nice. But I would want blog setting that determines that if a photo is to,o large the server auto compresses. I am training my authors to optimize before posting, as this is good practice. But I would want them to have the quick & easy option too. Allowing them to upload a high rez image when they are in a hurry. I see the auto compression feature as a compromise, and fail safe.
Aidan Fitzgerald commented
I like this, but couldn't ngx_pagespeed be used?
Pascal Andy commented
Two big features here when we talk about Optimization.
1) Automatic sizes recalculation
As you customize your design for phones, tablets, and desktops, the system automatically updates the code to serve the right image every time. The system renders different size images (yep this is huge awesome!).
2) Automatic image compression
Optimizes every image for maximum efficiency, making even your largest images load in no time.
Webflow just implement it - https://webflow.com/feature/responsive-images
Andrew McGarry commented
I'm curious what the tech audience here thinks of https://kraken.io. I've just signed up to Ghost and would like to know what is the best way to deal with optimising and hosting images?
On serving different image resolutions based on device, I've had problems getting `<img srcset="blah">`to function properly, but `<picture> <source srcset="blah"></picture>` works. It does break the CMS editor, which doesn't render the image.
Ghost needs gulp actually. For webp plugin, see here: https://github.com/imagemin/imagemin-webp#imageminwebpoptions and here: https://github.com/sindresorhus/gulp-webp
lukas strassel commented
Depending on graphicsmagic for ghost(pro) should be easy to resolve - any for non pro users a warning on npm start could be enough.
Alternatively there is a npm package called sharp: http://sharp.dimens.io/en/stable/performance/ https://github.com/lovell/sharp
On an internal test it performed well, but I think it only supports node v4+ (not sure about that - from October on, this wont be a problem anyway)
It already has support for webP and is actively maintained.
More important than image optimization would be better image handling :/ I've a lot of unused images in my /images folder - aren't they deleted, when I change them?
Birkhoff Lee commented
No, this should be done with plugins.
Dipesh Bhardwaj commented
Another factor we mostly forget while image handling is it's orientation, which can be unresponsive if haven't dealt with care.
This worked well while I was working on Facebook app -
Кисельгов Евгений commented
Not only optimization but the garbage collection also.
Unused images must be deleted from content folder.
Daniel Stanton commented
There are a few other ideas related to image management, and two items on the Trello board already
Thorsten Hans commented
Post images need some love. There should be a way to reuse already assigned post images from other posts, this would be a huge benefit when you think about page load times and page size. This of course apply only to scenarios where you want to join a post image (I do this to visually group article series for users)
The title of the post should also be set to the post image's ALT tag to get better ranking on Search engines
I'm Kamil (qL.b) commented
very good idea for a personal selfhosted blog but for larger scale isn't it better to integrate with services like imgix.com along with the new way of defining responsive images by img srcset attribute?
Multiple image upload for photography related blogs?
http://www.graphicsmagick.org/GraphicsMagick.html would work. I use it on my own custom gallery service for my Ghost blog.
Node Module: http://aheckmann.github.io/gm/
Images automatically saved in multiple resolutions on upload, front end is easy enough to support the changing of sizes. Free and much faster than Imagemagick (though the module also support Imagemagick).
Steven Vachon commented
https://npmjs.com/imagemin is very well maintained.
Steven Vachon commented
@Stefan, JPEG Mini is not lossless and there does not appear to be a CLI version. If support were added, it would likely have to use their web service, which costs $200/month.
Filipe Silva commented
I'm try to write on using Imagemagick and a service to watch file folders specific for ghost. But due lack of time still on planning. And I'm study the ghost plattaform to see where I can put this service to work.
I'm update the README now and post more informations and some tests. It's open source, and this can help all us.