Automatic thumbnailing/resizing of image uploads

🚢-shipped

#1

Some background: https://github.com/TryGhost/Ghost/issues/4453

I’d like to see the ability to automatically generate good jpg/webp thumbnails for both uploaded (embedded) images, as well as article banners.

I’ve many times hit the issue of someone uploading a huge, oversized png for the article banner, which ends up being very slow to load especially on the default theme’s article index page (which only needs a small thumbnail).


Casper Theme - Post Thumbnails Impacting Site Speed
Featured image in post, adding alt text or captions?
Storage adapter context
Media Library - Manage all files in one place
✨ Koenig Editor - Beta Release
Added ability to resize and compress images on upload
#2

same here, maybe a custom image uploader? i’d like to have the ability to control that, right now i have to do it manual every time i’m going to post something (resize, optimize, etc)


#3

My Ghost site has a bunch of images that I or a family member uploaded without thinking too much.
They vary from 300Kb to as much as 5Mb.
This has a massive impact on site-load time

I don’t think most people would think before uploading a hi-res photo. And since this is a platform geared towards writers, they certainly won’t understand the nuances of downsizing image sizes.

SUGGESTION:
As opposed to building out code to support this, Ghost could use Cloudinary to serve up resized images. (They have a free plan)

How would it work?

  • Give the user an option to upload to the server, cloudinary or both (both is an insurance policy in case the user is cut off from cloudinary)
  • On clicking the image, give the option a few standard sizes to render in

#4

That is really must needed feature for ghost. When user upload the featured image or any other images in post then it should automatically resize as thumbnail, mediam, large, full size etc. Otherwise pages taking extra time where need a very smal size picture like post thumbs.

For example,
in the follwoing image, there i need 310x207px image for the post thumb but there i am using 1080x720px image. So obviously its causing site speed issue.


#5

A quick first step—since developing the full resizing system can take time—would be to just add an “Upload post thumbnail” field similar to the current “Upload post image” field.

This is just adding a field like the existing one, so for the time being we could use optional thumbnails on index pages in this manual way, falling back to the full sized image like now only if there is not an uploaded thumbnail. Later, an also optional automated resizing functionality could be added to this new field.


#6

Hi all,

Ghost is about blogging, not image transformation so let’s not lose Ghost devs into image transf algo, etc. There are plenty services on the Web that deal with these issues pretty well.

However, Ghost responsibility would be to allow the theme devs to use these vendors with the more flexibility as possible to fulfill the needs. Recently, I suggested to include a context key to storage adapter calls so from any adapter, we could know which image type is being handled and thus being applied context-based transformations.

Maybe, a context key with some kind of tags to narrow down ever deeper the transformations to apply would be nice.

Thanks,


#7

Hey guys,

I think I’ve a solution for this:

I knew the need about it because I was building my theme thinking about some SEO aspects and figured out that the community also asked for it so there is it.

My problem right now is that the build is not passing the tests because a weird issue with theme’s tests, if someone can help me with that (just point me in the right direction to solve it and I’ll do myself) we can probably get this solution merged :smiley:


#8

Until for example one of the above proposed solutions is adopted, for now there is also a simple workaround to use thumbnails in post lists and full size images in post content.


#9

Sad news for us, the PR has been declined :sob: looks like we would need to use a fork to get this feature in
our websites for now https://github.com/TryGhost/Ghost/pull/9793


#10

This was released today in Ghost 2.1


#11