Guide to images with Ghost

I am trying to understand how to work with images in Ghost (and in and out of other editors). This is what I think, if I get it wrong please correct me.

  1. If you upload an image, e.g. by dragging it into web browser editor, then ghost automatically uploads the original (or possibly resizes to 2000 px wide maximum ?).

  2. Ghost creates responsive images of different sizes, but does this by serving a single image of a different size depending on browser (e.g. small for phone, big for laptop) , not by using with html srcset unless you do the srcset code yourself (How to use responsive images in Ghost themes)

  3. If you copy and paste an image out of the ghost web browser editor, you get whatever image the browser is currently displaying, likely smaller than your original image. So if you want to make a quick touch up of a photo, edit the copy that you uploaded originally, don’t copy and paste the image from the ghost editor.

  4. Ghost does not do low quality image previews and lazy loading yet, but this is on the roadmap (it is done in this forum software, interestingly.) It is possible to achieve this in a ghost theme yourself if you take the time to do so.

  5. If you export your Ghost website, you will get the original image you uploaded (or the max 2000px resizing).

If I got anything wrong, please feel free to correct me.

I also look forward to clarification on this. There should be an official documentation covering how Ghost manages images or what Ghost does behind the scenes in relation to images.

  1. If you upload an image, e.g. by dragging it into web browser editor, then ghost automatically uploads the original (or possibly resizes to 2000 px wide maximum ? ).

It does both. The original image is kept and a 2000px max-width image is generated from it if the original is larger than 2000px wide as the “default image”. The default image is the one used anywhere an explicit size is not requested. Any time a resized image is generated the original is used as the source rather than the 2000px resized version.

  1. Ghost creates responsive images of different sizes, but does this by serving a single image of a different size depending on browser (e.g. small for phone, big for laptop) , not by using with html srcset unless you do the srcset code yourself (How to use responsive images in Ghost themes)

Resized images are generated on first request as long as the requested image size is “allowed”. Themes can specify allowed images in their package.json file which augment the default sizes.

There are two primary ways that different image sizes are requested:

  1. The theme specifies an image size when displaying an image, eg {{img_url feature_image size="thumbnail"}}
  2. The image is loaded from a srcset. All posts created or updated since Ghost 3.19.1 will have srcset and sizes attributes added to image and gallery card output

I’m not sure what you mean by “serving a single image of a different size depending on browser”, Ghost has never done that.

If you copy and paste an image out of the ghost web browser editor, you get whatever image the browser is currently displaying, likely smaller than your original image

The editor displays the original or 2000px resized image (resized image will only exist if original was >2000px). The rest of the copy/paste details here are standard web browser behaviour and not Ghost specific.

Ghost does not do low quality image previews and lazy loading yet

Not sure what exactly you are referring to by low quality image previews but you’re correct, neither are out-of-the-box at the moment. Both are achievable in your theme if they are features you need however.

  1. If you export your Ghost website, you will get the original image you uploaded (or the max 2000px resizing).

Ghost itself does not export images. If you’re self-hosting then all images both original and resized are available in the content folder of your Ghost instance. On Ghost(Pro) the same can be requested by contacting support@ghost.org

3 Likes

Thanks, that is extremely helpful

Hi Kevin,

As I can see currently the images inside the post content does not have the mentioned attributes. Feature images can be controlled by my theme, the sizes defined in package.json files are outputed correctly (ghost 4.1.0), but with content images and gallery cards someting is not right.
If I upload a 4000px wide image into the content, Ghost resizes it to 2000px and uses the 2000px version, but in the HTML it shows the original (4000px) “width” and “hight” attribute. There are no srcset and sizes attributes. It is the same with gallery card as well.
It is strange, because when I insert images from Unsplash, Ghost renders the expected srcset attributes in html with the default (?) sizes=“(min-width: 720px) 720px.

Any idea what is wrong with Ghost’s responsive content image handling?

Thanks!

I found a bug that was introduced in 4.1.0 that prevented newly uploaded images from having srcset or sizes. A fix is ready here and should be included in the next Ghost release.

Hi @Kevin just to confirm I should be able to set a maximum width size rendered in theme for both the feature and the gallery image in the theme package using the following with Ghost v4.8.0 - Would just like to confirm because tested this today and found only feature image resized.

    "config": {
        "posts_per_page": 25,
        "image_sizes": {
            "xxs": {
                "width": 30
            },
            "xs": {
                "width": 100
            },
            "s": {
                "width": 300
            },
            "m": {
                "width": 600
            },
            "l": {
                "width": 700
            },
            "xl": {
                "width": 800
            }
        }
    },

Image and gallery cards do not use the theme config for sizes, they have a fixed set of sizes supplied by core.

Would just like to confirm because tested this today and found only feature image resized.

What are you expecting to see for content images and what are you actually seeing?

With config xl width:800 in theme package.json file I see the w800 applied for feature image. What I see for gallery jpg is image scaled down to w2000 which is as per the following:

When I had originally read through this post I think that I may of misunderstood about resizing of gallery images.

The use case for this is a client who’s contributing team regularly add 20+ images to a post. What I would like to do is limit the amount of pre-post work that they do and allow them to load images of any width.

What I am looking for is a way to set a maximum width for gallery images less than w2000, is this possible?

The images are output with srcset and sizes attributes so browsers will download an image which best matches the on-screen size and monitor resolution. The available sizes range from 600px up to 2400px. There’s no control over which sizes are made available.

1 Like

Thanks @Kevin for your help with this, I have written up some learnings with this here https://www.influencer.tips/how-to-ensure-properly-sized-images-in-ghost/.

why doesn’t Ghost just do resizing of pictures in image and gallery cards for you?

It does, as was explained earlier. srcset and sizes attributes are generated with multiple resized images which lets the browser automatically use the size most appropriate for how the image is used in the theme. It also works for mobile vs desktop where mobile will load the smaller sizes.

You shouldn’t really need to think about image sizes when uploading to Ghost outside of choosing JPEG vs PNG based on the type of image contents.

I come from Word Press. Word Press’ gallery implemenation is a much better experience for the visitor. Because when they click on an image, it loads full size. From there controls allow them to go left and right through the gallery.

That can be implemented in your theme in a way that best suits your site.

It’s not something that will be implemented in core because it’s not suitable for every site, every site has their own idea of how it should look/work, and baking the code into the generated html would mean there’s no way to improve/change the gallery behaviour over time.

I’m a Pro user. Tech support wrote that Lightbox is built into the core. But you’re saying it’s not?

Also. It turns out my theme wasn’t working right, fixing that now. So the gallery wasn’t working right.

1 Like

Images and galleries are output in a way that is compatible with lightbox scripts but unless the theme you are using has implemented a lightbox script of some description there won’t be any lightbox type behaviour for galleries.

Thank you for the help,

Paul Kulas
human

970.331.6404
Eagle, CO